Pacific Web Extractor - Version am\u00e9lior\u00e9e et responsive<\/title>\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Roboto:wght@300;400;700&display=swap\" rel=\"stylesheet\">\n <link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.1.1\/css\/all.min.css\">\n <script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/jszip\/3.7.1\/jszip.min.js\"><\/script>\n <style>\n :root {\n --primary-color: #3498db;\n --secondary-color: #2980b9;\n --background-color: #f5f7fa;\n --text-color: #2c3e50;\n --border-color: #e0e0e0;\n --button-color: #3498db;\n --button-hover-color: #2980b9;\n --header-color: #34495e;\n --border-radius: 8px;\n }\n\n .dark-theme {\n --primary-color: #3498db;\n --secondary-color: #2980b9;\n --background-color: #2c3e50;\n --text-color: #ecf0f1;\n --border-color: #34495e;\n --button-color: #3498db;\n --button-hover-color: #2980b9;\n --header-color: #34495e;\n }\n\n body, html {\n margin: 0;\n padding: 0;\n font-family: 'Roboto', sans-serif;\n min-height: 100vh;\n background-color: var(--background-color);\n color: var(--text-color);\n transition: all 0.3s ease;\n }\n\n .container {\n display: flex;\n flex-direction: column;\n min-height: 100vh;\n width: 100vw; \/* Assurez-vous que la largeur du conteneur occupe toute la largeur de la fen\u00eatre *\/\n max-width: 100%; \/* D\u00e9sactive toute limitation de la largeur maximale *\/\n margin: 0 auto; \/* Centrer le conteneur horizontalement *\/\n }\n\n .hero-section {\n background: linear-gradient(135deg, #3498db, #2980b9);\n padding: 2rem 1rem;\n text-align: center;\n color: white;\n position: relative;\n overflow: hidden;\n min-height: 100vh;\n display: flex;\n flex-direction: column;\n justify-content: center;\n }\n\n .hero-section::before {\n content: '';\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n background: linear-gradient(135deg, #3498db, #2980b9);\n opacity: 0.7;\n z-index: 1;\n }\n\n .hero-content {\n position: relative;\n z-index: 2;\n flex-grow: 1;\n display: flex;\n flex-direction: column;\n justify-content: center;\n }\n\n .matrix-bg {\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n overflow: hidden;\n z-index: 0;\n }\n\n .hero-section h1 {\n font-size: 2rem;\n margin-bottom: 1rem;\n font-weight: 700;\n }\n\n .hero-section p {\n font-size: 1rem;\n max-width: 800px;\n margin: 0 auto 1.5rem;\n line-height: 1.6;\n }\n\n .input-group {\n display: flex;\n flex-direction: column;\n gap: 0.8rem;\n max-width: 800px;\n margin: 0 auto;\n justify-content: center;\n align-items: stretch;\n }\n\n #url-input {\n padding: 0.8rem;\n font-size: 1rem;\n border: 1px solid var(--border-color);\n border-radius: var(--border-radius);\n background-color: white;\n color: var(--text-color);\n flex: 1;\n min-width: 0;\n width: 100%;\n box-sizing: border-box;\n }\n\n .btn {\n padding: 0.8rem 1.5rem;\n background-color: var(--button-color);\n color: white;\n border: none;\n border-radius: var(--border-radius);\n cursor: pointer;\n font-size: 1rem;\n font-weight: 600;\n transition: all 0.3s ease;\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 0.5rem;\n white-space: nowrap;\n width: 100%;\n }\n\n .btn:hover {\n background-color: var(--button-hover-color);\n }\n\n @media (min-width: 768px) {\n .input-group {\n flex-direction: row;\n }\n\n #url-input {\n flex: 1;\n max-width: 500px;\n width: auto;\n }\n\n .btn {\n width: auto;\n }\n }\n\n main {\n display: none;\n flex: 1;\n padding: 1rem;\n flex-direction: column;\n gap: 1rem;\n }\n\n .editor-section, .preview-section {\n flex: 1;\n display: flex;\n flex-direction: column;\n background-color: var(--background-color);\n border: 1px solid var(--border-color);\n border-radius: var(--border-radius);\n overflow: hidden;\n }\n\n .section-header {\n background-color: var(--header-color);\n color: white;\n padding: 0.8rem;\n font-weight: 600;\n display: flex;\n justify-content: space-between;\n align-items: center;\n flex-wrap: wrap;\n }\n\n .editor-container {\n display: flex;\n flex-direction: column;\n flex: 1;\n overflow-y: auto;\n max-height: 500px;\n }\n\n .editor {\n flex: 1;\n border: none;\n min-height: 200px;\n }\n\n #preview {\n flex: 1;\n border: none;\n transition: all 0.3s ease;\n min-height: 300px;\n width: 100%;\n }\n\n .button-container {\n display: flex;\n gap: 0.8rem;\n margin-top: 0.8rem;\n flex-wrap: wrap;\n }\n\n .editor-title {\n background-color: var(--secondary-color);\n color: white;\n padding: 0.4rem;\n font-weight: 600;\n text-align: center;\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 0.5rem;\n }\n\n .preview-controls {\n display: flex;\n justify-content: space-between;\n align-items: center;\n gap: 0.8rem;\n padding: 0.8rem;\n background-color: var(--background-color);\n border-bottom: 1px solid var(--border-color);\n flex-wrap: wrap;\n }\n\n .preview-select {\n padding: 0.4rem;\n font-size: 0.9rem;\n border: 1px solid var(--border-color);\n border-radius: var(--border-radius);\n background-color: var(--background-color);\n color: var(--text-color);\n cursor: pointer;\n width: 100%;\n }\n\n #theme-toggle {\n position: fixed;\n bottom: 20px;\n right: 20px;\n z-index: 1000;\n background: none;\n border: none;\n cursor: pointer;\n font-size: 2rem;\n transition: all 0.3s ease;\n animation: float 2s ease-in-out infinite;\n }\n\n @keyframes float {\n 0% { transform: translateY(0px); }\n 50% { transform: translateY(-10px); }\n 100% { transform: translateY(0px); }\n }\n\n .tooltip {\n position: relative;\n display: inline-block;\n cursor: pointer;\n }\n\n .tooltip .tooltiptext {\n visibility: hidden;\n width: 160px;\n background-color: #555;\n color: #fff;\n text-align: center;\n border-radius: 6px;\n padding: 5px 0;\n position: absolute;\n z-index: 1;\n bottom: 125%;\n left: 50%;\n margin-left: -80px;\n opacity: 0;\n transition: opacity 0.3s;\n }\n\n .tooltip .tooltiptext::after {\n content: '';\n position: absolute;\n top: 100%;\n left: 50%;\n margin-left: -5px;\n border-width: 5px;\n border-style: solid;\n border-color: #555 transparent transparent transparent;\n }\n\n .tooltip:hover .tooltiptext {\n visibility: visible;\n opacity: 1;\n }\n\n .feature-section {\n padding: 4rem 2rem;\n background-color: #f8f9fa;\n border-top: 1px solid var(--border-color);\n }\n\n .feature-section h2 {\n text-align: center;\n font-size: 2.5rem;\n margin-bottom: 3rem;\n color: var(--primary-color);\n }\n\n .feature-grid {\n display: grid;\n grid-template-columns: 1fr;\n gap: 2rem;\n max-width: 1200px;\n margin: 0 auto;\n }\n\n .feature-card {\n background-color: white;\n border-radius: 15px;\n padding: 2rem;\n box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);\n transition: all 0.3s ease;\n display: flex;\n flex-direction: column;\n align-items: center;\n text-align: center;\n }\n\n .feature-card:hover {\n transform: translateY(-10px);\n box-shadow: 0 15px 40px rgba(0, 0, 0, 0.15);\n }\n\n .feature-icon {\n font-size: 3rem;\n color: var(--primary-color);\n margin-bottom: 1.5rem;\n background-color: rgba(52, 152, 219, 0.1);\n width: 100px;\n height: 100px;\n display: flex;\n justify-content: center;\n align-items: center;\n border-radius: 50%;\n }\n\n .feature-title {\n font-size: 1.5rem;\n font-weight: 600;\n margin-bottom: 1rem;\n color: var(--text-color);\n }\n\n .feature-description {\n font-size: 1rem;\n color: #6c757d;\n line-height: 1.6;\n }\n\n .sr-only {\n position: absolute;\n width: 1px;\n height: 1px;\n padding: 0;\n margin: -1px;\n overflow: hidden;\n clip: rect(0, 0, 0, 0);\n white-space: nowrap;\n border-width: 0;\n }\n\n @keyframes extractAnimation {\n 0% { transform: scale(1); }\n 50% { transform: scale(1.1); }\n 100% { transform: scale(1); }\n }\n\n #extract-btn {\n animation: extractAnimation 2s infinite;\n }\n\n .dark-theme .feature-card {\n background-color: var(--header-color);\n }\n\n .dark-theme .feature-description {\n color: #bdc3c7;\n }\n\n \/* Animation de chargement *\/\n .loading-overlay {\n position: fixed;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n background-color: rgba(0, 0, 0, 0.7);\n display: flex;\n justify-content: center;\n align-items: center;\n z-index: 9999;\n opacity: 0;\n visibility: hidden;\n transition: opacity 0.3s ease, visibility 0.3s ease;\n }\n\n .loading-overlay.active {\n opacity: 1;\n visibility: visible;\n }\n\n .loading-spinner {\n width: 50px;\n height: 50px;\n border: 5px solid #f3f3f3;\n border-top: 5px solid #3498db;\n border-radius: 50%;\n animation: spin 1s linear infinite;\n }\n\n @keyframes spin {\n 0% { transform: rotate(0deg); }\n 100% { transform: rotate(360deg); }\n }\n\n @media (min-width: 768px) {\n .hero-section {\n padding: 4rem 2rem;\n }\n\n .hero-section h1 {\n font-size: 2.5rem;\n }\n\n .hero-section p {\n font-size: 1.1rem;\n }\n\n main {\n flex-direction: row;\n padding: 1.5rem;\n }\n\n .preview-select {\n width: auto;\n }\n\n .feature-grid {\n grid-template-columns: repeat(2, 1fr);\n }\n }\n\n @media (min-width: 1024px) {\n .feature-grid {\n grid-template-columns: repeat(3, 1fr);\n }\n }\n <\/style>\n<\/head>\n<body>\n <div class=\"container\">\n <section class=\"hero-section\">\n <canvas id=\"matrix-canvas\" class=\"matrix-bg\"><\/canvas>\n <div class=\"hero-content\">\n <h1>Pacific Web Extractor: Votre Extracteur de Code Professionnel<\/h1>\n <p>D\u00e9couvrez Pacific Web Extractor, l'outil ultime pour les d\u00e9veloppeurs et les passionn\u00e9s du web. Notre extracteur de code avanc\u00e9 vous permet d'analyser, de modifier et d'optimiser le code source de n'importe quel site web en quelques clics.<\/p>\n <div class=\"input-group\">\n <div class=\"tooltip\">\n <input type=\"text\" id=\"url-input\" placeholder=\"Entrez l'URL du site web\" aria-label=\"URL du site web\">\n <span class=\"tooltiptext\">Entrez l'URL \u00e0 analyser<\/span>\n <\/div>\n <div class=\"tooltip\">\n <button id=\"load-btn\" class=\"btn\" aria-label=\"Charger le contenu\"><i class=\"fas fa-download\" aria-hidden=\"true\"><\/i> Charger<\/button>\n <span class=\"tooltiptext\">Charger le contenu de l'URL<\/span>\n <\/div>\n <div class=\"tooltip\">\n <button id=\"reset-btn\" class=\"btn\" aria-label=\"R\u00e9initialiser les donn\u00e9es\"><i class=\"fas fa-undo\" aria-hidden=\"true\"><\/i> R\u00e9initialiser<\/button>\n <span class=\"tooltiptext\">R\u00e9initialiser les donn\u00e9es<\/span>\n <\/div>\n <div class=\"tooltip\">\n <button id=\"download-unified-btn-hero\" class=\"btn\" aria-label=\"T\u00e9l\u00e9charger le code unifi\u00e9\"><i class=\"fas fa-file-download\" aria-hidden=\"true\"><\/i> Code unifi\u00e9<\/button>\n <span class=\"tooltiptext\">T\u00e9l\u00e9charger directement le code unifi\u00e9 de l'URL saisie<\/span>\n <\/div>\n <\/div>\n <\/div>\n <\/section>\n <main>\n <section class=\"editor-section\">\n <div class=\"section-header\">\n <span>\u00c9diteur de Code<\/span>\n <div class=\"button-container\">\n <div class=\"tooltip\">\n <button id=\"extract-btn\" class=\"btn\" aria-label=\"Extraire le code\"><i class=\"fas fa-code\" aria-hidden=\"true\"><\/i> Extraire<\/button>\n <span class=\"tooltiptext\">Extraire le code<\/span>\n <\/div>\n <\/div>\n <\/div>\n <div class=\"editor-container\">\n <div id=\"unified-editor\" class=\"editor\" aria-label=\"\u00c9diteur de code unifi\u00e9\"><\/div>\n <\/div>\n <div class=\"button-container\">\n <div class=\"tooltip\">\n <button id=\"toggle-code-btn\" class=\"btn\" aria-label=\"S\u00e9parer ou unifier le code\"><i class=\"fas fa-layer-group\" aria-hidden=\"true\"><\/i> S\u00e9parer les codes<\/button>\n <span class=\"tooltiptext\">S\u00e9parer ou unifier le code<\/span>\n <\/div>\n <div class=\"tooltip\">\n <button id=\"download-unified-btn\" class=\"btn\" aria-label=\"T\u00e9l\u00e9charger le code unifi\u00e9\"><i class=\"fas fa-file-download\" aria-hidden=\"true\"><\/i> T\u00e9l\u00e9charger code Unifi\u00e9<\/button>\n <span class=\"tooltiptext\">T\u00e9l\u00e9charger le code unifi\u00e9<\/span>\n <\/div>\n <div class=\"tooltip\">\n <button id=\"download-php-btn\" class=\"btn\" aria-label=\"T\u00e9l\u00e9charger le code pour WordPress\"><i class=\"fas fa-file-code\" aria-hidden=\"true\"><\/i> T\u00e9l\u00e9charger en PHP<\/button>\n <span class=\"tooltiptext\">T\u00e9l\u00e9charger le code pour WordPress<\/span>\n <\/div>\n <\/div>\n <\/section>\n <section class=\"preview-section\">\n <div class=\"section-header\">\n <span>Pr\u00e9visualisation<\/span>\n <div class=\"tooltip\">\n <button id=\"back-btn\" class=\"btn\" aria-label=\"Retour \u00e0 la page pr\u00e9c\u00e9dente\"><i class=\"fas fa-arrow-left\" aria-hidden=\"true\"><\/i> Retour<\/button>\n <span class=\"tooltiptext\">Retour \u00e0 la page pr\u00e9c\u00e9dente<\/span>\n <\/div>\n <\/div>\n \n <div class=\"preview-controls\">\n <select id=\"preview-format\" class=\"preview-select\" aria-label=\"Format de pr\u00e9visualisation\">\n <option value=\"desktop\"><i class=\"fas fa-desktop\" aria-hidden=\"true\"><\/i> PC<\/option>\n <option value=\"tablet\"><i class=\"fas fa-tablet-alt\" aria-hidden=\"true\"><\/i> Tablette<\/option>\n <option value=\"mobile\"><i class=\"fas fa-mobile-alt\" aria-hidden=\"true\"><\/i> Mobile<\/option>\n <\/select>\n <\/div>\n \n <iframe id=\"preview\" title=\"Pr\u00e9visualisation du code extrait\"><\/iframe>\n <\/section>\n <\/main>\n \n <section class=\"feature-section\">\n <h2>Comment \u00e7a marche ?<\/h2>\n <div class=\"feature-grid\">\n <div class=\"feature-card\">\n <div class=\"feature-icon\"><i class=\"fas fa-code\" aria-hidden=\"true\"><\/i><\/div>\n <h3 class=\"feature-title\">Extraction de Code Intelligente<\/h3>\n <p class=\"feature-description\">Pacific Web Extractor utilise une technologie d'extraction de code avanc\u00e9e pour analyser et capturer le code source de n'importe quel site web. Notre algorithme intelligent identifie et s\u00e9pare automatiquement le HTML, le CSS et le JavaScript, vous offrant une vue claire et structur\u00e9e du code. Cette approche simplifi\u00e9e vous permet de comprendre rapidement l'architecture du site, d'identifier les meilleures pratiques et d'optimiser votre propre code. Que vous soyez un d\u00e9veloppeur exp\u00e9riment\u00e9 ou un d\u00e9butant curieux, notre outil vous aide \u00e0 d\u00e9cortiquer efficacement le code web pour am\u00e9liorer vos comp\u00e9tences et vos projets.<\/p>\n <\/div>\n <div class=\"feature-card\">\n <div class=\"feature-icon\"><i class=\"fas fa-mobile-alt\" aria-hidden=\"true\"><\/i><\/div>\n <h3 class=\"feature-title\">Pr\u00e9visualisation Responsive<\/h3>\n <p class=\"feature-description\">Notre fonction de pr\u00e9visualisation responsive vous permet de visualiser instantan\u00e9ment le rendu du code extrait sur diff\u00e9rents appareils. Basculez facilement entre les vues desktop, tablette et mobile pour \u00e9valuer la r\u00e9activit\u00e9 du design. Cette fonctionnalit\u00e9 est essentielle pour comprendre comment les sites web s'adaptent \u00e0 diff\u00e9rentes tailles d'\u00e9cran, vous aidant ainsi \u00e0 cr\u00e9er des exp\u00e9riences utilisateur optimales sur tous les appareils. Analysez les points de rupture, les ajustements de mise en page et les techniques de responsive design utilis\u00e9es, afin d'am\u00e9liorer vos propres cr\u00e9ations web et d'assurer une compatibilit\u00e9 multiplateforme parfaite.<\/p>\n <\/div>\n <div class=\"feature-card\">\n <div class=\"feature-icon\"><i class=\"fas fa-file-code\" aria-hidden=\"true\"><\/i><\/div>\n <h3 class=\"feature-title\">Export Multiformat<\/h3>\n <p class=\"feature-description\">Pacific Web Extractor offre des options d'export flexibles pour r\u00e9pondre \u00e0 tous vos besoins de d\u00e9veloppement. T\u00e9l\u00e9chargez le code unifi\u00e9 en HTML pour une vue d'ensemble compl\u00e8te, ou optez pour des fichiers s\u00e9par\u00e9s HTML, CSS et JavaScript pour une int\u00e9gration facile dans vos projets. Notre fonctionnalit\u00e9 d'export PHP pour WordPress vous permet de transformer rapidement le code extrait en un template personnalis\u00e9, pr\u00eat \u00e0 \u00eatre utilis\u00e9 dans votre th\u00e8me WordPress. Ces options d'export polyvalentes vous font gagner un temps pr\u00e9cieux, que vous travailliez sur un site statique, une application web dynamique ou un projet WordPress, en vous permettant d'adapter facilement le code extrait \u00e0 votre flux de travail sp\u00e9cifique.<\/p>\n <\/div>\n <\/div>\n <\/section>\n <\/div>\n\n <button id=\"theme-toggle\" aria-label=\"Changer le th\u00e8me\">\ud83c\udf34<\/button>\n\n \n <div class=\"loading-overlay\">\n <div class=\"loading-spinner\"><\/div>\n <\/div>\n\n <script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/ace\/1.4.12\/ace.js\"><\/script>\n <script>\n const unifiedEditor = ace.edit(\"unified-editor\");\n unifiedEditor.setTheme(\"ace\/theme\/tomorrow\");\n unifiedEditor.session.setMode(\"ace\/mode\/html\");\n unifiedEditor.setValue(`<!DOCTYPE html>\n<html lang=\"fr\">\n<head>\n <meta charset=\"UTF-8\">\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n <title>Ma Page<\/title>\n <style>\n body {\n font-family: 'Roboto', sans-serif;\n display: flex;\n justify-content: center;\n align-items: center;\n min-height: 100vh;\n margin: 0;\n background-color: #f5f7fa;\n }\n .container {\n text-align: center;\n padding: 2rem;\n background-color: white;\n border-radius: 8px;\n box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);\n }\n h1 {\n color: #3498db;\n }\n p {\n color: #2c3e50;\n }\n <\/style>\n<\/head>\n<body>\n <div class=\"container\">\n <h1>Bienvenue sur Pacific Web Extractor<\/h1>\n <p>Ceci est un exemple de code extrait et pr\u00e9visualis\u00e9 avec style.<\/p>\n <\/div>\n <script>\n console.log(\"Hello, Pacific Web Extractor!\");\n <\\\/script>\n<\/body>\n<\/html>`);\n\n const extractBtn = document.getElementById('extract-btn');\n const loadBtn = document.getElementById('load-btn');\n const resetBtn = document.getElementById('reset-btn');\n const preview = document.getElementById('preview');\n const urlInput = document.getElementById('url-input');\n const toggleCodeBtn = document.getElementById('toggle-code-btn');\n const downloadUnifiedBtn = document.getElementById('download-unified-btn');\n const downloadUnifiedBtnHero = document.getElementById('download-unified-btn-hero');\n const downloadPhpBtn = document.getElementById('download-php-btn');\n const previewFormat = document.getElementById('preview-format');\n const themeToggle = document.getElementById('theme-toggle');\n const backBtn = document.getElementById('back-btn');\n const loadingOverlay = document.querySelector('.loading-overlay');\n\n let baseUrl = '';\n let siteContent = {};\n let history = [];\n let isCodeSeparated = false;\n\n function showLoading() {\n loadingOverlay.classList.add('active');\n }\n\n function hideLoading() {\n loadingOverlay.classList.remove('active');\n }\n\n extractBtn.addEventListener('click', () => {\n showLoading();\n setTimeout(() => {\n const code = unifiedEditor.getValue();\n const blob = new Blob([code], { type: 'text\/html' });\n const url = URL.createObjectURL(blob);\n preview.src = url;\n history.push(url);\n document.querySelector('main').style.display = 'flex';\n\n \/\/ Mise \u00e0 jour du code de la page navigu\u00e9e dans l'iframe\n const currentUrl = preview.src;\n siteContent[currentUrl] = code;\n hideLoading();\n }, 1000); \/\/ Simule un d\u00e9lai d'extraction de 1 seconde\n });\n\n function normalizeUrl(url) {\n if (!url.startsWith('http:\/\/') && !url.startsWith('https:\/\/')) {\n url = 'https:\/\/' + url;\n }\n try {\n const parsedUrl = new URL(url);\n return parsedUrl.toString();\n } catch (error) {\n console.error('URL invalide:', error);\n return null;\n }\n }\n\n loadBtn.addEventListener('click', async () => {\n let url = urlInput.value.trim();\n const normalizedUrl = normalizeUrl(url);\n if (normalizedUrl) {\n const forbiddenDomain = 'pacific-webtools.com';\n const parsedUrl = new URL(normalizedUrl);\n if (parsedUrl.hostname === forbiddenDomain) {\n alert(\"L'extraction du code \u00e0 partir de ce domaine est interdite.\");\n return;\n }\n\n showLoading();\n try {\n await loadSinglePage(normalizedUrl);\n history.push(normalizedUrl);\n document.querySelector('main').style.display = 'flex';\n } catch (error) {\n console.error('Erreur:', error);\n alert(\"Une erreur s'est produite lors du chargement de l'URL. Veuillez r\u00e9essayer.\");\n } finally {\n hideLoading();\n }\n } else {\n alert(\"Veuillez entrer une URL valide.\");\n }\n });\n\n resetBtn.addEventListener('click', () => {\n urlInput.value = '';\n unifiedEditor.setValue('');\n preview.src = 'about:blank';\n baseUrl = '';\n siteContent = {};\n history = [];\n alert(\"Les donn\u00e9es du site pr\u00e9c\u00e9demment extrait ont \u00e9t\u00e9 r\u00e9initialis\u00e9es.\");\n document.querySelector('main').style.display = 'none';\n });\n\n async function loadSinglePage(url) {\n showLoading();\n const response = await fetch(`https:\/\/api.allorigins.win\/raw?url=${encodeURIComponent(url)}`);\n if (response.ok) {\n const html = await response.text();\n unifiedEditor.setValue(html);\n unifiedEditor.clearSelection();\n preview.src = url;\n siteContent[url] = html; \/\/ Ajout du contenu \u00e0 siteContent\n } else {\n alert(\"Erreur lors du chargement de l'URL. Veuillez v\u00e9rifier l'URL et r\u00e9essayer.\");\n }\n hideLoading();\n }\n\n preview.addEventListener('load', () => {\n const previewDocument = preview.contentDocument;\n const previewWindow = preview.contentWindow;\n\n previewDocument.body.addEventListener('click', async (event) => {\n if (event.target.tagName === 'A') {\n event.preventDefault();\n const href = new URL(event.target.href, preview.src).href;\n if (href.startsWith(baseUrl)) {\n showLoading();\n preview.src = href;\n history.push(href);\n if (siteContent[href]) {\n unifiedEditor.setValue(siteContent[href]);\n unifiedEditor.clearSelection();\n hideLoading();\n } else {\n try {\n await loadSinglePage(href);\n \/\/ Mise \u00e0 jour dynamique du code dans l'\u00e9diteur\n const updatedHtml = await fetch(`https:\/\/api.allorigins.win\/raw?url=${encodeURIComponent(href)}`).then(res => res.text());\n unifiedEditor.setValue(updatedHtml);\n unifiedEditor.clearSelection();\n siteContent[href] = updatedHtml;\n } catch (error) {\n console.error('Erreur lors du chargement de la page:', error);\n alert(\"Erreur lors du chargement de la page. Veuillez r\u00e9essayer.\");\n } finally {\n hideLoading();\n }\n }\n }\n }\n });\n });\n\n toggleCodeBtn.addEventListener('click', () => {\n isCodeSeparated = !isCodeSeparated;\n if (isCodeSeparated) {\n separateCode();\n toggleCodeBtn.innerHTML = '<i class=\"fas fa-code\" aria-hidden=\"true\"><\/i> Unifier le code';\n toggleCodeBtn.setAttribute('aria-label', 'Unifier le code');\n } else {\n unifyCode();\n toggleCodeBtn.innerHTML = '<i class=\"fas fa-layer-group\" aria-hidden=\"true\"><\/i> S\u00e9parer les codes';\n toggleCodeBtn.setAttribute('aria-label', 'S\u00e9parer les codes');\n }\n updatePreviewHeight();\n });\n\n function separateCode() {\n const code = unifiedEditor.getValue();\n const { html, css, js } = extractCodeParts(code);\n\n const editorContainer = document.querySelector('.editor-container');\n editorContainer.innerHTML = '';\n\n createEditorWithTitle(editorContainer, 'HTML', 'html', html, 'fab fa-html5');\n createEditorWithTitle(editorContainer, 'CSS', 'css', css, 'fab fa-css3-alt');\n createEditorWithTitle(editorContainer, 'JavaScript', 'javascript', js, 'fab fa-js-square');\n\n const downloadButtons = document.createElement('div');\n downloadButtons.className = 'button-container';\n downloadButtons.innerHTML = `\n <button id=\"download-html-btn\" class=\"btn\" aria-label=\"T\u00e9l\u00e9charger HTML\"><i class=\"fas fa-file-code\" aria-hidden=\"true\"><\/i> T\u00e9l\u00e9charger HTML<\/button>\n <button id=\"download-css-btn\" class=\"btn\" aria-label=\"T\u00e9l\u00e9charger CSS\"><i class=\"fas fa-file-code\" aria-hidden=\"true\"><\/i> T\u00e9 l\u00e9charger CSS<\/button>\n <button id=\"download-js-btn\" class=\"btn\" aria-label=\"T\u00e9l\u00e9charger JavaScript\"><i class=\"fas fa-file-code\" aria-hidden=\"true\"><\/i> T\u00e9l\u00e9charger JS<\/button>\n `;\n editorContainer.appendChild(downloadButtons);\n\n document.getElementById('download-html-btn').addEventListener('click', () => downloadFile('html', editors.html.getValue()));\n document.getElementById('download-css-btn').addEventListener('click', () => downloadFile('css', editors.css.getValue()));\n document.getElementById('download-js-btn').addEventListener('click', () => downloadFile('js', editors.javascript.getValue()));\n }\n\n function unifyCode() {\n const html = editors.html.getValue();\n const css = editors.css.getValue();\n const js = editors.javascript.getValue();\n\n const unifiedCode = `\n<!DOCTYPE html>\n<html lang=\"fr\">\n<head>\n <meta charset=\"UTF-8\">\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n <title>Page unifi\u00e9e<\/title>\n <style>${css}<\/style>\n<\/head>\n<body>\n${html}\n<script>${js}<\\\/script>\n<\/body>\n<\/html>`;\n\n const editorContainer = document.querySelector('.editor-container');\n editorContainer.innerHTML = '<div id=\"unified-editor\" class=\"editor\"><\/div>';\n unifiedEditor = ace.edit(\"unified-editor\");\n unifiedEditor.setTheme(\"ace\/theme\/tomorrow\");\n unifiedEditor.session.setMode(\"ace\/mode\/html\");\n unifiedEditor.setValue(unifiedCode);\n unifiedEditor.clearSelection();\n }\n\n function createEditorWithTitle(container, title, mode, content, iconClass) {\n const editorWrapper = document.createElement('div');\n editorWrapper.className = 'editor-wrapper';\n \n const editorTitle = document.createElement('div');\n editorTitle.className = 'editor-title';\n editorTitle.innerHTML = `<i class=\"${iconClass}\" aria-hidden=\"true\"><\/i> ${title}`;\n \n const editorElement = document.createElement('div');\n editorElement.className = 'editor';\n editorElement.id = `${mode.toLowerCase()}-editor`;\n \n editorWrapper.appendChild(editorTitle);\n editorWrapper.appendChild(editorElement);\n container.appendChild(editorWrapper);\n \n const editor = ace.edit(editorElement);\n editor.setTheme(\"ace\/theme\/tomorrow\");\n editor.session.setMode(`ace\/mode\/${mode.toLowerCase()}`);\n editor.setValue(content);\n editor.clearSelection();\n editors[mode.toLowerCase()] = editor;\n }\n\n let editors = {};\n\n function extractCodeParts(code) {\n const parser = new DOMParser();\n const doc = parser.parseFromString(code, 'text\/html');\n \n const html = doc.body.innerHTML.trim();\n \n let css = '';\n const styleElements = doc.getElementsByTagName('style');\n for (let style of styleElements) {\n css += style.textContent + '\\n';\n }\n \n let js = '';\n const scriptElements = doc.getElementsByTagName('script');\n for (let script of scriptElements) {\n if (!script.src) {\n js += script.textContent + '\\n';\n }\n }\n \n return { html, css, js };\n }\n\n function downloadFile(type, content) {\n const blob = new Blob([content], { type: 'text\/plain' });\n const url = URL.createObjectURL(blob);\n const a = document.createElement('a');\n a.href = url;\n a.download = `extracted.${type}`;\n document.body.appendChild(a);\n a.click();\n document.body.removeChild(a);\n URL.revokeObjectURL(url);\n }\n\n downloadUnifiedBtn.addEventListener('click', () => {\n const code = unifiedEditor.getValue();\n downloadFile('html', code);\n });\n\n downloadUnifiedBtnHero.addEventListener('click', async () => {\n let url = urlInput.value.trim();\n const normalizedUrl = normalizeUrl(url);\n if (normalizedUrl) {\n showLoading();\n try {\n const response = await fetch(`https:\/\/api.allorigins.win\/raw?url=${encodeURIComponent(normalizedUrl)}`);\n if (response.ok) {\n const html = await response.text();\n downloadFile('html', html);\n } else {\n alert(\"Erreur lors du chargement de l'URL. Veuillez v\u00e9rifier l'URL et r\u00e9essayer.\");\n }\n } catch (error) {\n console.error('Erreur:', error);\n alert(\"Une erreur s'est produite lors du t\u00e9l\u00e9chargement. Veuillez r\u00e9essayer.\");\n } finally {\n hideLoading();\n }\n } else {\n alert(\"Veuillez entrer une URL valide.\");\n }\n });\n\n downloadPhpBtn.addEventListener('click', () => {\n const code = unifiedEditor.getValue();\n const phpCode = `<?php\n\/*\nTemplate Name: Pacific Web Extractor Template\n*\/\n\nget_header();\n?>\n\n${code}\n\n<?php\nget_footer();\n?>`;\n downloadFile('php', phpCode);\n });\n\n previewFormat.addEventListener('change', () => {\n const format = previewFormat.value;\n switch (format) {\n case 'desktop':\n preview.style.width = '100%';\n preview.style.height = '100%';\n break;\n case 'tablet':\n preview.style.width = '768px';\n preview.style.height = '1024px';\n break;\n case 'mobile':\n preview.style.width = '375px';\n preview.style.height = '667px';\n break;\n }\n updatePreviewHeight();\n });\n\n function updatePreviewHeight() {\n const previewContainer = document.querySelector('.preview-section');\n const previewControls = document.querySelector('.preview-controls');\n const availableHeight = previewContainer.clientHeight - previewControls.clientHeight;\n preview.style.height = `${availableHeight}px`;\n }\n\n window.addEventListener('resize', updatePreviewHeight);\n\n themeToggle.addEventListener('click', () => {\n document.body.classList.toggle('dark-theme');\n if (document.body.classList.contains('dark-theme')) {\n themeToggle.textContent = '\ud83c\udf1e';\n themeToggle.setAttribute('aria-label', 'Passer au th\u00e8me clair');\n unifiedEditor.setTheme(\"ace\/theme\/monokai\");\n for (let editor in editors) {\n editors[editor].setTheme(\"ace\/theme\/monokai\");\n }\n } else {\n themeToggle.textContent = '\ud83c\udf34';\n themeToggle.setAttribute('aria-label', 'Passer au th\u00e8me sombre');\n unifiedEditor.setTheme(\"ace\/theme\/tomorrow\");\n for (let editor in editors) {\n editors[editor].setTheme(\"ace\/theme\/tomorrow\");\n }\n }\n });\n\n backBtn.addEventListener('click', () => {\n if (history.length > 1) {\n history.pop(); \/\/ Remove current page\n const previousPage = history[history.length - 1];\n preview.src = previousPage;\n if (siteContent[previousPage]) {\n unifiedEditor.setValue(siteContent[previousPage]);\n unifiedEditor.clearSelection();\n }\n }\n });\n\n function initMatrix() {\n const canvas = document.getElementById('matrix-canvas');\n const ctx = canvas.getContext('2d');\n\n canvas.width = window.innerWidth;\n canvas.height = window.innerHeight;\n\n const katakana = '\u30a2\u30a1\u30ab\u30b5\u30bf\u30ca\u30cf\u30de\u30e4\u30e3\u30e9\u30ef\u30ac\u30b6\u30c0\u30d0\u30d1\u30a4\u30a3\u30ad\u30b7\u30c1\u30cb\u30d2\u30df\u30ea\u30f0\u30ae\u30b8\u30c2\u30d3\u30d4\u30a6\u30a5\u30af\u30b9\u30c4\u30cc\u30d5\u30e0\u30e6\u30e5\u30eb\u30b0\u30ba\u30d6\u30c5\u30d7\u30a8\u30a7\u30b1\u30bb\u30c6\u30cd\u30d8\u30e1\u30ec\u30f1\u30b2\u30bc\u30c7\u30d9\u30da\u30aa\u30a9\u30b3\u30bd\u30c8\u30ce\u30db\u30e2\u30e8\u30e7\u30ed\u30f2\u30b4\u30be\u30c9\u30dc\u30dd\u30f4\u30c3\u30f3';\n const latin = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';\n const nums = '0123456789';\n const alphabet = katakana + latin + nums;\n\n const fontSize = 16;\n const columns = canvas.width \/ fontSize;\n\n const rainDrops = [];\n\n for (let x = 0; x < columns; x++) {\n rainDrops[x] = 1;\n }\n\n const draw = () => {\n ctx.fillStyle = 'rgba(0, 0, 0, 0.05)';\n ctx.fillRect(0, 0, canvas.width, canvas.height);\n\n ctx.fillStyle = '#0F0';\n ctx.font = fontSize + 'px monospace';\n\n for (let i = 0; i < rainDrops.length; i++) {\n const text = alphabet.charAt(Math.floor(Math.random() * alphabet.length));\n ctx.fillText(text, i * fontSize, rainDrops[i] * fontSize);\n\n if (rainDrops[i] * fontSize > canvas.height && Math.random() > 0.975) {\n rainDrops[i] = 0;\n }\n rainDrops[i]++;\n }\n };\n\n setInterval(draw, 30);\n }\n\n window.addEventListener('load', initMatrix);\n window.addEventListener('resize', () => {\n const canvas = document.getElementById('matrix-canvas');\n canvas.width = window.innerWidth;\n canvas.height = window.innerHeight;\n });\n <\/script>\n<\/body>\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Pacific Web Extractor – Version am\u00e9lior\u00e9e et responsive Pacific Web Extractor: Votre Extracteur de Code Professionnel D\u00e9couvrez Pacific Web Extractor, l’outil ultime pour les d\u00e9veloppeurs et les passionn\u00e9s du web. Notre extracteur de code avanc\u00e9 vous permet d’analyser, de modifier et d’optimiser le code source de n’importe quel site web en quelques clics. Entrez l’URL […]<\/p>\n","protected":false},"author":1,"featured_media":799,"comment_status":"open","ping_status":"open","sticky":false,"template":"elementor_header_footer","format":"standard","meta":{"footnotes":""},"categories":[4],"tags":[],"class_list":["post-798","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-web-ressources"],"yoast_head":"\n<title>Extraire le code HTML CSS Js d'une page web - Web Extractor<\/title>\n<meta name=\"description\" content=\"Extraire le HTML, CSS, JS d'une page web en 3 clics ! Inspirez-vous des plus beaux sites internet gr\u00e2ce \u00e0 notre outil pour d\u00e9veloppeur Web.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/pacific-webtools.com\/web-extractor\/extraire-le-code-html-css-js-dune-page-web\/\" \/>\n<meta property=\"og:locale\" content=\"fr_FR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Extraire le code HTML CSS Js d'une page web - Web Extractor\" \/>\n<meta property=\"og:description\" content=\"Extraire le HTML, CSS, JS d'une page web en 3 clics ! Inspirez-vous des plus beaux sites internet gr\u00e2ce \u00e0 notre outil pour d\u00e9veloppeur Web.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/pacific-webtools.com\/web-extractor\/extraire-le-code-html-css-js-dune-page-web\/\" \/>\n<meta property=\"og:site_name\" content=\"Web Extractor\" \/>\n<meta property=\"article:published_time\" content=\"2024-09-03T10:51:01+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-09-03T10:51:49+00:00\" \/>\n<meta name=\"author\" content=\"admin\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"\u00c9crit par\" \/>\n\t<meta name=\"twitter:data1\" content=\"admin\" \/>\n\t<meta name=\"twitter:label2\" content=\"Dur\u00e9e de lecture estim\u00e9e\" \/>\n\t<meta name=\"twitter:data2\" content=\"3 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/pacific-webtools.com\/web-extractor\/extraire-le-code-html-css-js-dune-page-web\/\",\"url\":\"https:\/\/pacific-webtools.com\/web-extractor\/extraire-le-code-html-css-js-dune-page-web\/\",\"name\":\"Extraire le code HTML CSS Js d'une page web - Web Extractor\",\"isPartOf\":{\"@id\":\"https:\/\/pacific-webtools.com\/web-extractor\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/pacific-webtools.com\/web-extractor\/extraire-le-code-html-css-js-dune-page-web\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/pacific-webtools.com\/web-extractor\/extraire-le-code-html-css-js-dune-page-web\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/pacific-webtools.com\/web-extractor\/wp-content\/uploads\/2024\/09\/html-css-js-scraping.avif\",\"datePublished\":\"2024-09-03T10:51:01+00:00\",\"dateModified\":\"2024-09-03T10:51:49+00:00\",\"author\":{\"@id\":\"https:\/\/pacific-webtools.com\/web-extractor\/#\/schema\/person\/0f95670ed0b3b265a488dae146fdda48\"},\"description\":\"Extraire le HTML, CSS, JS d'une page web en 3 clics ! Inspirez-vous des plus beaux sites internet gr\u00e2ce \u00e0 notre outil pour d\u00e9veloppeur Web.\",\"breadcrumb\":{\"@id\":\"https:\/\/pacific-webtools.com\/web-extractor\/extraire-le-code-html-css-js-dune-page-web\/#breadcrumb\"},\"inLanguage\":\"fr-FR\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/pacific-webtools.com\/web-extractor\/extraire-le-code-html-css-js-dune-page-web\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"fr-FR\",\"@id\":\"https:\/\/pacific-webtools.com\/web-extractor\/extraire-le-code-html-css-js-dune-page-web\/#primaryimage\",\"url\":\"https:\/\/pacific-webtools.com\/web-extractor\/wp-content\/uploads\/2024\/09\/html-css-js-scraping.avif\",\"contentUrl\":\"https:\/\/pacific-webtools.com\/web-extractor\/wp-content\/uploads\/2024\/09\/html-css-js-scraping.avif\",\"width\":1380,\"height\":921,\"caption\":\"Exemple de code extrait d'une page web unique.\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/pacific-webtools.com\/web-extractor\/extraire-le-code-html-css-js-dune-page-web\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/pacific-webtools.com\/web-extractor\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Extraire le code HTML CSS Js d’une page web\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/pacific-webtools.com\/web-extractor\/#website\",\"url\":\"https:\/\/pacific-webtools.com\/web-extractor\/\",\"name\":\"Web Extractor\",\"description\":\"Extracteur de Code\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/pacific-webtools.com\/web-extractor\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"fr-FR\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/pacific-webtools.com\/web-extractor\/#\/schema\/person\/0f95670ed0b3b265a488dae146fdda48\",\"name\":\"admin\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"fr-FR\",\"@id\":\"https:\/\/pacific-webtools.com\/web-extractor\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/94a5a2d7ac834dce40e1e25743dcb576?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/94a5a2d7ac834dce40e1e25743dcb576?s=96&d=mm&r=g\",\"caption\":\"admin\"},\"sameAs\":[\"https:\/\/pacific-webtools.com\/web-extractor\"],\"url\":\"https:\/\/pacific-webtools.com\/web-extractor\/author\/admin\/\"}]}<\/script>\n","yoast_head_json":{"title":"Extraire le code HTML CSS Js d'une page web - Web Extractor","description":"Extraire le HTML, CSS, JS d'une page web en 3 clics ! Inspirez-vous des plus beaux sites internet gr\u00e2ce \u00e0 notre outil pour d\u00e9veloppeur Web.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/pacific-webtools.com\/web-extractor\/extraire-le-code-html-css-js-dune-page-web\/","og_locale":"fr_FR","og_type":"article","og_title":"Extraire le code HTML CSS Js d'une page web - Web Extractor","og_description":"Extraire le HTML, CSS, JS d'une page web en 3 clics ! Inspirez-vous des plus beaux sites internet gr\u00e2ce \u00e0 notre outil pour d\u00e9veloppeur Web.","og_url":"https:\/\/pacific-webtools.com\/web-extractor\/extraire-le-code-html-css-js-dune-page-web\/","og_site_name":"Web Extractor","article_published_time":"2024-09-03T10:51:01+00:00","article_modified_time":"2024-09-03T10:51:49+00:00","author":"admin","twitter_card":"summary_large_image","twitter_misc":{"\u00c9crit par":"admin","Dur\u00e9e de lecture estim\u00e9e":"3 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/pacific-webtools.com\/web-extractor\/extraire-le-code-html-css-js-dune-page-web\/","url":"https:\/\/pacific-webtools.com\/web-extractor\/extraire-le-code-html-css-js-dune-page-web\/","name":"Extraire le code HTML CSS Js d'une page web - Web Extractor","isPartOf":{"@id":"https:\/\/pacific-webtools.com\/web-extractor\/#website"},"primaryImageOfPage":{"@id":"https:\/\/pacific-webtools.com\/web-extractor\/extraire-le-code-html-css-js-dune-page-web\/#primaryimage"},"image":{"@id":"https:\/\/pacific-webtools.com\/web-extractor\/extraire-le-code-html-css-js-dune-page-web\/#primaryimage"},"thumbnailUrl":"https:\/\/pacific-webtools.com\/web-extractor\/wp-content\/uploads\/2024\/09\/html-css-js-scraping.avif","datePublished":"2024-09-03T10:51:01+00:00","dateModified":"2024-09-03T10:51:49+00:00","author":{"@id":"https:\/\/pacific-webtools.com\/web-extractor\/#\/schema\/person\/0f95670ed0b3b265a488dae146fdda48"},"description":"Extraire le HTML, CSS, JS d'une page web en 3 clics ! Inspirez-vous des plus beaux sites internet gr\u00e2ce \u00e0 notre outil pour d\u00e9veloppeur Web.","breadcrumb":{"@id":"https:\/\/pacific-webtools.com\/web-extractor\/extraire-le-code-html-css-js-dune-page-web\/#breadcrumb"},"inLanguage":"fr-FR","potentialAction":[{"@type":"ReadAction","target":["https:\/\/pacific-webtools.com\/web-extractor\/extraire-le-code-html-css-js-dune-page-web\/"]}]},{"@type":"ImageObject","inLanguage":"fr-FR","@id":"https:\/\/pacific-webtools.com\/web-extractor\/extraire-le-code-html-css-js-dune-page-web\/#primaryimage","url":"https:\/\/pacific-webtools.com\/web-extractor\/wp-content\/uploads\/2024\/09\/html-css-js-scraping.avif","contentUrl":"https:\/\/pacific-webtools.com\/web-extractor\/wp-content\/uploads\/2024\/09\/html-css-js-scraping.avif","width":1380,"height":921,"caption":"Exemple de code extrait d'une page web unique."},{"@type":"BreadcrumbList","@id":"https:\/\/pacific-webtools.com\/web-extractor\/extraire-le-code-html-css-js-dune-page-web\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/pacific-webtools.com\/web-extractor\/"},{"@type":"ListItem","position":2,"name":"Extraire le code HTML CSS Js d’une page web"}]},{"@type":"WebSite","@id":"https:\/\/pacific-webtools.com\/web-extractor\/#website","url":"https:\/\/pacific-webtools.com\/web-extractor\/","name":"Web Extractor","description":"Extracteur de Code","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/pacific-webtools.com\/web-extractor\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"fr-FR"},{"@type":"Person","@id":"https:\/\/pacific-webtools.com\/web-extractor\/#\/schema\/person\/0f95670ed0b3b265a488dae146fdda48","name":"admin","image":{"@type":"ImageObject","inLanguage":"fr-FR","@id":"https:\/\/pacific-webtools.com\/web-extractor\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/94a5a2d7ac834dce40e1e25743dcb576?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/94a5a2d7ac834dce40e1e25743dcb576?s=96&d=mm&r=g","caption":"admin"},"sameAs":["https:\/\/pacific-webtools.com\/web-extractor"],"url":"https:\/\/pacific-webtools.com\/web-extractor\/author\/admin\/"}]}},"_links":{"self":[{"href":"https:\/\/pacific-webtools.com\/web-extractor\/wp-json\/wp\/v2\/posts\/798"}],"collection":[{"href":"https:\/\/pacific-webtools.com\/web-extractor\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/pacific-webtools.com\/web-extractor\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/pacific-webtools.com\/web-extractor\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/pacific-webtools.com\/web-extractor\/wp-json\/wp\/v2\/comments?post=798"}],"version-history":[{"count":5,"href":"https:\/\/pacific-webtools.com\/web-extractor\/wp-json\/wp\/v2\/posts\/798\/revisions"}],"predecessor-version":[{"id":804,"href":"https:\/\/pacific-webtools.com\/web-extractor\/wp-json\/wp\/v2\/posts\/798\/revisions\/804"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/pacific-webtools.com\/web-extractor\/wp-json\/wp\/v2\/media\/799"}],"wp:attachment":[{"href":"https:\/\/pacific-webtools.com\/web-extractor\/wp-json\/wp\/v2\/media?parent=798"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/pacific-webtools.com\/web-extractor\/wp-json\/wp\/v2\/categories?post=798"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/pacific-webtools.com\/web-extractor\/wp-json\/wp\/v2\/tags?post=798"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

\n\t\t\t\t

\n\t\t\t\t\t\n\n\n \n \n \n Pacific Web Extractor - Version am\u00e9lior\u00e9e et responsive<\/title>\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Roboto:wght@300;400;700&display=swap\" rel=\"stylesheet\">\n <link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.1.1\/css\/all.min.css\">\n <script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/jszip\/3.7.1\/jszip.min.js\"><\/script>\n <style>\n :root {\n --primary-color: #3498db;\n --secondary-color: #2980b9;\n --background-color: #f5f7fa;\n --text-color: #2c3e50;\n --border-color: #e0e0e0;\n --button-color: #3498db;\n --button-hover-color: #2980b9;\n --header-color: #34495e;\n --border-radius: 8px;\n }\n\n .dark-theme {\n --primary-color: #3498db;\n --secondary-color: #2980b9;\n --background-color: #2c3e50;\n --text-color: #ecf0f1;\n --border-color: #34495e;\n --button-color: #3498db;\n --button-hover-color: #2980b9;\n --header-color: #34495e;\n }\n\n body, html {\n margin: 0;\n padding: 0;\n font-family: 'Roboto', sans-serif;\n min-height: 100vh;\n background-color: var(--background-color);\n color: var(--text-color);\n transition: all 0.3s ease;\n }\n\n .container {\n display: flex;\n flex-direction: column;\n min-height: 100vh;\n width: 100vw; \/* Assurez-vous que la largeur du conteneur occupe toute la largeur de la fen\u00eatre *\/\n max-width: 100%; \/* D\u00e9sactive toute limitation de la largeur maximale *\/\n margin: 0 auto; \/* Centrer le conteneur horizontalement *\/\n }\n\n .hero-section {\n background: linear-gradient(135deg, #3498db, #2980b9);\n padding: 2rem 1rem;\n text-align: center;\n color: white;\n position: relative;\n overflow: hidden;\n min-height: 100vh;\n display: flex;\n flex-direction: column;\n justify-content: center;\n }\n\n .hero-section::before {\n content: '';\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n background: linear-gradient(135deg, #3498db, #2980b9);\n opacity: 0.7;\n z-index: 1;\n }\n\n .hero-content {\n position: relative;\n z-index: 2;\n flex-grow: 1;\n display: flex;\n flex-direction: column;\n justify-content: center;\n }\n\n .matrix-bg {\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n overflow: hidden;\n z-index: 0;\n }\n\n .hero-section h1 {\n font-size: 2rem;\n margin-bottom: 1rem;\n font-weight: 700;\n }\n\n .hero-section p {\n font-size: 1rem;\n max-width: 800px;\n margin: 0 auto 1.5rem;\n line-height: 1.6;\n }\n\n .input-group {\n display: flex;\n flex-direction: column;\n gap: 0.8rem;\n max-width: 800px;\n margin: 0 auto;\n justify-content: center;\n align-items: stretch;\n }\n\n #url-input {\n padding: 0.8rem;\n font-size: 1rem;\n border: 1px solid var(--border-color);\n border-radius: var(--border-radius);\n background-color: white;\n color: var(--text-color);\n flex: 1;\n min-width: 0;\n width: 100%;\n box-sizing: border-box;\n }\n\n .btn {\n padding: 0.8rem 1.5rem;\n background-color: var(--button-color);\n color: white;\n border: none;\n border-radius: var(--border-radius);\n cursor: pointer;\n font-size: 1rem;\n font-weight: 600;\n transition: all 0.3s ease;\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 0.5rem;\n white-space: nowrap;\n width: 100%;\n }\n\n .btn:hover {\n background-color: var(--button-hover-color);\n }\n\n @media (min-width: 768px) {\n .input-group {\n flex-direction: row;\n }\n\n #url-input {\n flex: 1;\n max-width: 500px;\n width: auto;\n }\n\n .btn {\n width: auto;\n }\n }\n\n main {\n display: none;\n flex: 1;\n padding: 1rem;\n flex-direction: column;\n gap: 1rem;\n }\n\n .editor-section, .preview-section {\n flex: 1;\n display: flex;\n flex-direction: column;\n background-color: var(--background-color);\n border: 1px solid var(--border-color);\n border-radius: var(--border-radius);\n overflow: hidden;\n }\n\n .section-header {\n background-color: var(--header-color);\n color: white;\n padding: 0.8rem;\n font-weight: 600;\n display: flex;\n justify-content: space-between;\n align-items: center;\n flex-wrap: wrap;\n }\n\n .editor-container {\n display: flex;\n flex-direction: column;\n flex: 1;\n overflow-y: auto;\n max-height: 500px;\n }\n\n .editor {\n flex: 1;\n border: none;\n min-height: 200px;\n }\n\n #preview {\n flex: 1;\n border: none;\n transition: all 0.3s ease;\n min-height: 300px;\n width: 100%;\n }\n\n .button-container {\n display: flex;\n gap: 0.8rem;\n margin-top: 0.8rem;\n flex-wrap: wrap;\n }\n\n .editor-title {\n background-color: var(--secondary-color);\n color: white;\n padding: 0.4rem;\n font-weight: 600;\n text-align: center;\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 0.5rem;\n }\n\n .preview-controls {\n display: flex;\n justify-content: space-between;\n align-items: center;\n gap: 0.8rem;\n padding: 0.8rem;\n background-color: var(--background-color);\n border-bottom: 1px solid var(--border-color);\n flex-wrap: wrap;\n }\n\n .preview-select {\n padding: 0.4rem;\n font-size: 0.9rem;\n border: 1px solid var(--border-color);\n border-radius: var(--border-radius);\n background-color: var(--background-color);\n color: var(--text-color);\n cursor: pointer;\n width: 100%;\n }\n\n #theme-toggle {\n position: fixed;\n bottom: 20px;\n right: 20px;\n z-index: 1000;\n background: none;\n border: none;\n cursor: pointer;\n font-size: 2rem;\n transition: all 0.3s ease;\n animation: float 2s ease-in-out infinite;\n }\n\n @keyframes float {\n 0% { transform: translateY(0px); }\n 50% { transform: translateY(-10px); }\n 100% { transform: translateY(0px); }\n }\n\n .tooltip {\n position: relative;\n display: inline-block;\n cursor: pointer;\n }\n\n .tooltip .tooltiptext {\n visibility: hidden;\n width: 160px;\n background-color: #555;\n color: #fff;\n text-align: center;\n border-radius: 6px;\n padding: 5px 0;\n position: absolute;\n z-index: 1;\n bottom: 125%;\n left: 50%;\n margin-left: -80px;\n opacity: 0;\n transition: opacity 0.3s;\n }\n\n .tooltip .tooltiptext::after {\n content: '';\n position: absolute;\n top: 100%;\n left: 50%;\n margin-left: -5px;\n border-width: 5px;\n border-style: solid;\n border-color: #555 transparent transparent transparent;\n }\n\n .tooltip:hover .tooltiptext {\n visibility: visible;\n opacity: 1;\n }\n\n .feature-section {\n padding: 4rem 2rem;\n background-color: #f8f9fa;\n border-top: 1px solid var(--border-color);\n }\n\n .feature-section h2 {\n text-align: center;\n font-size: 2.5rem;\n margin-bottom: 3rem;\n color: var(--primary-color);\n }\n\n .feature-grid {\n display: grid;\n grid-template-columns: 1fr;\n gap: 2rem;\n max-width: 1200px;\n margin: 0 auto;\n }\n\n .feature-card {\n background-color: white;\n border-radius: 15px;\n padding: 2rem;\n box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);\n transition: all 0.3s ease;\n display: flex;\n flex-direction: column;\n align-items: center;\n text-align: center;\n }\n\n .feature-card:hover {\n transform: translateY(-10px);\n box-shadow: 0 15px 40px rgba(0, 0, 0, 0.15);\n }\n\n .feature-icon {\n font-size: 3rem;\n color: var(--primary-color);\n margin-bottom: 1.5rem;\n background-color: rgba(52, 152, 219, 0.1);\n width: 100px;\n height: 100px;\n display: flex;\n justify-content: center;\n align-items: center;\n border-radius: 50%;\n }\n\n .feature-title {\n font-size: 1.5rem;\n font-weight: 600;\n margin-bottom: 1rem;\n color: var(--text-color);\n }\n\n .feature-description {\n font-size: 1rem;\n color: #6c757d;\n line-height: 1.6;\n }\n\n .sr-only {\n position: absolute;\n width: 1px;\n height: 1px;\n padding: 0;\n margin: -1px;\n overflow: hidden;\n clip: rect(0, 0, 0, 0);\n white-space: nowrap;\n border-width: 0;\n }\n\n @keyframes extractAnimation {\n 0% { transform: scale(1); }\n 50% { transform: scale(1.1); }\n 100% { transform: scale(1); }\n }\n\n #extract-btn {\n animation: extractAnimation 2s infinite;\n }\n\n .dark-theme .feature-card {\n background-color: var(--header-color);\n }\n\n .dark-theme .feature-description {\n color: #bdc3c7;\n }\n\n \/* Animation de chargement *\/\n .loading-overlay {\n position: fixed;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n background-color: rgba(0, 0, 0, 0.7);\n display: flex;\n justify-content: center;\n align-items: center;\n z-index: 9999;\n opacity: 0;\n visibility: hidden;\n transition: opacity 0.3s ease, visibility 0.3s ease;\n }\n\n .loading-overlay.active {\n opacity: 1;\n visibility: visible;\n }\n\n .loading-spinner {\n width: 50px;\n height: 50px;\n border: 5px solid #f3f3f3;\n border-top: 5px solid #3498db;\n border-radius: 50%;\n animation: spin 1s linear infinite;\n }\n\n @keyframes spin {\n 0% { transform: rotate(0deg); }\n 100% { transform: rotate(360deg); }\n }\n\n @media (min-width: 768px) {\n .hero-section {\n padding: 4rem 2rem;\n }\n\n .hero-section h1 {\n font-size: 2.5rem;\n }\n\n .hero-section p {\n font-size: 1.1rem;\n }\n\n main {\n flex-direction: row;\n padding: 1.5rem;\n }\n\n .preview-select {\n width: auto;\n }\n\n .feature-grid {\n grid-template-columns: repeat(2, 1fr);\n }\n }\n\n @media (min-width: 1024px) {\n .feature-grid {\n grid-template-columns: repeat(3, 1fr);\n }\n }\n <\/style>\n<\/head>\n<body>\n <div class=\"container\">\n <section class=\"hero-section\">\n <canvas id=\"matrix-canvas\" class=\"matrix-bg\"><\/canvas>\n <div class=\"hero-content\">\n <h1>Pacific Web Extractor: Votre Extracteur de Code Professionnel<\/h1>\n <p>D\u00e9couvrez Pacific Web Extractor, l'outil ultime pour les d\u00e9veloppeurs et les passionn\u00e9s du web. Notre extracteur de code avanc\u00e9 vous permet d'analyser, de modifier et d'optimiser le code source de n'importe quel site web en quelques clics.<\/p>\n <div class=\"input-group\">\n <div class=\"tooltip\">\n <input type=\"text\" id=\"url-input\" placeholder=\"Entrez l'URL du site web\" aria-label=\"URL du site web\">\n <span class=\"tooltiptext\">Entrez l'URL \u00e0 analyser<\/span>\n <\/div>\n <div class=\"tooltip\">\n <button id=\"load-btn\" class=\"btn\" aria-label=\"Charger le contenu\"><i class=\"fas fa-download\" aria-hidden=\"true\"><\/i> Charger<\/button>\n <span class=\"tooltiptext\">Charger le contenu de l'URL<\/span>\n <\/div>\n <div class=\"tooltip\">\n <button id=\"reset-btn\" class=\"btn\" aria-label=\"R\u00e9initialiser les donn\u00e9es\"><i class=\"fas fa-undo\" aria-hidden=\"true\"><\/i> R\u00e9initialiser<\/button>\n <span class=\"tooltiptext\">R\u00e9initialiser les donn\u00e9es<\/span>\n <\/div>\n <div class=\"tooltip\">\n <button id=\"download-unified-btn-hero\" class=\"btn\" aria-label=\"T\u00e9l\u00e9charger le code unifi\u00e9\"><i class=\"fas fa-file-download\" aria-hidden=\"true\"><\/i> Code unifi\u00e9<\/button>\n <span class=\"tooltiptext\">T\u00e9l\u00e9charger directement le code unifi\u00e9 de l'URL saisie<\/span>\n <\/div>\n <\/div>\n <\/div>\n <\/section>\n <main>\n <section class=\"editor-section\">\n <div class=\"section-header\">\n <span>\u00c9diteur de Code<\/span>\n <div class=\"button-container\">\n <div class=\"tooltip\">\n <button id=\"extract-btn\" class=\"btn\" aria-label=\"Extraire le code\"><i class=\"fas fa-code\" aria-hidden=\"true\"><\/i> Extraire<\/button>\n <span class=\"tooltiptext\">Extraire le code<\/span>\n <\/div>\n <\/div>\n <\/div>\n <div class=\"editor-container\">\n <div id=\"unified-editor\" class=\"editor\" aria-label=\"\u00c9diteur de code unifi\u00e9\"><\/div>\n <\/div>\n <div class=\"button-container\">\n <div class=\"tooltip\">\n <button id=\"toggle-code-btn\" class=\"btn\" aria-label=\"S\u00e9parer ou unifier le code\"><i class=\"fas fa-layer-group\" aria-hidden=\"true\"><\/i> S\u00e9parer les codes<\/button>\n <span class=\"tooltiptext\">S\u00e9parer ou unifier le code<\/span>\n <\/div>\n <div class=\"tooltip\">\n <button id=\"download-unified-btn\" class=\"btn\" aria-label=\"T\u00e9l\u00e9charger le code unifi\u00e9\"><i class=\"fas fa-file-download\" aria-hidden=\"true\"><\/i> T\u00e9l\u00e9charger code Unifi\u00e9<\/button>\n <span class=\"tooltiptext\">T\u00e9l\u00e9charger le code unifi\u00e9<\/span>\n <\/div>\n <div class=\"tooltip\">\n <button id=\"download-php-btn\" class=\"btn\" aria-label=\"T\u00e9l\u00e9charger le code pour WordPress\"><i class=\"fas fa-file-code\" aria-hidden=\"true\"><\/i> T\u00e9l\u00e9charger en PHP<\/button>\n <span class=\"tooltiptext\">T\u00e9l\u00e9charger le code pour WordPress<\/span>\n <\/div>\n <\/div>\n <\/section>\n <section class=\"preview-section\">\n <div class=\"section-header\">\n <span>Pr\u00e9visualisation<\/span>\n <div class=\"tooltip\">\n <button id=\"back-btn\" class=\"btn\" aria-label=\"Retour \u00e0 la page pr\u00e9c\u00e9dente\"><i class=\"fas fa-arrow-left\" aria-hidden=\"true\"><\/i> Retour<\/button>\n <span class=\"tooltiptext\">Retour \u00e0 la page pr\u00e9c\u00e9dente<\/span>\n <\/div>\n <\/div>\n \n <div class=\"preview-controls\">\n <select id=\"preview-format\" class=\"preview-select\" aria-label=\"Format de pr\u00e9visualisation\">\n <option value=\"desktop\"><i class=\"fas fa-desktop\" aria-hidden=\"true\"><\/i> PC<\/option>\n <option value=\"tablet\"><i class=\"fas fa-tablet-alt\" aria-hidden=\"true\"><\/i> Tablette<\/option>\n <option value=\"mobile\"><i class=\"fas fa-mobile-alt\" aria-hidden=\"true\"><\/i> Mobile<\/option>\n <\/select>\n <\/div>\n \n <iframe id=\"preview\" title=\"Pr\u00e9visualisation du code extrait\"><\/iframe>\n <\/section>\n <\/main>\n \n <section class=\"feature-section\">\n <h2>Comment \u00e7a marche ?<\/h2>\n <div class=\"feature-grid\">\n <div class=\"feature-card\">\n <div class=\"feature-icon\"><i class=\"fas fa-code\" aria-hidden=\"true\"><\/i><\/div>\n <h3 class=\"feature-title\">Extraction de Code Intelligente<\/h3>\n <p class=\"feature-description\">Pacific Web Extractor utilise une technologie d'extraction de code avanc\u00e9e pour analyser et capturer le code source de n'importe quel site web. Notre algorithme intelligent identifie et s\u00e9pare automatiquement le HTML, le CSS et le JavaScript, vous offrant une vue claire et structur\u00e9e du code. Cette approche simplifi\u00e9e vous permet de comprendre rapidement l'architecture du site, d'identifier les meilleures pratiques et d'optimiser votre propre code. Que vous soyez un d\u00e9veloppeur exp\u00e9riment\u00e9 ou un d\u00e9butant curieux, notre outil vous aide \u00e0 d\u00e9cortiquer efficacement le code web pour am\u00e9liorer vos comp\u00e9tences et vos projets.<\/p>\n <\/div>\n <div class=\"feature-card\">\n <div class=\"feature-icon\"><i class=\"fas fa-mobile-alt\" aria-hidden=\"true\"><\/i><\/div>\n <h3 class=\"feature-title\">Pr\u00e9visualisation Responsive<\/h3>\n <p class=\"feature-description\">Notre fonction de pr\u00e9visualisation responsive vous permet de visualiser instantan\u00e9ment le rendu du code extrait sur diff\u00e9rents appareils. Basculez facilement entre les vues desktop, tablette et mobile pour \u00e9valuer la r\u00e9activit\u00e9 du design. Cette fonctionnalit\u00e9 est essentielle pour comprendre comment les sites web s'adaptent \u00e0 diff\u00e9rentes tailles d'\u00e9cran, vous aidant ainsi \u00e0 cr\u00e9er des exp\u00e9riences utilisateur optimales sur tous les appareils. Analysez les points de rupture, les ajustements de mise en page et les techniques de responsive design utilis\u00e9es, afin d'am\u00e9liorer vos propres cr\u00e9ations web et d'assurer une compatibilit\u00e9 multiplateforme parfaite.<\/p>\n <\/div>\n <div class=\"feature-card\">\n <div class=\"feature-icon\"><i class=\"fas fa-file-code\" aria-hidden=\"true\"><\/i><\/div>\n <h3 class=\"feature-title\">Export Multiformat<\/h3>\n <p class=\"feature-description\">Pacific Web Extractor offre des options d'export flexibles pour r\u00e9pondre \u00e0 tous vos besoins de d\u00e9veloppement. T\u00e9l\u00e9chargez le code unifi\u00e9 en HTML pour une vue d'ensemble compl\u00e8te, ou optez pour des fichiers s\u00e9par\u00e9s HTML, CSS et JavaScript pour une int\u00e9gration facile dans vos projets. Notre fonctionnalit\u00e9 d'export PHP pour WordPress vous permet de transformer rapidement le code extrait en un template personnalis\u00e9, pr\u00eat \u00e0 \u00eatre utilis\u00e9 dans votre th\u00e8me WordPress. Ces options d'export polyvalentes vous font gagner un temps pr\u00e9cieux, que vous travailliez sur un site statique, une application web dynamique ou un projet WordPress, en vous permettant d'adapter facilement le code extrait \u00e0 votre flux de travail sp\u00e9cifique.<\/p>\n <\/div>\n <\/div>\n <\/section>\n <\/div>\n\n <button id=\"theme-toggle\" aria-label=\"Changer le th\u00e8me\">\ud83c\udf34<\/button>\n\n \n <div class=\"loading-overlay\">\n <div class=\"loading-spinner\"><\/div>\n <\/div>\n\n <script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/ace\/1.4.12\/ace.js\"><\/script>\n <script>\n const unifiedEditor = ace.edit(\"unified-editor\");\n unifiedEditor.setTheme(\"ace\/theme\/tomorrow\");\n unifiedEditor.session.setMode(\"ace\/mode\/html\");\n unifiedEditor.setValue(`<!DOCTYPE html>\n<html lang=\"fr\">\n<head>\n <meta charset=\"UTF-8\">\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n <title>Ma Page<\/title>\n <style>\n body {\n font-family: 'Roboto', sans-serif;\n display: flex;\n justify-content: center;\n align-items: center;\n min-height: 100vh;\n margin: 0;\n background-color: #f5f7fa;\n }\n .container {\n text-align: center;\n padding: 2rem;\n background-color: white;\n border-radius: 8px;\n box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);\n }\n h1 {\n color: #3498db;\n }\n p {\n color: #2c3e50;\n }\n <\/style>\n<\/head>\n<body>\n <div class=\"container\">\n <h1>Bienvenue sur Pacific Web Extractor<\/h1>\n <p>Ceci est un exemple de code extrait et pr\u00e9visualis\u00e9 avec style.<\/p>\n <\/div>\n <script>\n console.log(\"Hello, Pacific Web Extractor!\");\n <\\\/script>\n<\/body>\n<\/html>`);\n\n const extractBtn = document.getElementById('extract-btn');\n const loadBtn = document.getElementById('load-btn');\n const resetBtn = document.getElementById('reset-btn');\n const preview = document.getElementById('preview');\n const urlInput = document.getElementById('url-input');\n const toggleCodeBtn = document.getElementById('toggle-code-btn');\n const downloadUnifiedBtn = document.getElementById('download-unified-btn');\n const downloadUnifiedBtnHero = document.getElementById('download-unified-btn-hero');\n const downloadPhpBtn = document.getElementById('download-php-btn');\n const previewFormat = document.getElementById('preview-format');\n const themeToggle = document.getElementById('theme-toggle');\n const backBtn = document.getElementById('back-btn');\n const loadingOverlay = document.querySelector('.loading-overlay');\n\n let baseUrl = '';\n let siteContent = {};\n let history = [];\n let isCodeSeparated = false;\n\n function showLoading() {\n loadingOverlay.classList.add('active');\n }\n\n function hideLoading() {\n loadingOverlay.classList.remove('active');\n }\n\n extractBtn.addEventListener('click', () => {\n showLoading();\n setTimeout(() => {\n const code = unifiedEditor.getValue();\n const blob = new Blob([code], { type: 'text\/html' });\n const url = URL.createObjectURL(blob);\n preview.src = url;\n history.push(url);\n document.querySelector('main').style.display = 'flex';\n\n \/\/ Mise \u00e0 jour du code de la page navigu\u00e9e dans l'iframe\n const currentUrl = preview.src;\n siteContent[currentUrl] = code;\n hideLoading();\n }, 1000); \/\/ Simule un d\u00e9lai d'extraction de 1 seconde\n });\n\n function normalizeUrl(url) {\n if (!url.startsWith('http:\/\/') && !url.startsWith('https:\/\/')) {\n url = 'https:\/\/' + url;\n }\n try {\n const parsedUrl = new URL(url);\n return parsedUrl.toString();\n } catch (error) {\n console.error('URL invalide:', error);\n return null;\n }\n }\n\n loadBtn.addEventListener('click', async () => {\n let url = urlInput.value.trim();\n const normalizedUrl = normalizeUrl(url);\n if (normalizedUrl) {\n const forbiddenDomain = 'pacific-webtools.com';\n const parsedUrl = new URL(normalizedUrl);\n if (parsedUrl.hostname === forbiddenDomain) {\n alert(\"L'extraction du code \u00e0 partir de ce domaine est interdite.\");\n return;\n }\n\n showLoading();\n try {\n await loadSinglePage(normalizedUrl);\n history.push(normalizedUrl);\n document.querySelector('main').style.display = 'flex';\n } catch (error) {\n console.error('Erreur:', error);\n alert(\"Une erreur s'est produite lors du chargement de l'URL. Veuillez r\u00e9essayer.\");\n } finally {\n hideLoading();\n }\n } else {\n alert(\"Veuillez entrer une URL valide.\");\n }\n });\n\n resetBtn.addEventListener('click', () => {\n urlInput.value = '';\n unifiedEditor.setValue('');\n preview.src = 'about:blank';\n baseUrl = '';\n siteContent = {};\n history = [];\n alert(\"Les donn\u00e9es du site pr\u00e9c\u00e9demment extrait ont \u00e9t\u00e9 r\u00e9initialis\u00e9es.\");\n document.querySelector('main').style.display = 'none';\n });\n\n async function loadSinglePage(url) {\n showLoading();\n const response = await fetch(`https:\/\/api.allorigins.win\/raw?url=${encodeURIComponent(url)}`);\n if (response.ok) {\n const html = await response.text();\n unifiedEditor.setValue(html);\n unifiedEditor.clearSelection();\n preview.src = url;\n siteContent[url] = html; \/\/ Ajout du contenu \u00e0 siteContent\n } else {\n alert(\"Erreur lors du chargement de l'URL. Veuillez v\u00e9rifier l'URL et r\u00e9essayer.\");\n }\n hideLoading();\n }\n\n preview.addEventListener('load', () => {\n const previewDocument = preview.contentDocument;\n const previewWindow = preview.contentWindow;\n\n previewDocument.body.addEventListener('click', async (event) => {\n if (event.target.tagName === 'A') {\n event.preventDefault();\n const href = new URL(event.target.href, preview.src).href;\n if (href.startsWith(baseUrl)) {\n showLoading();\n preview.src = href;\n history.push(href);\n if (siteContent[href]) {\n unifiedEditor.setValue(siteContent[href]);\n unifiedEditor.clearSelection();\n hideLoading();\n } else {\n try {\n await loadSinglePage(href);\n \/\/ Mise \u00e0 jour dynamique du code dans l'\u00e9diteur\n const updatedHtml = await fetch(`https:\/\/api.allorigins.win\/raw?url=${encodeURIComponent(href)}`).then(res => res.text());\n unifiedEditor.setValue(updatedHtml);\n unifiedEditor.clearSelection();\n siteContent[href] = updatedHtml;\n } catch (error) {\n console.error('Erreur lors du chargement de la page:', error);\n alert(\"Erreur lors du chargement de la page. Veuillez r\u00e9essayer.\");\n } finally {\n hideLoading();\n }\n }\n }\n }\n });\n });\n\n toggleCodeBtn.addEventListener('click', () => {\n isCodeSeparated = !isCodeSeparated;\n if (isCodeSeparated) {\n separateCode();\n toggleCodeBtn.innerHTML = '<i class=\"fas fa-code\" aria-hidden=\"true\"><\/i> Unifier le code';\n toggleCodeBtn.setAttribute('aria-label', 'Unifier le code');\n } else {\n unifyCode();\n toggleCodeBtn.innerHTML = '<i class=\"fas fa-layer-group\" aria-hidden=\"true\"><\/i> S\u00e9parer les codes';\n toggleCodeBtn.setAttribute('aria-label', 'S\u00e9parer les codes');\n }\n updatePreviewHeight();\n });\n\n function separateCode() {\n const code = unifiedEditor.getValue();\n const { html, css, js } = extractCodeParts(code);\n\n const editorContainer = document.querySelector('.editor-container');\n editorContainer.innerHTML = '';\n\n createEditorWithTitle(editorContainer, 'HTML', 'html', html, 'fab fa-html5');\n createEditorWithTitle(editorContainer, 'CSS', 'css', css, 'fab fa-css3-alt');\n createEditorWithTitle(editorContainer, 'JavaScript', 'javascript', js, 'fab fa-js-square');\n\n const downloadButtons = document.createElement('div');\n downloadButtons.className = 'button-container';\n downloadButtons.innerHTML = `\n <button id=\"download-html-btn\" class=\"btn\" aria-label=\"T\u00e9l\u00e9charger HTML\"><i class=\"fas fa-file-code\" aria-hidden=\"true\"><\/i> T\u00e9l\u00e9charger HTML<\/button>\n <button id=\"download-css-btn\" class=\"btn\" aria-label=\"T\u00e9l\u00e9charger CSS\"><i class=\"fas fa-file-code\" aria-hidden=\"true\"><\/i> T\u00e9 l\u00e9charger CSS<\/button>\n <button id=\"download-js-btn\" class=\"btn\" aria-label=\"T\u00e9l\u00e9charger JavaScript\"><i class=\"fas fa-file-code\" aria-hidden=\"true\"><\/i> T\u00e9l\u00e9charger JS<\/button>\n `;\n editorContainer.appendChild(downloadButtons);\n\n document.getElementById('download-html-btn').addEventListener('click', () => downloadFile('html', editors.html.getValue()));\n document.getElementById('download-css-btn').addEventListener('click', () => downloadFile('css', editors.css.getValue()));\n document.getElementById('download-js-btn').addEventListener('click', () => downloadFile('js', editors.javascript.getValue()));\n }\n\n function unifyCode() {\n const html = editors.html.getValue();\n const css = editors.css.getValue();\n const js = editors.javascript.getValue();\n\n const unifiedCode = `\n<!DOCTYPE html>\n<html lang=\"fr\">\n<head>\n <meta charset=\"UTF-8\">\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n <title>Page unifi\u00e9e<\/title>\n <style>${css}<\/style>\n<\/head>\n<body>\n${html}\n<script>${js}<\\\/script>\n<\/body>\n<\/html>`;\n\n const editorContainer = document.querySelector('.editor-container');\n editorContainer.innerHTML = '<div id=\"unified-editor\" class=\"editor\"><\/div>';\n unifiedEditor = ace.edit(\"unified-editor\");\n unifiedEditor.setTheme(\"ace\/theme\/tomorrow\");\n unifiedEditor.session.setMode(\"ace\/mode\/html\");\n unifiedEditor.setValue(unifiedCode);\n unifiedEditor.clearSelection();\n }\n\n function createEditorWithTitle(container, title, mode, content, iconClass) {\n const editorWrapper = document.createElement('div');\n editorWrapper.className = 'editor-wrapper';\n \n const editorTitle = document.createElement('div');\n editorTitle.className = 'editor-title';\n editorTitle.innerHTML = `<i class=\"${iconClass}\" aria-hidden=\"true\"><\/i> ${title}`;\n \n const editorElement = document.createElement('div');\n editorElement.className = 'editor';\n editorElement.id = `${mode.toLowerCase()}-editor`;\n \n editorWrapper.appendChild(editorTitle);\n editorWrapper.appendChild(editorElement);\n container.appendChild(editorWrapper);\n \n const editor = ace.edit(editorElement);\n editor.setTheme(\"ace\/theme\/tomorrow\");\n editor.session.setMode(`ace\/mode\/${mode.toLowerCase()}`);\n editor.setValue(content);\n editor.clearSelection();\n editors[mode.toLowerCase()] = editor;\n }\n\n let editors = {};\n\n function extractCodeParts(code) {\n const parser = new DOMParser();\n const doc = parser.parseFromString(code, 'text\/html');\n \n const html = doc.body.innerHTML.trim();\n \n let css = '';\n const styleElements = doc.getElementsByTagName('style');\n for (let style of styleElements) {\n css += style.textContent + '\\n';\n }\n \n let js = '';\n const scriptElements = doc.getElementsByTagName('script');\n for (let script of scriptElements) {\n if (!script.src) {\n js += script.textContent + '\\n';\n }\n }\n \n return { html, css, js };\n }\n\n function downloadFile(type, content) {\n const blob = new Blob([content], { type: 'text\/plain' });\n const url = URL.createObjectURL(blob);\n const a = document.createElement('a');\n a.href = url;\n a.download = `extracted.${type}`;\n document.body.appendChild(a);\n a.click();\n document.body.removeChild(a);\n URL.revokeObjectURL(url);\n }\n\n downloadUnifiedBtn.addEventListener('click', () => {\n const code = unifiedEditor.getValue();\n downloadFile('html', code);\n });\n\n downloadUnifiedBtnHero.addEventListener('click', async () => {\n let url = urlInput.value.trim();\n const normalizedUrl = normalizeUrl(url);\n if (normalizedUrl) {\n showLoading();\n try {\n const response = await fetch(`https:\/\/api.allorigins.win\/raw?url=${encodeURIComponent(normalizedUrl)}`);\n if (response.ok) {\n const html = await response.text();\n downloadFile('html', html);\n } else {\n alert(\"Erreur lors du chargement de l'URL. Veuillez v\u00e9rifier l'URL et r\u00e9essayer.\");\n }\n } catch (error) {\n console.error('Erreur:', error);\n alert(\"Une erreur s'est produite lors du t\u00e9l\u00e9chargement. Veuillez r\u00e9essayer.\");\n } finally {\n hideLoading();\n }\n } else {\n alert(\"Veuillez entrer une URL valide.\");\n }\n });\n\n downloadPhpBtn.addEventListener('click', () => {\n const code = unifiedEditor.getValue();\n const phpCode = `<?php\n\/*\nTemplate Name: Pacific Web Extractor Template\n*\/\n\nget_header();\n?>\n\n${code}\n\n<?php\nget_footer();\n?>`;\n downloadFile('php', phpCode);\n });\n\n previewFormat.addEventListener('change', () => {\n const format = previewFormat.value;\n switch (format) {\n case 'desktop':\n preview.style.width = '100%';\n preview.style.height = '100%';\n break;\n case 'tablet':\n preview.style.width = '768px';\n preview.style.height = '1024px';\n break;\n case 'mobile':\n preview.style.width = '375px';\n preview.style.height = '667px';\n break;\n }\n updatePreviewHeight();\n });\n\n function updatePreviewHeight() {\n const previewContainer = document.querySelector('.preview-section');\n const previewControls = document.querySelector('.preview-controls');\n const availableHeight = previewContainer.clientHeight - previewControls.clientHeight;\n preview.style.height = `${availableHeight}px`;\n }\n\n window.addEventListener('resize', updatePreviewHeight);\n\n themeToggle.addEventListener('click', () => {\n document.body.classList.toggle('dark-theme');\n if (document.body.classList.contains('dark-theme')) {\n themeToggle.textContent = '\ud83c\udf1e';\n themeToggle.setAttribute('aria-label', 'Passer au th\u00e8me clair');\n unifiedEditor.setTheme(\"ace\/theme\/monokai\");\n for (let editor in editors) {\n editors[editor].setTheme(\"ace\/theme\/monokai\");\n }\n } else {\n themeToggle.textContent = '\ud83c\udf34';\n themeToggle.setAttribute('aria-label', 'Passer au th\u00e8me sombre');\n unifiedEditor.setTheme(\"ace\/theme\/tomorrow\");\n for (let editor in editors) {\n editors[editor].setTheme(\"ace\/theme\/tomorrow\");\n }\n }\n });\n\n backBtn.addEventListener('click', () => {\n if (history.length > 1) {\n history.pop(); \/\/ Remove current page\n const previousPage = history[history.length - 1];\n preview.src = previousPage;\n if (siteContent[previousPage]) {\n unifiedEditor.setValue(siteContent[previousPage]);\n unifiedEditor.clearSelection();\n }\n }\n });\n\n function initMatrix() {\n const canvas = document.getElementById('matrix-canvas');\n const ctx = canvas.getContext('2d');\n\n canvas.width = window.innerWidth;\n canvas.height = window.innerHeight;\n\n const katakana = '\u30a2\u30a1\u30ab\u30b5\u30bf\u30ca\u30cf\u30de\u30e4\u30e3\u30e9\u30ef\u30ac\u30b6\u30c0\u30d0\u30d1\u30a4\u30a3\u30ad\u30b7\u30c1\u30cb\u30d2\u30df\u30ea\u30f0\u30ae\u30b8\u30c2\u30d3\u30d4\u30a6\u30a5\u30af\u30b9\u30c4\u30cc\u30d5\u30e0\u30e6\u30e5\u30eb\u30b0\u30ba\u30d6\u30c5\u30d7\u30a8\u30a7\u30b1\u30bb\u30c6\u30cd\u30d8\u30e1\u30ec\u30f1\u30b2\u30bc\u30c7\u30d9\u30da\u30aa\u30a9\u30b3\u30bd\u30c8\u30ce\u30db\u30e2\u30e8\u30e7\u30ed\u30f2\u30b4\u30be\u30c9\u30dc\u30dd\u30f4\u30c3\u30f3';\n const latin = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';\n const nums = '0123456789';\n const alphabet = katakana + latin + nums;\n\n const fontSize = 16;\n const columns = canvas.width \/ fontSize;\n\n const rainDrops = [];\n\n for (let x = 0; x < columns; x++) {\n rainDrops[x] = 1;\n }\n\n const draw = () => {\n ctx.fillStyle = 'rgba(0, 0, 0, 0.05)';\n ctx.fillRect(0, 0, canvas.width, canvas.height);\n\n ctx.fillStyle = '#0F0';\n ctx.font = fontSize + 'px monospace';\n\n for (let i = 0; i < rainDrops.length; i++) {\n const text = alphabet.charAt(Math.floor(Math.random() * alphabet.length));\n ctx.fillText(text, i * fontSize, rainDrops[i] * fontSize);\n\n if (rainDrops[i] * fontSize > canvas.height && Math.random() > 0.975) {\n rainDrops[i] = 0;\n }\n rainDrops[i]++;\n }\n };\n\n setInterval(draw, 30);\n }\n\n window.addEventListener('load', initMatrix);\n window.addEventListener('resize', () => {\n const canvas = document.getElementById('matrix-canvas');\n canvas.width = window.innerWidth;\n canvas.height = window.innerHeight;\n });\n <\/script>\n<\/body>\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Pacific Web Extractor – Version am\u00e9lior\u00e9e et responsive Pacific Web Extractor: Votre Extracteur de Code Professionnel D\u00e9couvrez Pacific Web Extractor, l’outil ultime pour les d\u00e9veloppeurs et les passionn\u00e9s du web. Notre extracteur de code avanc\u00e9 vous permet d’analyser, de modifier et d’optimiser le code source de n’importe quel site web en quelques clics. Entrez l’URL […]<\/p>\n","protected":false},"author":1,"featured_media":799,"comment_status":"open","ping_status":"open","sticky":false,"template":"elementor_header_footer","format":"standard","meta":{"footnotes":""},"categories":[4],"tags":[],"class_list":["post-798","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-web-ressources"],"yoast_head":"\n<title>Extraire le code HTML CSS Js d'une page web - Web Extractor<\/title>\n<meta name=\"description\" content=\"Extraire le HTML, CSS, JS d'une page web en 3 clics ! Inspirez-vous des plus beaux sites internet gr\u00e2ce \u00e0 notre outil pour d\u00e9veloppeur Web.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/pacific-webtools.com\/web-extractor\/extraire-le-code-html-css-js-dune-page-web\/\" \/>\n<meta property=\"og:locale\" content=\"fr_FR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Extraire le code HTML CSS Js d'une page web - Web Extractor\" \/>\n<meta property=\"og:description\" content=\"Extraire le HTML, CSS, JS d'une page web en 3 clics ! Inspirez-vous des plus beaux sites internet gr\u00e2ce \u00e0 notre outil pour d\u00e9veloppeur Web.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/pacific-webtools.com\/web-extractor\/extraire-le-code-html-css-js-dune-page-web\/\" \/>\n<meta property=\"og:site_name\" content=\"Web Extractor\" \/>\n<meta property=\"article:published_time\" content=\"2024-09-03T10:51:01+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-09-03T10:51:49+00:00\" \/>\n<meta name=\"author\" content=\"admin\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"\u00c9crit par\" \/>\n\t<meta name=\"twitter:data1\" content=\"admin\" \/>\n\t<meta name=\"twitter:label2\" content=\"Dur\u00e9e de lecture estim\u00e9e\" \/>\n\t<meta name=\"twitter:data2\" content=\"3 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/pacific-webtools.com\/web-extractor\/extraire-le-code-html-css-js-dune-page-web\/\",\"url\":\"https:\/\/pacific-webtools.com\/web-extractor\/extraire-le-code-html-css-js-dune-page-web\/\",\"name\":\"Extraire le code HTML CSS Js d'une page web - Web Extractor\",\"isPartOf\":{\"@id\":\"https:\/\/pacific-webtools.com\/web-extractor\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/pacific-webtools.com\/web-extractor\/extraire-le-code-html-css-js-dune-page-web\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/pacific-webtools.com\/web-extractor\/extraire-le-code-html-css-js-dune-page-web\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/pacific-webtools.com\/web-extractor\/wp-content\/uploads\/2024\/09\/html-css-js-scraping.avif\",\"datePublished\":\"2024-09-03T10:51:01+00:00\",\"dateModified\":\"2024-09-03T10:51:49+00:00\",\"author\":{\"@id\":\"https:\/\/pacific-webtools.com\/web-extractor\/#\/schema\/person\/0f95670ed0b3b265a488dae146fdda48\"},\"description\":\"Extraire le HTML, CSS, JS d'une page web en 3 clics ! Inspirez-vous des plus beaux sites internet gr\u00e2ce \u00e0 notre outil pour d\u00e9veloppeur Web.\",\"breadcrumb\":{\"@id\":\"https:\/\/pacific-webtools.com\/web-extractor\/extraire-le-code-html-css-js-dune-page-web\/#breadcrumb\"},\"inLanguage\":\"fr-FR\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/pacific-webtools.com\/web-extractor\/extraire-le-code-html-css-js-dune-page-web\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"fr-FR\",\"@id\":\"https:\/\/pacific-webtools.com\/web-extractor\/extraire-le-code-html-css-js-dune-page-web\/#primaryimage\",\"url\":\"https:\/\/pacific-webtools.com\/web-extractor\/wp-content\/uploads\/2024\/09\/html-css-js-scraping.avif\",\"contentUrl\":\"https:\/\/pacific-webtools.com\/web-extractor\/wp-content\/uploads\/2024\/09\/html-css-js-scraping.avif\",\"width\":1380,\"height\":921,\"caption\":\"Exemple de code extrait d'une page web unique.\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/pacific-webtools.com\/web-extractor\/extraire-le-code-html-css-js-dune-page-web\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/pacific-webtools.com\/web-extractor\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Extraire le code HTML CSS Js d’une page web\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/pacific-webtools.com\/web-extractor\/#website\",\"url\":\"https:\/\/pacific-webtools.com\/web-extractor\/\",\"name\":\"Web Extractor\",\"description\":\"Extracteur de Code\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/pacific-webtools.com\/web-extractor\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"fr-FR\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/pacific-webtools.com\/web-extractor\/#\/schema\/person\/0f95670ed0b3b265a488dae146fdda48\",\"name\":\"admin\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"fr-FR\",\"@id\":\"https:\/\/pacific-webtools.com\/web-extractor\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/94a5a2d7ac834dce40e1e25743dcb576?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/94a5a2d7ac834dce40e1e25743dcb576?s=96&d=mm&r=g\",\"caption\":\"admin\"},\"sameAs\":[\"https:\/\/pacific-webtools.com\/web-extractor\"],\"url\":\"https:\/\/pacific-webtools.com\/web-extractor\/author\/admin\/\"}]}<\/script>\n","yoast_head_json":{"title":"Extraire le code HTML CSS Js d'une page web - Web Extractor","description":"Extraire le HTML, CSS, JS d'une page web en 3 clics ! Inspirez-vous des plus beaux sites internet gr\u00e2ce \u00e0 notre outil pour d\u00e9veloppeur Web.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/pacific-webtools.com\/web-extractor\/extraire-le-code-html-css-js-dune-page-web\/","og_locale":"fr_FR","og_type":"article","og_title":"Extraire le code HTML CSS Js d'une page web - Web Extractor","og_description":"Extraire le HTML, CSS, JS d'une page web en 3 clics ! Inspirez-vous des plus beaux sites internet gr\u00e2ce \u00e0 notre outil pour d\u00e9veloppeur Web.","og_url":"https:\/\/pacific-webtools.com\/web-extractor\/extraire-le-code-html-css-js-dune-page-web\/","og_site_name":"Web Extractor","article_published_time":"2024-09-03T10:51:01+00:00","article_modified_time":"2024-09-03T10:51:49+00:00","author":"admin","twitter_card":"summary_large_image","twitter_misc":{"\u00c9crit par":"admin","Dur\u00e9e de lecture estim\u00e9e":"3 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/pacific-webtools.com\/web-extractor\/extraire-le-code-html-css-js-dune-page-web\/","url":"https:\/\/pacific-webtools.com\/web-extractor\/extraire-le-code-html-css-js-dune-page-web\/","name":"Extraire le code HTML CSS Js d'une page web - Web Extractor","isPartOf":{"@id":"https:\/\/pacific-webtools.com\/web-extractor\/#website"},"primaryImageOfPage":{"@id":"https:\/\/pacific-webtools.com\/web-extractor\/extraire-le-code-html-css-js-dune-page-web\/#primaryimage"},"image":{"@id":"https:\/\/pacific-webtools.com\/web-extractor\/extraire-le-code-html-css-js-dune-page-web\/#primaryimage"},"thumbnailUrl":"https:\/\/pacific-webtools.com\/web-extractor\/wp-content\/uploads\/2024\/09\/html-css-js-scraping.avif","datePublished":"2024-09-03T10:51:01+00:00","dateModified":"2024-09-03T10:51:49+00:00","author":{"@id":"https:\/\/pacific-webtools.com\/web-extractor\/#\/schema\/person\/0f95670ed0b3b265a488dae146fdda48"},"description":"Extraire le HTML, CSS, JS d'une page web en 3 clics ! Inspirez-vous des plus beaux sites internet gr\u00e2ce \u00e0 notre outil pour d\u00e9veloppeur Web.","breadcrumb":{"@id":"https:\/\/pacific-webtools.com\/web-extractor\/extraire-le-code-html-css-js-dune-page-web\/#breadcrumb"},"inLanguage":"fr-FR","potentialAction":[{"@type":"ReadAction","target":["https:\/\/pacific-webtools.com\/web-extractor\/extraire-le-code-html-css-js-dune-page-web\/"]}]},{"@type":"ImageObject","inLanguage":"fr-FR","@id":"https:\/\/pacific-webtools.com\/web-extractor\/extraire-le-code-html-css-js-dune-page-web\/#primaryimage","url":"https:\/\/pacific-webtools.com\/web-extractor\/wp-content\/uploads\/2024\/09\/html-css-js-scraping.avif","contentUrl":"https:\/\/pacific-webtools.com\/web-extractor\/wp-content\/uploads\/2024\/09\/html-css-js-scraping.avif","width":1380,"height":921,"caption":"Exemple de code extrait d'une page web unique."},{"@type":"BreadcrumbList","@id":"https:\/\/pacific-webtools.com\/web-extractor\/extraire-le-code-html-css-js-dune-page-web\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/pacific-webtools.com\/web-extractor\/"},{"@type":"ListItem","position":2,"name":"Extraire le code HTML CSS Js d’une page web"}]},{"@type":"WebSite","@id":"https:\/\/pacific-webtools.com\/web-extractor\/#website","url":"https:\/\/pacific-webtools.com\/web-extractor\/","name":"Web Extractor","description":"Extracteur de Code","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/pacific-webtools.com\/web-extractor\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"fr-FR"},{"@type":"Person","@id":"https:\/\/pacific-webtools.com\/web-extractor\/#\/schema\/person\/0f95670ed0b3b265a488dae146fdda48","name":"admin","image":{"@type":"ImageObject","inLanguage":"fr-FR","@id":"https:\/\/pacific-webtools.com\/web-extractor\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/94a5a2d7ac834dce40e1e25743dcb576?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/94a5a2d7ac834dce40e1e25743dcb576?s=96&d=mm&r=g","caption":"admin"},"sameAs":["https:\/\/pacific-webtools.com\/web-extractor"],"url":"https:\/\/pacific-webtools.com\/web-extractor\/author\/admin\/"}]}},"_links":{"self":[{"href":"https:\/\/pacific-webtools.com\/web-extractor\/wp-json\/wp\/v2\/posts\/798"}],"collection":[{"href":"https:\/\/pacific-webtools.com\/web-extractor\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/pacific-webtools.com\/web-extractor\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/pacific-webtools.com\/web-extractor\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/pacific-webtools.com\/web-extractor\/wp-json\/wp\/v2\/comments?post=798"}],"version-history":[{"count":5,"href":"https:\/\/pacific-webtools.com\/web-extractor\/wp-json\/wp\/v2\/posts\/798\/revisions"}],"predecessor-version":[{"id":804,"href":"https:\/\/pacific-webtools.com\/web-extractor\/wp-json\/wp\/v2\/posts\/798\/revisions\/804"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/pacific-webtools.com\/web-extractor\/wp-json\/wp\/v2\/media\/799"}],"wp:attachment":[{"href":"https:\/\/pacific-webtools.com\/web-extractor\/wp-json\/wp\/v2\/media?parent=798"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/pacific-webtools.com\/web-extractor\/wp-json\/wp\/v2\/categories?post=798"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/pacific-webtools.com\/web-extractor\/wp-json\/wp\/v2\/tags?post=798"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}