{"id":24141,"date":"2025-12-18T17:43:56","date_gmt":"2025-12-18T16:43:56","guid":{"rendered":"https:\/\/serveiseducatius.xtec.cat\/vallesoriental3\/?p=24141"},"modified":"2025-12-18T17:56:41","modified_gmt":"2025-12-18T16:56:41","slug":"24141","status":"publish","type":"post","link":"https:\/\/serveiseducatius.xtec.cat\/vallesoriental3\/general\/24141\/","title":{"rendered":""},"content":{"rendered":"\n
<\/code><\/pre>\n\n\n\n
hola families<\/p>\n\n\n\n\n\n\n   \n   \n   Flipbook Diagn\u00f2stic per a WordPress<\/title>\n   <!-- Carreguem llibreries des de CDN -->\n   <script src=\"https:\/\/cdn.tailwindcss.com\"><\/script>\n   <script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/pdf.js\/3.11.174\/pdf.min.js\"><\/script>\n   <script src=\"https:\/\/unpkg.com\/page-flip\/dist\/js\/page-flip.browser.js\"><\/script>\n  \n   <!-- Configuraci\u00f3 del worker de PDF.js -->\n   <script>\n       pdfjsLib.GlobalWorkerOptions.workerSrc = 'https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/pdf.js\/3.11.174\/pdf.worker.min.js';\n   <\/script>\n<\/head>\n<body class=\"bg-gray-100 p-4\">\n\n\n<!--\n   INSTRUCCIONS PER A WORDPRESS:\n   1. Copia tot el codi que hi ha dins del DIV amb id \"wp-flipbook-wrapper\".\n   2. Enganxa-ho en un bloc \"HTML Personalitzat\" al teu WordPress.\n   3. Edita la variable 'urlPDF' al final de l'script amb el teu enlla\u00e7.\n-->\n\n\n<!-- COPIA DES D'AQU\u00cd (INICI DEL BLOC) -->\n<div id=\"wp-flipbook-wrapper\" style=\"position: relative; width: 100%; height: 80vh; min-height: 600px; background-color: #2d3748; border: 2px solid #4a5568; border-radius: 8px; overflow: hidden; margin: 20px 0; font-family: sans-serif;\">\n  \n   <!-- Missatge d'Estat (per saber qu\u00e8 passa si no carrega) -->\n   <div id=\"status-message\" style=\"position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); color: white; text-align: center; z-index: 100; width: 80%;\">\n       <div style=\"font-size: 24px; margin-bottom: 10px;\">\u23f3<\/div>\n       <div id=\"status-text\" style=\"font-size: 16px; line-height: 1.5;\">\n           Iniciant el sistema…<br>\n           <small style=\"opacity: 0.7;\">Si veus aix\u00f2, el bloc HTML s’est\u00e0 executant correctament.<\/small>\n       <\/div>\n   <\/div>\n\n\n   <!-- Contenidor del llibre -->\n   <div style=\"display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; padding: 20px;\">\n       <div id=\"book\" style=\"position: relative; z-index: 10;\">\n           <!-- Les p\u00e0gines es generaran aqu\u00ed autom\u00e0ticament -->\n       <\/div>\n   <\/div>\n\n\n   <!-- Barra de Controls -->\n   <div id=\"fb-controls\" style=\"position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%); display: flex; gap: 15px; background: rgba(0,0,0,0.7); padding: 10px 20px; border-radius: 30px; opacity: 0; transition: opacity 0.3s; z-index: 50; align-items: center;\">\n       <button id=\"fb-prev\" style=\"background:none; border:none; color:white; cursor:pointer; font-size: 20px; padding: 0 10px;\" title=\"Anterior\">\u25c0<\/button>\n       <span id=\"fb-page-info\" style=\"color:white; font-family: monospace; font-size: 14px; min-width: 50px; text-align: center;\">0 \/ 0<\/span>\n       <button id=\"fb-next\" style=\"background:none; border:none; color:white; cursor:pointer; font-size: 20px; padding: 0 10px;\" title=\"Seg\u00fcent\">\u25b6<\/button>\n      \n       <div style=\"width: 1px; height: 15px; background: #666; margin: 0 5px;\"><\/div>\n      \n       <button id=\"fb-fullscreen\" style=\"background:none; border:none; color:white; cursor:pointer; font-size: 18px; padding: 0 5px;\" title=\"Pantalla completa\">\u26f6<\/button>\n   <\/div>\n\n\n   <script>\n   (function() {\n       \/\/ ---------------------------------------------------------\n       \/\/ ZONA DE CONFIGURACI\u00d3 (EDITA AQU\u00cd)\n       \/\/ ---------------------------------------------------------\n       \/\/ Assegura't que l'enlla\u00e7 est\u00e0 b\u00e9 i entre cometes simples ' '\n      \n       const urlPDF = 'https:\/\/raw.githubusercontent.com\/mozilla\/pdf.js\/ba2edeae\/web\/compressed.tracemonkey-pldi-09.pdf';\n      \n       \/\/ Exemple correcte:\n       \/\/ const urlPDF = 'https:\/\/la-teva-web.cat\/wp-content\/uploads\/2024\/doc.pdf';\n       \/\/ ---------------------------------------------------------\n\n\n       const statusText = document.getElementById('status-text');\n       const bookElement = document.getElementById('book');\n       const controls = document.getElementById('fb-controls');\n       const pageInfo = document.getElementById('fb-page-info');\n       const wrapper = document.getElementById('wp-flipbook-wrapper');\n       let pageFlip = null;\n\n\n       \/\/ Funci\u00f3 per actualitzar el text d'estat\n       function updateStatus(msg, isError = false) {\n           statusText.innerHTML = msg;\n           if (isError) {\n               statusText.style.color = '#feb2b2'; \/\/ Vermell clar per errors\n               statusText.style.fontWeight = 'bold';\n           }\n       }\n\n\n       \/\/ Funci\u00f3 principal\n       async function initApp() {\n           \/\/ Comprovaci\u00f3 de seguretat\n           if (typeof pdfjsLib === 'undefined' || typeof St === 'undefined') {\n               updateStatus(\"Error: No s'han carregat les llibreries.<br>El teu WordPress pot estar bloquejant scripts externs.\", true);\n               return;\n           }\n\n\n           try {\n               updateStatus(\"1. Connectant amb el document PDF...\");\n               const loadingTask = pdfjsLib.getDocument(urlPDF);\n               const pdf = await loadingTask.promise;\n\n\n               updateStatus(`2. PDF trobat: ${pdf.numPages} p\u00e0gines.<br>Generant vistes pr\u00e8vies...`);\n\n\n               \/\/ Obtenir dimensions de la primera p\u00e0gina\n               const page1 = await pdf.getPage(1);\n               const viewport = page1.getViewport({ scale: 1 });\n               const aspectRatio = viewport.width \/ viewport.height;\n\n\n               \/\/ Generar els contenidors de les p\u00e0gines (HTML)\n               for (let i = 1; i <= pdf.numPages; i++) {\n                   const div = document.createElement('div');\n                   div.className = 'page-wrapper';\n                   \/\/ Estils inline per assegurar que es vegi b\u00e9 a qualsevol tema WP\n                   div.style.cssText = \"background-color: white; overflow: hidden; display: flex; align-items: center; justify-content: center; box-shadow: inset 0 0 20px rgba(0,0,0,0.05);\";\n                  \n                   const canvas = document.createElement('canvas');\n                   canvas.style.cssText = \"width: 100%; height: 100%; object-fit: contain;\";\n                   div.appendChild(canvas);\n                   bookElement.appendChild(div);\n\n\n                   \/\/ Renderitzar la p\u00e0gina al canvas\n                   pdf.getPage(i).then(p => {\n                       \/\/ Utilitzem escala 1.5 per millor qualitat\n                       const v = p.getViewport({ scale: 1.5 });\n                       const ctx = canvas.getContext('2d');\n                       canvas.width = v.width;\n                       canvas.height = v.height;\n                       p.render({ canvasContext: ctx, viewport: v });\n                   });\n               }\n\n\n               updateStatus(\"3. Iniciant motor d'animaci\u00f3...\");\n              \n               \/\/ Configurar dimensions del llibre\n               \/\/ Ajustem l'al\u00e7ada base segons l'al\u00e7ada del contenidor wrapper\n               const baseHeight = Math.min(wrapper.clientHeight - 60, 800);\n               const baseWidth = baseHeight * aspectRatio;\n\n\n               \/\/ Inicialitzar Flipbook (PageFlip)\n               pageFlip = new St.PageFlip(bookElement, {\n                   width: baseWidth,\n                   height: baseHeight,\n                   size: 'stretch',\n                   minWidth: 200,\n                   maxWidth: 1000,\n                   minHeight: 300,\n                   maxHeight: 1200,\n                   showCover: true,\n                   mobileScrollSupport: false \/\/ Millor experi\u00e8ncia en m\u00f2bils per a flipbooks\n               });\n\n\n               pageFlip.loadFromHTML(document.querySelectorAll('.page-wrapper'));\n\n\n               \/\/ Tot ha anat b\u00e9: amagar missatge i mostrar controls\n               document.getElementById('status-message').style.display = 'none';\n               controls.style.opacity = '1';\n\n\n               \/\/ Configurar Events\n               const updateInfo = () => {\n                   \/\/ +1 perqu\u00e8 els \u00edndexs comencen a 0\n                   pageInfo.innerText = (pageFlip.getCurrentPageIndex() + 1) + ' \/ ' + pageFlip.getPageCount();\n               };\n              \n               \/\/ Executar un cop al principi\n               updateInfo();\n              \n               \/\/ I cada cop que es giri full\n               pageFlip.on('flip', updateInfo);\n\n\n               \/\/ Botons\n               document.getElementById('fb-prev').onclick = () => pageFlip.flipPrev();\n               document.getElementById('fb-next').onclick = () => pageFlip.flipNext();\n              \n               \/\/ Bot\u00f3 Pantalla Completa\n               document.getElementById('fb-fullscreen').onclick = () => {\n                   if (!document.fullscreenElement) {\n                       if(wrapper.requestFullscreen) wrapper.requestFullscreen();\n                       else if(wrapper.webkitRequestFullscreen) wrapper.webkitRequestFullscreen();\n                   } else {\n                       if(document.exitFullscreen) document.exitFullscreen();\n                   }\n               };\n\n\n           } catch (err) {\n               console.error(err);\n               \/\/ Missatge d'error amigable per a l'usuari\n               let errorMsg = err.message;\n               if (err.name === 'MissingPDFException') {\n                   errorMsg = \"No s'ha trobat el fitxer PDF. Revisa l'enlla\u00e7.\";\n               } else if (err.name === 'InvalidPDFException') {\n                   errorMsg = \"El fitxer no sembla un PDF v\u00e0lid o est\u00e0 corrupte.\";\n               }\n              \n               updateStatus(`<strong>Error detectat:<\/strong><br>${errorMsg}<br><br><span style=\"font-size:12px\">Si l'enlla\u00e7 \u00e9s de Google Drive\/Dropbox, assegura't que sigui un enlla\u00e7 directe o puja el fitxer a la Mediateca de WordPress.<\/span>`, true);\n           }\n       }\n\n\n       \/\/ Executar quan el navegador estigui llest\n       if (document.readyState === 'complete' || document.readyState === 'interactive') {\n           setTimeout(initApp, 500); \/\/ Petit retard per assegurar que el DOM est\u00e0 llest\n       } else {\n           document.addEventListener('DOMContentLoaded', () => setTimeout(initApp, 500));\n       }\n   })();\n   <\/script>\n<\/div>\n<!-- FI DEL BLOC (FI DE LA COPIA) -->\n\n\n<\/body>\n<\/html>\n","protected":false},"excerpt":{"rendered":"<p>hola families Flipbook Diagn\u00f2stic per a WordPress \u23f3 Iniciant el sistema… Si veus aix\u00f2, el bloc HTML s’est\u00e0 executant correctament. […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_bbp_topic_count":0,"_bbp_reply_count":0,"_bbp_total_topic_count":0,"_bbp_total_reply_count":0,"_bbp_voice_count":0,"_bbp_anonymous_reply_count":0,"_bbp_topic_count_hidden":0,"_bbp_reply_count_hidden":0,"_bbp_forum_subforum_count":0,"site-sidebar-layout":"default","site-content-layout":"","ast-site-content-layout":"default","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"set","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"categories":[1],"tags":[],"class_list":["post-24141","post","type-post","status-publish","format-standard","hentry","category-general"],"post_mailing_queue_ids":[],"_links":{"self":[{"href":"https:\/\/serveiseducatius.xtec.cat\/vallesoriental3\/wp-json\/wp\/v2\/posts\/24141","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/serveiseducatius.xtec.cat\/vallesoriental3\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/serveiseducatius.xtec.cat\/vallesoriental3\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/serveiseducatius.xtec.cat\/vallesoriental3\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/serveiseducatius.xtec.cat\/vallesoriental3\/wp-json\/wp\/v2\/comments?post=24141"}],"version-history":[{"count":2,"href":"https:\/\/serveiseducatius.xtec.cat\/vallesoriental3\/wp-json\/wp\/v2\/posts\/24141\/revisions"}],"predecessor-version":[{"id":24143,"href":"https:\/\/serveiseducatius.xtec.cat\/vallesoriental3\/wp-json\/wp\/v2\/posts\/24141\/revisions\/24143"}],"wp:attachment":[{"href":"https:\/\/serveiseducatius.xtec.cat\/vallesoriental3\/wp-json\/wp\/v2\/media?parent=24141"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/serveiseducatius.xtec.cat\/vallesoriental3\/wp-json\/wp\/v2\/categories?post=24141"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/serveiseducatius.xtec.cat\/vallesoriental3\/wp-json\/wp\/v2\/tags?post=24141"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}