{"id":8763,"date":"2026-08-25T10:40:40","date_gmt":"2026-08-25T10:40:40","guid":{"rendered":"https:\/\/vilaan.com\/?page_id=8763"},"modified":"2026-08-30T08:00:18","modified_gmt":"2026-08-30T08:00:18","slug":"webstractor","status":"publish","type":"page","link":"https:\/\/vilaan.com\/en\/webstractor\/","title":{"rendered":"Webstractor"},"content":{"rendered":"\t\t
\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\r\n\r\n\r\n\r\n\r\nWebstractor - Help & Guide<\/title>\r\n<style>\r\n :root {\r\n --text: #f4f4f5;\r\n --text-dim: #a8a29e;\r\n --accent: #ff5500;\r\n --card-bg: rgba(255,255,255,0.04);\r\n --card-border: rgba(255,255,255,0.08);\r\n --code-bg: rgba(0,0,0,0.4);\r\n --kbd-bg: rgba(255,255,255,0.1);\r\n --kbd-border: rgba(255,255,255,0.15);\r\n --surface: #121212;\r\n --nav-bg: #171717;\r\n }\r\n * { box-sizing: border-box; }\r\n body {\r\n margin: 0;\r\n font-family: system-ui, -apple-system, sans-serif;\r\n background: var(--surface);\r\n color: var(--text);\r\n -webkit-font-smoothing: antialiased;\r\n }\r\n a { color: var(--accent); text-decoration: none; }\r\n a:hover { text-decoration: underline; }\r\n .wg-shell {\r\n background: var(--surface);\r\n min-height: 100vh;\r\n display: flex;\r\n flex-direction: column;\r\n }\r\n \/* Top bar *\/\r\n .wg-topbar {\r\n display: flex;\r\n justify-content: space-between;\r\n align-items: center;\r\n padding: 24px 40px;\r\n border-bottom: 1px solid var(--card-border);\r\n flex-shrink: 0;\r\n gap: 16px;\r\n }\r\n .wg-topbar-left { display: flex; align-items: center; gap: 16px; }\r\n .wg-title h1 { margin: 0; font-size: 28px; font-weight: 800; letter-spacing: -0.03em; }\r\n .wg-title div { color: var(--text-dim); font-size: 13px; margin-top: 2px; }\r\n \/* Hamburger *\/\r\n .wg-burger {\r\n display: none;\r\n align-items: center;\r\n justify-content: center;\r\n width: 40px; height: 40px;\r\n background: var(--card-bg);\r\n border: 1px solid var(--card-border);\r\n border-radius: 10px;\r\n cursor: pointer;\r\n color: var(--text-dim);\r\n flex-shrink: 0;\r\n }\r\n \/* Body *\/\r\n .wg-body { display: flex; flex: 1; overflow: hidden; }\r\n \/* Sidebar nav *\/\r\n .wg-nav {\r\n width: 220px;\r\n flex-shrink: 0;\r\n padding: 20px 16px;\r\n border-right: 1px solid var(--card-border);\r\n overflow-y: auto;\r\n display: flex;\r\n flex-direction: column;\r\n gap: 4px;\r\n }\r\n .wg-nav button {\r\n display: flex;\r\n align-items: center;\r\n gap: 10px;\r\n padding: 10px 14px;\r\n border-radius: 10px;\r\n border: none;\r\n background: transparent;\r\n color: var(--text-dim);\r\n cursor: pointer;\r\n font-size: 14px;\r\n font-weight: 500;\r\n text-align: left;\r\n font-family: inherit;\r\n transition: all 0.15s;\r\n outline: none;\r\n }\r\n .wg-nav button:hover { background: var(--card-bg); color: var(--text); }\r\n .wg-nav button.active { background: rgba(255,85,0,0.12); color: var(--accent); font-weight: 700; }\r\n .wg-nav button svg { flex-shrink: 0; display: flex; }\r\n \/* Content *\/\r\n .wg-main { flex: 1; overflow-y: auto; padding: 32px 48px 60px; }\r\n .wg-content { max-width: 780px; }\r\n .wg-section { display: none; }\r\n .wg-section.active { display: block; animation: wgFade 0.2s ease; }\r\n @keyframes wgFade { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }\r\n \/* Typography *\/\r\n .wg-h2 { color: var(--text); font-size: 26px; font-weight: 800; margin: 0 0 20px; letter-spacing: -0.02em; }\r\n .wg-h3 { color: var(--accent); font-size: 17px; font-weight: 700; margin: 28px 0 12px; letter-spacing: -0.01em; }\r\n .wg-p { color: var(--text-dim); font-size: 14px; line-height: 1.7; margin: 0 0 14px; }\r\n \/* Card *\/\r\n .wg-card {\r\n background: var(--card-bg);\r\n border: 1px solid var(--card-border);\r\n border-radius: 12px;\r\n padding: 16px 20px;\r\n margin-bottom: 14px;\r\n }\r\n .wg-card.highlight { background: rgba(255,85,0,0.07); border-color: rgba(255,85,0,0.22); }\r\n .wg-card .wg-ft-title { font-weight: 700; font-size: 14px; color: var(--text); margin-bottom: 6px; }\r\n .wg-card .wg-ft-body { color: var(--text-dim); font-size: 13px; line-height: 1.65; }\r\n .wg-intro { color: var(--text); font-size: 15px; line-height: 1.9; font-weight: 500; }\r\n .wg-intro strong { font-weight: 700; }\r\n .wg-intro a { color: var(--accent); font-weight: 600; }\r\n .wg-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 20px; }\r\n .wg-grid .wg-card { margin-bottom: 0; }\r\n .wg-pills { display: flex; flex-wrap: wrap; }\r\n .wg-pill {\r\n display: inline-block;\r\n background: rgba(255,85,0,0.10);\r\n border: 1px solid rgba(255,85,0,0.22);\r\n border-radius: 6px;\r\n padding: 3px 10px;\r\n font-size: 12px;\r\n font-weight: 600;\r\n color: var(--accent);\r\n margin-right: 6px;\r\n margin-bottom: 6px;\r\n cursor: pointer;\r\n transition: all 0.15s;\r\n }\r\n .wg-pill:hover { background: rgba(255,85,0,0.20); }\r\n .wg-tag {\r\n display: inline-block;\r\n background: var(--card-bg);\r\n border: 1px solid var(--card-border);\r\n border-radius: 6px;\r\n padding: 3px 10px;\r\n font-size: 12px;\r\n font-weight: 600;\r\n color: var(--text);\r\n margin-right: 6px;\r\n margin-bottom: 6px;\r\n }\r\n .wg-code {\r\n background: var(--code-bg);\r\n padding: 2px 6px;\r\n border-radius: 4px;\r\n font-size: 13px;\r\n font-family: monospace;\r\n }\r\n .wg-kbd {\r\n background: var(--kbd-bg);\r\n border: 1px solid var(--kbd-border);\r\n border-radius: 5px;\r\n padding: 2px 7px;\r\n font-size: 12px;\r\n font-family: monospace;\r\n font-weight: 600;\r\n color: var(--text);\r\n box-shadow: 0 1px 0 rgba(0,0,0,0.4);\r\n }\r\n \/* Chrome Web Store badge *\/\r\n .wg-cws-wrap { display: flex; justify-content: flex-start; margin-top: 20px; }\r\n .wg-cws {\r\n display: inline-block;\r\n padding: 10px 14px;\r\n background: #ffffff;\r\n border: 1px solid var(--card-border);\r\n border-radius: 12px;\r\n transition: all 0.15s;\r\n text-decoration: none;\r\n line-height: 0;\r\n }\r\n .wg-cws:hover { border-color: var(--accent); transform: translateY(-1px); text-decoration: none; }\r\n .wg-cws svg {\r\n display: block;\r\n width: 220px;\r\n height: auto;\r\n aspect-ratio: 256.93 \/ 86.18;\r\n }\r\n\r\n \/* Responsive *\/\r\n @media (max-width: 900px) {\r\n .wg-burger { display: flex; }\r\n .wg-body { position: relative; }\r\n .wg-nav {\r\n position: absolute;\r\n top: 0; left: 0; bottom: 0;\r\n z-index: 20;\r\n background: var(--nav-bg);\r\n width: 240px;\r\n box-shadow: 4px 0 24px rgba(0,0,0,0.5);\r\n transform: translateX(-100%);\r\n transition: transform 0.25s ease;\r\n }\r\n .wg-nav.open { transform: translateX(0); }\r\n .wg-main { padding: 24px 24px 48px; }\r\n .wg-overlay {\r\n position: absolute;\r\n inset: 0;\r\n background: rgba(0,0,0,0.5);\r\n z-index: 15;\r\n display: none;\r\n }\r\n .wg-overlay.open { display: block; }\r\n }\r\n @media (max-width: 600px) {\r\n .wg-topbar { padding: 16px 20px; }\r\n .wg-title h1 { font-size: 22px; }\r\n .wg-title div { font-size: 12px; }\r\n .wg-main { padding: 20px 16px 40px; }\r\n .wg-grid { grid-template-columns: 1fr; }\r\n .wg-h2 { font-size: 22px; }\r\n }\r\n<\/style>\r\n<\/head>\r\n<body>\r\n<div class=\"wg-shell\">\r\n <div class=\"wg-topbar\">\r\n <div class=\"wg-topbar-left\">\r\n <button class=\"wg-burger\" id=\"wgBurger\" aria-label=\"Menu\">\r\n <svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><line x1=\"3\" y1=\"6\" x2=\"21\" y2=\"6\"\/><line x1=\"3\" y1=\"12\" x2=\"21\" y2=\"12\"\/><line x1=\"3\" y1=\"18\" x2=\"21\" y2=\"18\"\/><\/svg>\r\n <\/button>\r\n <div class=\"wg-title\">\r\n <h1>Help & Guide<\/h1>\r\n <div>Webstractor - All-in-one tools for designers & developers<\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"wg-body\">\r\n <div class=\"wg-overlay\" id=\"wgOverlay\"><\/div>\r\n <nav class=\"wg-nav\" id=\"wgNav\">\r\n <button data-section=\"welcome\"><svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><circle cx=\"12\" cy=\"12\" r=\"10\"\/><polyline points=\"12 16 16 12 12 8\"\/><line x1=\"8\" y1=\"12\" x2=\"16\" y2=\"12\"\/><\/svg>Welcome<\/button>\r\n <button data-section=\"inspector\"><svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><circle cx=\"11\" cy=\"11\" r=\"8\"\/><line x1=\"21\" y1=\"21\" x2=\"16.65\" y2=\"16.65\"\/><\/svg>Inspector<\/button>\r\n <button data-section=\"viewer\"><svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><rect x=\"2\" y=\"3\" width=\"20\" height=\"14\" rx=\"2\" ry=\"2\"\/><line x1=\"8\" y1=\"21\" x2=\"16\" y2=\"21\"\/><line x1=\"12\" y1=\"17\" x2=\"12\" y2=\"21\"\/><\/svg>Viewer<\/button>\r\n <button data-section=\"designer\"><svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><rect x=\"3\" y=\"3\" width=\"7\" height=\"7\"\/><rect x=\"14\" y=\"3\" width=\"7\" height=\"7\"\/><rect x=\"14\" y=\"14\" width=\"7\" height=\"7\"\/><rect x=\"3\" y=\"14\" width=\"7\" height=\"7\"\/><\/svg>Designer<\/button>\r\n <button data-section=\"extractor\"><svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><rect x=\"3\" y=\"3\" width=\"18\" height=\"18\" rx=\"2\" ry=\"2\"\/><circle cx=\"8.5\" cy=\"8.5\" r=\"1.5\"\/><polyline points=\"21 15 16 10 5 21\"\/><\/svg>Extractor<\/button>\r\n <button data-section=\"context-menu\"><svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><rect x=\"3\" y=\"3\" width=\"18\" height=\"18\" rx=\"2\"\/><line x1=\"9\" y1=\"9\" x2=\"15\" y2=\"9\"\/><line x1=\"9\" y1=\"13\" x2=\"15\" y2=\"13\"\/><line x1=\"9\" y1=\"17\" x2=\"13\" y2=\"17\"\/><\/svg>Context Menu<\/button>\r\n <button data-section=\"faq\"><svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><circle cx=\"12\" cy=\"12\" r=\"10\"\/><path d=\"M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3\"\/><line x1=\"12\" y1=\"17\" x2=\"12.01\" y2=\"17\"\/><\/svg>FAQ<\/button>\r\n <button data-section=\"privacy\"><svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z\"\/><\/svg>Privacy Policy<\/button>\r\n <button data-section=\"terms\"><svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z\"\/><polyline points=\"14 2 14 8 20 8\"\/><line x1=\"9\" y1=\"13\" x2=\"15\" y2=\"13\"\/><line x1=\"9\" y1=\"17\" x2=\"13\" y2=\"17\"\/><\/svg>Terms of Service<\/button>\r\n <\/nav>\r\n\r\n <main class=\"wg-main\">\r\n <div class=\"wg-content\">\r\n\r\n <!-- ===================== WELCOME ===================== -->\r\n <section class=\"wg-section\" id=\"welcome\">\r\n <h2 class=\"wg-h2\">Welcome to Webstractor<\/h2>\r\n <div class=\"wg-card highlight\">\r\n <div class=\"wg-intro\">\r\n <strong>Webstractor<\/strong> is the ultimate all-in-one browser toolkit built for designers and developers who demand precision, speed, and depth.\r\n <\/div>\r\n <div class=\"wg-intro\" style=\"margin-top:12px\">\r\n Inspect every pixel, dissect any layout, preview across dozens of devices, extract every visual asset, audit accessibility in seconds, and export production-ready design tokens - all from a single extension that respects your privacy.\r\n <\/div>\r\n <div class=\"wg-intro\" style=\"margin-top:12px;font-weight:700\">\r\n Zero paywalls. Zero tracking. Zero compromises.\r\n <\/div>\r\n <div class=\"wg-intro\" style=\"margin-top:12px\">\r\n As an independent developer, I built Webstractor to be completely free, fast, and privacy-first forever. If this tool brings value to your daily workflow and you'd like to support my work, you can <a href=\"https:\/\/ko-fi.com\/kristijonas\" target=\"_blank\" rel=\"noopener noreferrer nofollow\">support me on Ko-fi<\/a>.\r\n <\/div>\r\n <div class=\"wg-intro\" style=\"margin-top:12px\">\r\n Thank you for using Webstractor!\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"wg-cws-wrap\">\r\n <a class=\"wg-cws\" href=\"https:\/\/chromewebstore.google.com\/detail\/webstractor\/ajiicppdnghonkojoilknheapmfdbnpa\" target=\"_blank\" rel=\"noopener noreferrer nofollow\" aria-label=\"Available on the Chrome Web Store\">\r\n <svg id=\"Layer_1\" data-name=\"Layer 1\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" xmlns:xlink=\"http:\/\/www.w3.org\/1999\/xlink\" viewBox=\"0 0 256.93 86.18\">\r\n <defs>\r\n <clipPath id=\"wg-clip0\"><path d=\"M2.92,7.3v51.12c0,2.4,1.97,4.39,4.39,4.39h55.5c2.4,0,4.39-1.97,4.39-4.39V7.3H2.92ZM42.36,18.98h-14.61c-1.62,0-2.92-1.3-2.92-2.92s1.3-2.92,2.92-2.92h14.61c1.62,0,2.92,1.3,2.92,2.92s-1.31,2.92-2.92,2.92Z\" style=\"fill: none;\"\/><\/clipPath>\r\n <clipPath id=\"wg-clip1\"><path d=\"M2.92,7.3v51.12c0,2.4,1.97,4.39,4.39,4.39h55.5c2.4,0,4.39-1.97,4.39-4.39V7.3H2.92ZM42.36,18.98h-14.61c-1.62,0-2.92-1.3-2.92-2.92s1.3-2.92,2.92-2.92h14.61c1.62,0,2.92,1.3,2.92,2.92s-1.31,2.92-2.92,2.92Z\" style=\"fill: none;\"\/><\/clipPath>\r\n <clipPath id=\"wg-clip2\"><path d=\"M2.92,7.3v51.12c0,2.4,1.97,4.39,4.39,4.39h55.5c2.4,0,4.39-1.97,4.39-4.39V7.3H2.92ZM42.36,18.98h-14.61c-1.62,0-2.92-1.3-2.92-2.92s1.3-2.92,2.92-2.92h14.61c1.62,0,2.92,1.3,2.92,2.92s-1.31,2.92-2.92,2.92Z\" style=\"fill: none;\"\/><\/clipPath>\r\n <clipPath id=\"wg-clip9\"><circle cx=\"35.05\" cy=\"58.42\" r=\"27.76\" transform=\"translate(-25.71 89.24) rotate(-85.93)\" style=\"fill: none;\"\/><\/clipPath>\r\n <clipPath id=\"wg-clip10\"><circle cx=\"35.05\" cy=\"58.42\" r=\"27.76\" transform=\"translate(-25.71 89.24) rotate(-85.93)\" style=\"clip-path: url(#wg-clip9); fill: none;\"\/><\/clipPath>\r\n <clipPath id=\"wg-clip11\"><circle cx=\"35.05\" cy=\"58.42\" r=\"27.76\" transform=\"translate(-25.71 89.24) rotate(-85.93)\" style=\"clip-path: url(#wg-clip10); fill: none;\"\/><\/clipPath>\r\n <clipPath id=\"wg-clip12\"><circle cx=\"35.05\" cy=\"58.42\" r=\"27.76\" transform=\"translate(-25.71 89.24) rotate(-85.93)\" style=\"clip-path: url(#wg-clip11); fill: none;\"\/><\/clipPath>\r\n <clipPath id=\"wg-clip13\"><circle cx=\"35.05\" cy=\"58.42\" r=\"27.76\" transform=\"translate(-25.71 89.24) rotate(-85.93)\" style=\"fill: none;\"\/><\/clipPath>\r\n <clipPath id=\"wg-clip14\"><circle cx=\"35.05\" cy=\"58.42\" r=\"27.76\" transform=\"translate(-25.71 89.24) rotate(-85.93)\" style=\"clip-path: url(#wg-clip13); fill: none;\"\/><\/clipPath>\r\n <clipPath id=\"wg-clip15\"><circle cx=\"35.05\" cy=\"58.42\" r=\"27.76\" transform=\"translate(-25.71 89.24) rotate(-85.93)\" style=\"clip-path: url(#wg-clip14); fill: none;\"\/><\/clipPath>\r\n <clipPath id=\"wg-clip16\"><circle cx=\"35.05\" cy=\"58.42\" r=\"27.76\" transform=\"translate(-25.71 89.24) rotate(-85.93)\" style=\"clip-path: url(#wg-clip15); fill: none;\"\/><\/clipPath>\r\n <clipPath id=\"wg-clip17\"><circle cx=\"35.05\" cy=\"58.42\" r=\"27.76\" transform=\"translate(-25.71 89.24) rotate(-85.93)\" style=\"fill: none;\"\/><\/clipPath>\r\n <clipPath id=\"wg-clip18\"><circle cx=\"35.05\" cy=\"58.42\" r=\"27.76\" transform=\"translate(-25.71 89.24) rotate(-85.93)\" style=\"clip-path: url(#wg-clip17); fill: none;\"\/><\/clipPath>\r\n <clipPath id=\"wg-clip19\"><circle cx=\"35.05\" cy=\"58.42\" r=\"27.76\" transform=\"translate(-25.71 89.24) rotate(-85.93)\" style=\"clip-path: url(#wg-clip18); fill: none;\"\/><\/clipPath>\r\n <clipPath id=\"wg-clip20\"><circle cx=\"35.05\" cy=\"58.42\" r=\"27.76\" transform=\"translate(-25.71 89.24) rotate(-85.93)\" style=\"clip-path: url(#wg-clip19); fill: none;\"\/><\/clipPath>\r\n <clipPath id=\"wg-clip21\"><circle cx=\"35.05\" cy=\"58.42\" r=\"27.76\" transform=\"translate(-25.71 89.24) rotate(-85.93)\" style=\"fill: none;\"\/><\/clipPath>\r\n <clipPath id=\"wg-clip22\"><circle cx=\"35.05\" cy=\"58.42\" r=\"27.76\" transform=\"translate(-25.71 89.24) rotate(-85.93)\" style=\"clip-path: url(#wg-clip21); fill: none;\"\/><\/clipPath>\r\n <clipPath id=\"wg-clip23\"><circle cx=\"35.05\" cy=\"58.42\" r=\"27.76\" transform=\"translate(-25.71 89.24) rotate(-85.93)\" style=\"clip-path: url(#wg-clip22); fill: none;\"\/><\/clipPath>\r\n <clipPath id=\"wg-clip24\"><circle cx=\"35.05\" cy=\"58.42\" r=\"27.76\" transform=\"translate(-25.71 89.24) rotate(-85.93)\" style=\"clip-path: url(#wg-clip23); fill: none;\"\/><\/clipPath>\r\n <clipPath id=\"wg-clip25\"><path d=\"M2.92,7.3v51.12c0,2.4,1.97,4.39,4.39,4.39h55.5c2.4,0,4.39-1.97,4.39-4.39V7.3H2.92ZM42.36,18.98h-14.61c-1.62,0-2.92-1.3-2.92-2.92s1.3-2.92,2.92-2.92h14.61c1.62,0,2.92,1.3,2.92,2.92s-1.31,2.92-2.92,2.92Z\" style=\"fill: none;\"\/><\/clipPath>\r\n <radialGradient id=\"Ads\u0131z_degrade\" data-name=\"Ads\u0131z degrade\" cx=\"1109.16\" cy=\"940.09\" fx=\"1109.16\" fy=\"940.09\" r=\"332.44\" gradientTransform=\"translate(-274.55 -227.96) scale(.25)\" gradientUnits=\"userSpaceOnUse\">\r\n <stop offset=\"0\" stop-color=\"#fff\" stop-opacity=\".1\"\/>\r\n <stop offset=\"1\" stop-color=\"#fff\" stop-opacity=\"0\"\/>\r\n <\/radialGradient>\r\n <\/defs>\r\n <g>\r\n <g>\r\n <path d=\"M89.94,53.13c-2.28,0-4.18-.77-5.71-2.31-1.54-1.54-2.31-3.46-2.31-5.76s.77-4.22,2.31-5.76,3.45-2.31,5.71-2.31,4.22.84,5.68,2.52l-1.38,1.34c-1.06-1.31-2.49-1.96-4.29-1.96-1.68,0-3.11.56-4.26,1.7-1.16,1.14-1.74,2.63-1.74,4.47s.57,3.33,1.74,4.47c1.16,1.14,2.58,1.7,4.26,1.7,1.85,0,3.44-.75,4.75-2.24l1.38,1.38c-.7.84-1.6,1.53-2.65,2.02-1.07.49-2.23.74-3.48.74Z\" style=\"fill: #606469;\"\/>\r\n <path d=\"M99.83,37.34v4.88l-.08,1.47h.08c.29-.5.74-.93,1.36-1.28.62-.35,1.28-.53,1.98-.53,1.31,0,2.31.4,3,1.21s1.03,1.89,1.03,3.24v6.48h-1.98v-6.17c0-1.96-.87-2.93-2.62-2.93-.82,0-1.49.33-2.01.99s-.77,1.41-.77,2.28v5.84h-1.98v-15.45h1.98Z\" style=\"fill: #606469;\"\/>\r\n <path d=\"M111.53,52.78h-1.98v-10.57h1.9v1.72h.08c.2-.57.61-1.06,1.24-1.42.62-.38,1.23-.56,1.82-.56s1.09.08,1.49.26l-.75,1.85c-.26-.11-.61-.15-1.06-.15-.72,0-1.36.28-1.91.86-.55.56-.83,1.31-.83,2.23v5.78Z\" style=\"fill: #606469;\"\/>\r\n <path d=\"M117.65,43.47c1.02-1.07,2.32-1.61,3.91-1.61s2.89.54,3.91,1.61c1.02,1.07,1.54,2.42,1.54,4.02s-.52,2.96-1.54,4.02c-1.02,1.07-2.32,1.61-3.91,1.61s-2.89-.54-3.91-1.61c-1.02-1.07-1.54-2.42-1.54-4.02s.52-2.96,1.54-4.02ZM119.13,50.27c.68.69,1.49,1.04,2.43,1.04s1.75-.35,2.43-1.04,1.02-1.62,1.02-2.77-.34-2.08-1.02-2.77-1.49-1.04-2.43-1.04-1.75.35-2.43,1.04-1.02,1.62-1.02,2.77.34,2.08,1.02,2.77Z\" style=\"fill: #606469;\"\/>\r\n <path d=\"M128.58,52.78v-10.57h1.9v1.47h.08c.3-.5.76-.93,1.4-1.28.62-.35,1.24-.53,1.87-.53,1.64,0,2.76.68,3.34,2.03.87-1.35,2.09-2.03,3.7-2.03,1.26,0,2.19.4,2.83,1.2.63.8.95,1.88.95,3.25v6.48h-1.98v-6.17c0-1.07-.2-1.82-.59-2.26-.39-.45-.97-.67-1.77-.67s-1.42.33-1.94,1c-.52.66-.76,1.42-.76,2.26v5.84h-1.98v-6.17c0-1.07-.2-1.82-.59-2.26-.39-.45-.97-.67-1.77-.67s-1.42.33-1.94,1c-.52.66-.76,1.42-.76,2.26v5.84h-1.98Z\" style=\"fill: #606469;\"\/>\r\n <path d=\"M151.76,53.13c-1.6,0-2.9-.53-3.89-1.6s-1.5-2.4-1.5-4.04c0-1.54.48-2.86,1.45-3.97s2.22-1.67,3.72-1.67,2.83.52,3.77,1.54,1.41,2.39,1.41,4.09l-.02.36h-8.35c.06,1.07.41,1.9,1.07,2.52s1.42.93,2.3.93c1.42,0,2.39-.61,2.89-1.82l1.77.74c-.34.82-.92,1.5-1.7,2.06-.77.55-1.75.83-2.9.83ZM154.61,46.22c-.05-.61-.32-1.18-.83-1.72-.5-.55-1.27-.82-2.28-.82-.74,0-1.37.23-1.91.69s-.92,1.08-1.11,1.85h6.14Z\" style=\"fill: #606469;\"\/>\r\n <path d=\"M180.76,37.34l-4.12,15.45h-2.03l-3.32-10.18h-.08l-3.32,10.18h-2.03l-4.29-15.45h2.08l3.26,12.15h.08l3.34-10.08h1.85l3.34,10.08h.08l3.09-12.15h2.06Z\" style=\"fill: #606469;\"\/>\r\n <path d=\"M185.91,53.13c-1.6,0-2.9-.53-3.89-1.6s-1.5-2.4-1.5-4.04c0-1.54.48-2.86,1.45-3.97s2.22-1.67,3.72-1.67,2.83.52,3.77,1.54,1.41,2.39,1.41,4.09l-.02.36h-8.35c.06,1.07.41,1.9,1.07,2.52s1.42.93,2.3.93c1.42,0,2.39-.61,2.89-1.82l1.77.74c-.34.82-.92,1.5-1.7,2.06-.77.55-1.75.83-2.9.83ZM188.76,46.22c-.05-.61-.32-1.18-.83-1.72-.5-.55-1.27-.82-2.28-.82-.74,0-1.37.23-1.91.69s-.92,1.08-1.11,1.85h6.14Z\" style=\"fill: #606469;\"\/>\r\n <path d=\"M198.28,53.13c-.81,0-1.53-.18-2.17-.52-.65-.34-1.11-.77-1.43-1.29h-.08v1.47h-1.9v-15.45h1.98v4.88l-.08,1.47h.08c.32-.52.8-.95,1.43-1.29.65-.34,1.36-.52,2.17-.52,1.36,0,2.55.54,3.54,1.62s1.49,2.42,1.49,4.01-.49,2.93-1.49,4.01c-1,1.07-2.17,1.61-3.54,1.61ZM197.96,51.31c.92,0,1.71-.35,2.37-1.04s1-1.62,1-2.77-.33-2.08-1-2.77c-.66-.69-1.45-1.04-2.37-1.04s-1.72.34-2.38,1.03c-.66.69-.99,1.62-.99,2.78s.33,2.09.99,2.78c.65.69,1.44,1.03,2.38,1.03Z\" style=\"fill: #606469;\"\/>\r\n <path d=\"M213.93,53.13c-1.13,0-2.22-.36-3.28-1.1s-1.77-1.76-2.1-3.09l1.82-.74c.21.84.66,1.56,1.33,2.15s1.42.87,2.25.87,1.6-.22,2.22-.68c.61-.46.92-1.07.92-1.84,0-.87-.3-1.53-.92-1.99s-1.58-.9-2.9-1.3c-1.37-.43-2.4-.99-3.11-1.68-.7-.68-1.06-1.56-1.06-2.62s.43-2.08,1.31-2.89c.88-.82,2.02-1.23,3.43-1.23,1.31,0,2.37.33,3.19.99s1.35,1.37,1.6,2.15l-1.82.75c-.13-.49-.45-.94-.96-1.36-.5-.42-1.17-.62-1.97-.62s-1.41.21-1.95.63-.81.95-.81,1.58c0,.57.25,1.06.74,1.45.49.4,1.23.75,2.19,1.07.76.25,1.4.48,1.91.72.5.23,1.03.54,1.55.92.53.39.92.86,1.18,1.42.27.56.4,1.23.4,1.97s-.15,1.42-.47,2.01c-.3.59-.72,1.06-1.23,1.41-.52.34-1.06.61-1.65.79-.59.19-1.2.28-1.81.28Z\" style=\"fill: #606469;\"\/>\r\n <path d=\"M225.19,52.95c-1.1,0-1.95-.29-2.53-.88s-.87-1.42-.87-2.5v-5.55h-1.85v-1.81h1.85v-3.24h1.98v3.24h2.59v1.81h-2.59v5.4c0,1.15.47,1.72,1.42,1.72.36,0,.66-.06.9-.18l.69,1.7c-.43.19-.96.28-1.6.28Z\" style=\"fill: #606469;\"\/>\r\n <path d=\"M229.07,43.47c1.02-1.07,2.32-1.61,3.91-1.61s2.89.54,3.91,1.61c1.02,1.07,1.54,2.42,1.54,4.02s-.5,2.96-1.54,4.02c-1.02,1.07-2.32,1.61-3.91,1.61s-2.89-.54-3.91-1.61c-1.02-1.07-1.54-2.42-1.54-4.02s.52-2.96,1.54-4.02ZM230.55,50.27c.68.69,1.49,1.04,2.43,1.04s1.75-.35,2.43-1.04,1.02-1.62,1.02-2.77-.34-2.08-1.02-2.77-1.49-1.04-2.43-1.04-1.75.35-2.43,1.04-1.02,1.62-1.02,2.77c0,1.15.34,2.08,1.02,2.77Z\" style=\"fill: #606469;\"\/>\r\n <path d=\"M242,52.78h-1.98v-10.57h1.9v1.72h.08c.2-.57.61-1.06,1.24-1.42.62-.38,1.23-.56,1.82-.56s1.09.08,1.49.26l-.75,1.85c-.26-.11-.61-.15-1.06-.15-.72,0-1.36.28-1.91.86-.55.56-.83,1.31-.83,2.23v5.78Z\" style=\"fill: #606469;\"\/>\r\n <path d=\"M251.98,53.13c-1.6,0-2.9-.53-3.89-1.6s-1.5-2.4-1.5-4.04c0-1.54.48-2.86,1.45-3.97s2.22-1.67,3.72-1.67,2.83.52,3.77,1.54c.94,1.02,1.41,2.39,1.41,4.09l-.02.36h-8.35c.06,1.07.41,1.9,1.07,2.52s1.42.93,2.3.93c1.42,0,2.39-.61,2.89-1.82l1.77.74c-.34.82-.92,1.5-1.7,2.06-.77.55-1.75.83-2.9.83ZM254.83,46.22c-.05-.61-.32-1.18-.83-1.72-.5-.55-1.27-.82-2.28-.82-.74,0-1.37.23-1.91.69s-.92,1.08-1.11,1.85h6.14Z\" style=\"fill: #606469;\"\/>\r\n <\/g>\r\n <g>\r\n <path d=\"M83.07,28.8l4.41-11.7h1.7l4.41,11.7h-1.67l-1.13-3.17h-4.92l-1.14,3.17h-1.68ZM86.39,24.22h3.88l-1.91-5.28h-.07l-1.9,5.28Z\" style=\"fill: #606469;\"\/>\r\n <path d=\"M96.26,28.8l-3.24-8h1.63l2.35,6.21h.04l2.38-6.21h1.6l-3.26,8h-1.49Z\" style=\"fill: #606469;\"\/>\r\n <path d=\"M104.37,29.06c-.84,0-1.56-.25-2.14-.74s-.86-1.14-.86-1.95c0-.87.34-1.55,1.01-2.05.68-.49,1.5-.74,2.5-.74.88,0,1.61.16,2.17.49v-.23c0-.59-.2-1.06-.6-1.41s-.9-.53-1.49-.53c-.43,0-.83.11-1.18.3-.35.21-.6.49-.73.84l-1.37-.59c.19-.48.55-.93,1.09-1.33.54-.41,1.27-.61,2.16-.61,1.02,0,1.88.31,2.55.9.68.6,1.01,1.44,1.01,2.53v4.83h-1.44v-1.11h-.07c-.57.92-1.44,1.37-2.6,1.37ZM104.62,27.69c.62,0,1.18-.23,1.69-.69.5-.46.76-1.01.76-1.64-.42-.35-1.06-.53-1.91-.53-.73,0-1.28.15-1.65.47-.38.32-.55.68-.55,1.11,0,.39.16.7.5.93.34.23.73.35,1.16.35Z\" style=\"fill: #606469;\"\/>\r\n <path d=\"M111.83,18.79c-.21.21-.46.31-.75.31s-.54-.11-.75-.31c-.21-.21-.3-.46-.3-.75s.11-.54.3-.75c.21-.21.46-.31.75-.31s.54.11.75.31c.21.21.3.46.3.75s-.09.54-.3.75ZM111.83,28.8h-1.5v-8h1.5v8Z\" style=\"fill: #606469;\"\/>\r\n <path d=\"M115.3,28.8h-1.5v-11.7h1.5v11.7Z\" style=\"fill: #606469;\"\/>\r\n <path d=\"M119.57,29.06c-.84,0-1.56-.25-2.14-.74s-.86-1.14-.86-1.95c0-.87.34-1.55,1.01-2.05.68-.49,1.5-.74,2.5-.74.88,0,1.61.16,2.17.49v-.23c0-.59-.2-1.06-.6-1.41s-.9-.53-1.49-.53c-.43,0-.83.11-1.18.3-.35.21-.6.49-.73.84l-1.37-.59c.19-.48.55-.93,1.09-1.33.54-.41,1.27-.61,2.16-.61,1.02,0,1.88.31,2.55.9.68.6,1.01,1.44,1.01,2.53v4.83h-1.44v-1.11h-.07c-.57.92-1.44,1.37-2.6,1.37ZM119.82,27.69c.62,0,1.18-.23,1.69-.69s.76-1.01.76-1.64c-.42-.35-1.06-.53-1.91-.53-.73,0-1.28.15-1.65.47-.38.32-.55.68-.55,1.11,0,.39.16.7.5.93.34.23.73.35,1.16.35Z\" style=\"fill: #606469;\"\/>\r\n <path d=\"M129.64,29.06c-.61,0-1.16-.13-1.64-.39-.48-.26-.84-.59-1.09-.99h-.07v1.11h-1.44v-11.7h1.5v3.7l-.07,1.11h.07c.23-.39.6-.72,1.09-.97.48-.26,1.03-.39,1.64-.39,1.03,0,1.92.41,2.67,1.22.75.82,1.13,1.83,1.13,3.04s-.38,2.22-1.13,3.04c-.74.8-1.63,1.21-2.66,1.21ZM129.39,27.69c.69,0,1.29-.26,1.79-.79s.75-1.23.75-2.1-.25-1.57-.75-2.1-1.1-.8-1.79-.8-1.31.26-1.81.79-.74,1.22-.74,2.11.25,1.58.74,2.11c.49.52,1.09.77,1.81.77Z\" style=\"fill: #606469;\"\/>\r\n <path d=\"M136.23,28.8h-1.5v-11.7h1.5v11.7Z\" style=\"fill: #606469;\"\/>\r\n <path d=\"M141.6,29.06c-1.21,0-2.19-.4-2.94-1.21-.76-.81-1.14-1.82-1.14-3.05,0-1.16.36-2.17,1.1-3,.74-.83,1.68-1.26,2.82-1.26s2.14.39,2.85,1.16c.72.77,1.07,1.81,1.07,3.1v.28h-6.33c.05.81.32,1.44.81,1.91.49.47,1.08.7,1.74.7,1.08,0,1.81-.46,2.19-1.37l1.34.55c-.26.62-.69,1.14-1.29,1.56-.6.41-1.34.62-2.21.62ZM143.76,23.84c-.04-.46-.25-.89-.63-1.3-.39-.41-.96-.62-1.72-.62-.55,0-1.03.18-1.44.53-.41.35-.69.82-.84,1.41h4.65Z\" style=\"fill: #606469;\"\/>\r\n <path d=\"M151.95,18.79c-.21.21-.46.31-.75.31s-.54-.11-.75-.31c-.21-.21-.3-.46-.3-.75s.11-.54.3-.75c.21-.21.46-.31.75-.31s.54.11.75.31c.21.21.3.46.3.75s-.09.54-.3.75ZM151.95,28.8h-1.5v-8h1.5v8Z\" style=\"fill: #606469;\"\/>\r\n <path d=\"M155.35,20.8v1.11h.07c.22-.38.56-.7,1.03-.97.47-.27.97-.4,1.5-.4.99,0,1.75.31,2.26.92.53.61.79,1.43.79,2.45v4.9h-1.5v-4.67c0-1.48-.66-2.22-1.97-2.22-.62,0-1.13.25-1.51.74-.39.49-.59,1.07-.59,1.72v4.42h-1.5v-8h1.42Z\" style=\"fill: #606469;\"\/>\r\n <path d=\"M169.82,28.93c-.83,0-1.48-.22-1.92-.67s-.66-1.08-.66-1.89v-4.2h-1.41v-1.37h1.41v-2.45h1.5v2.45h1.96v1.37h-1.96v4.08c0,.87.36,1.3,1.08,1.3.27,0,.5-.05.68-.13l.53,1.29c-.33.14-.73.21-1.21.21Z\" style=\"fill: #606469;\"\/>\r\n <path d=\"M173.71,17.1v3.7l-.07,1.11h.07c.22-.38.56-.7,1.03-.97.47-.27.97-.4,1.5-.4.99,0,1.75.31,2.26.92.53.61.79,1.43.79,2.45v4.9h-1.5v-4.67c0-1.48-.66-2.22-1.97-2.22-.62,0-1.13.25-1.51.74-.39.49-.59,1.07-.59,1.72v4.42h-1.5v-11.7h1.49Z\" style=\"fill: #606469;\"\/>\r\n <path d=\"M184.69,29.06c-1.21,0-2.19-.4-2.94-1.21-.76-.81-1.14-1.82-1.14-3.05,0-1.16.36-2.17,1.1-3,.74-.83,1.68-1.26,2.82-1.26s2.14.39,2.85,1.16c.72.77,1.07,1.81,1.07,3.1v.28h-6.33c.05.81.32,1.44.81,1.91.49.47,1.08.7,1.74.7,1.08,0,1.81-.46,2.19-1.37l1.34.55c-.26.62-.69,1.14-1.29,1.56-.6.41-1.34.62-2.21.62ZM186.85,23.84c-.04-.46-.25-.89-.63-1.3-.39-.41-.96-.62-1.72-.62-.55,0-1.03.18-1.44.53-.41.35-.69.82-.84,1.41h4.65Z\" style=\"fill: #606469;\"\/>\r\n <\/g>\r\n <\/g>\r\n <g>\r\n <g style=\"clip-path: url(#wg-clip0);\">\r\n <path d=\"M2.92,7.3h64.27v55.5H2.92V7.3Z\" style=\"fill: #eeedee;\"\/>\r\n <\/g>\r\n <g style=\"clip-path: url(#wg-clip1);\">\r\n <path d=\"M42.36,13.14h-14.61c-1.62,0-2.92,1.3-2.92,2.92s1.3,2.92,2.92,2.92h14.61c1.62,0,2.92-1.3,2.92-2.92s-1.31-2.92-2.92-2.92Z\" style=\"fill: #fff;\"\/>\r\n <\/g>\r\n <g style=\"clip-path: url(#wg-clip2);\">\r\n <g>\r\n <g>\r\n <g style=\"clip-path: url(#wg-clip12);\">\r\n <path d=\"M11.71,30.66v34.05h12.42l10.92-18.92h27.76v-15.13H11.71ZM11.71,30.66v34.05h12.42l10.92-18.92h27.76v-15.13H11.71Z\" style=\"fill: #dc4637;\"\/>\r\n <\/g>\r\n <g style=\"clip-path: url(#wg-clip16);\">\r\n <path d=\"M7.3,86.18h26.42l12.26-12.26v-9.19h-21.85L7.3,35.87s0,50.3,0,50.3ZM7.3,86.18h26.42l12.26-12.26v-9.19h-21.85L7.3,35.87s0,50.3,0,50.3Z\" style=\"fill: #0f9d58;\"\/>\r\n <\/g>\r\n <g style=\"clip-path: url(#wg-clip20);\">\r\n <path d=\"M35.05,45.81l10.92,18.92-12.26,21.44h29.08v-40.37h-27.74ZM35.05,45.81l10.92,18.92-12.26,21.44h29.08v-40.37h-27.74Z\" style=\"fill: #ffce41;\"\/>\r\n <\/g>\r\n <g style=\"clip-path: url(#wg-clip24);\">\r\n <g>\r\n <circle cx=\"35.05\" cy=\"58.42\" r=\"12.61\" style=\"fill: #f2f2f2;\"\/>\r\n <circle cx=\"35.05\" cy=\"58.42\" r=\"10.09\" style=\"fill: #557ebf;\"\/>\r\n <\/g>\r\n <\/g>\r\n <\/g>\r\n <g style=\"clip-path: url(#wg-clip25);\">\r\n <path d=\"M2.92,7.3h64.27v27.76H2.92V7.3Z\" style=\"fill: rgba(33, 33, 33, .05);\"\/>\r\n <\/g>\r\n <path d=\"M2.92,34.69h64.27v.36H2.92v-.36Z\" style=\"fill: rgba(33, 33, 33, .02);\"\/>\r\n <path d=\"M2.92,35.05h64.27v.36H2.92v-.36Z\" style=\"fill: rgba(255, 255, 255, .05);\"\/>\r\n <path d=\"M42.36,18.98h-14.61c-1.55,0-2.82-1.21-2.91-2.73-.01.06-.01.12-.01.19,0,1.62,1.3,2.92,2.92,2.92h14.61c1.62,0,2.92-1.3,2.92-2.92,0-.06,0-.12-.01-.19-.09,1.53-1.36,2.73-2.91,2.73ZM2.92,7.3v.36h64.27v-.36H2.92Z\" style=\"fill: rgba(33, 33, 33, .02);\"\/>\r\n <path d=\"M27.76,13.14h14.61c1.55,0,2.82,1.21,2.91,2.73,0-.06.01-.12.01-.19,0-1.62-1.3-2.92-2.92-2.92h-14.61c-1.62,0-2.92,1.3-2.92,2.92,0,.06,0,.12.01.19.08-1.51,1.35-2.73,2.91-2.73ZM62.81,62.44H7.3c-2.4,0-4.39-1.97-4.39-4.39v.36c0,2.4,1.97,4.39,4.39,4.39h55.5c2.4,0,4.39-1.97,4.39-4.39v-.36c0,2.42-1.97,4.39-4.38,4.39Z\" style=\"fill: rgba(35, 31, 32, .1);\"\/>\r\n <path d=\"M2.92,7.3v51.12c0,2.4,1.97,4.39,4.39,4.39h55.5c2.4,0,4.39-1.97,4.39-4.39V7.3H2.92ZM42.36,18.98h-14.61c-1.62,0-2.92-1.3-2.92-2.92s1.3-2.92,2.92-2.92h14.61c1.62,0,2.92,1.3,2.92,2.92s-1.31,2.92-2.92,2.92Z\" style=\"fill: url(#Ads\u0131z_degrade);\"\/>\r\n <path d=\"M0,0h70.1v70.12H0V0Z\" style=\"fill: none;\"\/>\r\n <\/g>\r\n <\/g>\r\n <\/g>\r\n <\/svg>\r\n <\/a>\r\n <\/div>\r\n\r\n <h3 class=\"wg-h3\">Core Features at a Glance<\/h3>\r\n <p class=\"wg-p\">Click any feature below to jump to its detailed documentation.<\/p>\r\n <div class=\"wg-grid\">\r\n <div class=\"wg-card\">\r\n <div style=\"font-weight:700;font-size:14px;color:var(--text);margin-bottom:8px\">Inspector<\/div>\r\n <div class=\"wg-pills\">\r\n <span class=\"wg-pill\" data-goto=\"inspector\">Element Inspection<\/span>\r\n <span class=\"wg-pill\" data-goto=\"inspector\">Live CSS Editor<\/span>\r\n <span class=\"wg-pill\" data-goto=\"inspector\">Color Picker<\/span>\r\n <span class=\"wg-pill\" data-goto=\"inspector\">Contrast Checker<\/span>\r\n <span class=\"wg-pill\" data-goto=\"inspector\">Design Tokens<\/span>\r\n <span class=\"wg-pill\" data-goto=\"inspector\">Font Download & Converter<\/span>\r\n <span class=\"wg-pill\" data-goto=\"inspector\">Accessibility Audit<\/span>\r\n <span class=\"wg-pill\" data-goto=\"inspector\">Page Health<\/span>\r\n <span class=\"wg-pill\" data-goto=\"inspector\">Responsive Mode<\/span>\r\n <\/div>\r\n <\/div>\r\n <div class=\"wg-card\">\r\n <div style=\"font-weight:700;font-size:14px;color:var(--text);margin-bottom:8px\">Viewer<\/div>\r\n <div class=\"wg-pills\">\r\n <span class=\"wg-pill\" data-goto=\"viewer\">Device Presets<\/span>\r\n <span class=\"wg-pill\" data-goto=\"viewer\">Custom Presets<\/span>\r\n <span class=\"wg-pill\" data-goto=\"viewer\">Device Frames<\/span>\r\n <span class=\"wg-pill\" data-goto=\"viewer\">Scroll & Click Sync<\/span>\r\n <span class=\"wg-pill\" data-goto=\"viewer\">Rotate & Zoom<\/span>\r\n <span class=\"wg-pill\" data-goto=\"viewer\">Inspector & Ruler<\/span>\r\n <span class=\"wg-pill\" data-goto=\"viewer\">Full Page Capture<\/span>\r\n <\/div>\r\n <\/div>\r\n <div class=\"wg-card\">\r\n <div style=\"font-weight:700;font-size:14px;color:var(--text);margin-bottom:8px\">Designer<\/div>\r\n <div class=\"wg-pills\">\r\n <span class=\"wg-pill\" data-goto=\"designer\">Grid Overlay<\/span>\r\n <span class=\"wg-pill\" data-goto=\"designer\">Rulers<\/span>\r\n <span class=\"wg-pill\" data-goto=\"designer\">Guidelines<\/span>\r\n <span class=\"wg-pill\" data-goto=\"designer\">Measure Tool<\/span>\r\n <span class=\"wg-pill\" data-goto=\"designer\">Crosshair<\/span>\r\n <span class=\"wg-pill\" data-goto=\"designer\">Eyedropper<\/span>\r\n <span class=\"wg-pill\" data-goto=\"designer\">Full Page Capture<\/span>\r\n <\/div>\r\n <\/div>\r\n <div class=\"wg-card\">\r\n <div style=\"font-weight:700;font-size:14px;color:var(--text);margin-bottom:8px\">Extractor<\/div>\r\n <div class=\"wg-pills\">\r\n <span class=\"wg-pill\" data-goto=\"extractor\">Image Extraction<\/span>\r\n <span class=\"wg-pill\" data-goto=\"extractor\">SVG Extraction<\/span>\r\n <span class=\"wg-pill\" data-goto=\"extractor\">GIF Extraction<\/span>\r\n <span class=\"wg-pill\" data-goto=\"extractor\">Format Converter<\/span>\r\n <span class=\"wg-pill\" data-goto=\"extractor\">Size Filter<\/span>\r\n <span class=\"wg-pill\" data-goto=\"extractor\">ZIP Download<\/span>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <h3 class=\"wg-h3\">Panel Controls<\/h3>\r\n <p class=\"wg-p\">The floating panel can be <strong>dragged<\/strong> by its header bar to reposition it anywhere on screen. Use the header buttons to access this Help & Guide, support the developer via Ko-Fi, or close the panel. The panel resets its position each time it is opened.<\/p>\r\n <\/section>\r\n\r\n <!-- ===================== INSPECTOR ===================== -->\r\n <section class=\"wg-section\" id=\"inspector\">\r\n <h2 class=\"wg-h2\">Inspector<\/h2>\r\n <p class=\"wg-p\">The Inspector is the largest and most feature-rich tab. It provides deep element inspection, live CSS editing, color analysis, typography tools, design token extraction, performance metrics, and accessibility auditing - all in one place.<\/p>\r\n\r\n <h3 class=\"wg-h3\">Element Inspector<\/h3>\r\n <div class=\"wg-card\"><div class=\"wg-ft-title\">Activating the Inspector<\/div><div class=\"wg-ft-body\">Toggle the inspector by clicking the toggle button in the Inspector tab, or press <kbd class=\"wg-kbd\">Alt + I<\/kbd>. When active, hover over any element on the page - a highlight overlay shows its boundaries, tag name, and dimensions (width x height) in real time.<\/div><\/div>\r\n <div class=\"wg-card\"><div class=\"wg-ft-title\">Selecting & Inspecting Elements<\/div><div class=\"wg-ft-body\">Click any highlighted element to select it. The panel instantly displays its full computed CSS properties, box model dimensions (content, padding, border, margin), typography details, and color information.<\/div><\/div>\r\n <div class=\"wg-card\"><div class=\"wg-ft-title\">Live CSS Editor<\/div><div class=\"wg-ft-body\">Once an element is selected, a Live CSS Editor appears showing the element's key computed styles as editable CSS. Modify any property directly - changes apply to the live page in real time. Click \"Copy\" to copy the CSS to clipboard.<\/div><\/div>\r\n <div class=\"wg-card\"><div class=\"wg-ft-title\">Editable Properties<\/div><div class=\"wg-ft-body\">Specific properties like font family, font weight, font style, text decoration, font size, and line height are presented as editable fields with datalist dropdowns. Change a font family and see it applied instantly on the page. Font family suggestions include popular Google Fonts. Box-model values - margin, padding, border width, border radius, and border color - are also editable directly on the Structural Outline diagram.<\/div><\/div>\r\n <div class=\"wg-card\"><div class=\"wg-ft-title\">Structural Outline<\/div><div class=\"wg-ft-body\">When an element is selected, a structural outline view shows the DOM hierarchy of the selected element - its parent chain and children - for quick understanding of the page structure. The interactive box-model diagram above it is fully editable: click any value to adjust <strong>margin<\/strong>, <strong>padding<\/strong>, <strong>border<\/strong> width, <strong>border radius<\/strong>, and <strong>border color<\/strong> live on the page, with a sync toggle to apply a value to all sides at once.<\/div><\/div>\r\n\r\n <h3 class=\"wg-h3\">Responsive Mode<\/h3>\r\n <div class=\"wg-card\"><div class=\"wg-ft-title\">Viewport Testing<\/div><div class=\"wg-ft-body\">Toggle Responsive Mode directly within the Inspector tab using the desktop, tablet, and mobile icons. Switching between modes instantly resizes the page layout to simulate standard desktop, tablet, or mobile screens, allowing you to test responsive layouts effortlessly while retaining all Inspector features, including live CSS editing, color contrast checks, and element analysis.<\/div><\/div>\r\n\r\n <h3 class=\"wg-h3\">Color Contrast Checker<\/h3>\r\n <div class=\"wg-card\"><div class=\"wg-ft-title\">WCAG Contrast Ratio<\/div><div class=\"wg-ft-body\">When you select an element, the Inspector automatically calculates and displays the contrast ratio between the element's text color and background color. The result is shown with a color-coded badge - green for passing WCAG standards and red for failing. Click the color swatches to copy values.<\/div><\/div>\r\n\r\n <h3 class=\"wg-h3\">Image Download & Conversion<\/h3>\r\n <div class=\"wg-card\"><div class=\"wg-ft-title\">Download Images from Inspector<\/div><div class=\"wg-ft-body\">When inspecting an image element, the Inspector provides a direct download option. You can download the image in its original format or convert it to PNG, JPG, WebP, or AVIF before downloading - all conversion happens locally in the browser.<\/div><\/div>\r\n\r\n <h3 class=\"wg-h3\">Colors<\/h3>\r\n <div class=\"wg-card\"><div class=\"wg-ft-title\">Page Colors & Background Colors<\/div><div class=\"wg-ft-body\">The Colors section automatically extracts all unique text colors and background colors used across the page. Colors are displayed as clickable swatches - click any swatch to copy its value.<\/div><\/div>\r\n <div class=\"wg-card\"><div class=\"wg-ft-title\">Color Grouping & Shades<\/div><div class=\"wg-ft-body\">Extracted colors are intelligently grouped by similarity - Webstractor clusters similar shades together and auto-names each group (e.g., \"Midnight Blue\", \"Coral Red\"). This gives you a clear picture of the page's color palette, with each group showing its variations and shades.<\/div><\/div>\r\n <div class=\"wg-card\"><div class=\"wg-ft-title\">Color Format Switching<\/div><div class=\"wg-ft-body\">Toggle between <strong>HEX<\/strong>, <strong>RGB<\/strong>, and <strong>HSL<\/strong> color formats by clicking the format label. Your preferred format is remembered across sessions.<\/div><\/div>\r\n\r\n <h3 class=\"wg-h3\">Design Tokens<\/h3>\r\n <div class=\"wg-card\"><div class=\"wg-ft-title\">Token Extraction<\/div><div class=\"wg-ft-body\">The Design Tokens section scans the page and extracts all visual design values - colors, fonts, font sizes, spacing values, and CSS gradients - organized into categories. These tokens represent the page's complete design system.<\/div><\/div>\r\n <div class=\"wg-card\"><div class=\"wg-ft-title\">Export Formats<\/div><div class=\"wg-ft-body\">Export extracted tokens as <strong>CSS Custom Properties<\/strong>, <strong>SCSS Variables<\/strong>, <strong>JSON<\/strong>, <strong>Tailwind Config<\/strong>, or <strong>JavaScript\/TypeScript<\/strong> objects. Generated code can be copied with one click and dropped directly into your project.<\/div><\/div>\r\n\r\n <h3 class=\"wg-h3\">Fonts<\/h3>\r\n <div class=\"wg-card\"><div class=\"wg-ft-title\">Font Discovery<\/div><div class=\"wg-ft-body\">The Fonts section lists every font family used on the page, along with the specific weights and styles detected. This makes it easy to identify which fonts a website uses.<\/div><\/div>\r\n <div class=\"wg-card\"><div class=\"wg-ft-title\">Font Download<\/div><div class=\"wg-ft-body\">Download the original web font files directly from the page's stylesheet. Click the download button next to any font to save the original font file.<\/div><\/div>\r\n <div class=\"wg-card\"><div class=\"wg-ft-title\">Font Format Converter<\/div><div class=\"wg-ft-body\">Convert downloaded fonts to <strong>TTF<\/strong> or <strong>OTF<\/strong> format. The converter handles WOFF, WOFF2, TTF, and OTF source formats, with all processing done locally in the browser.<\/div><\/div>\r\n\r\n <h3 class=\"wg-h3\">Page Health & Performance<\/h3>\r\n <div class=\"wg-card\"><div class=\"wg-ft-title\">Performance Metrics<\/div><div class=\"wg-ft-body\">Displays quick page health indicators: page load time, total stylesheet count, total element count, average contrast ratio, and number of images missing alt attributes.<\/div><\/div>\r\n\r\n <h3 class=\"wg-h3\">Accessibility Checker<\/h3>\r\n <div class=\"wg-card\"><div class=\"wg-ft-title\">Running an Accessibility Audit<\/div><div class=\"wg-ft-body\">Click \"Run Accessibility Check\" to run a full axe-core audit against the current page. Choose the WCAG standard (2.0 A, 2.0 AA, 2.1 AA, etc.) before running. Results show violations, passes, and incomplete checks with severity levels.<\/div><\/div>\r\n <div class=\"wg-card\"><div class=\"wg-ft-title\">Detailed Report & PDF Export<\/div><div class=\"wg-ft-body\">Click \"View Detailed Report\" to open a full-screen results viewer. The report can be exported as a professionally formatted PDF document with violation details, affected elements, and fix suggestions.<\/div><\/div>\r\n <\/section>\r\n\r\n <!-- ===================== VIEWER ===================== -->\r\n <section class=\"wg-section\" id=\"viewer\">\r\n <h2 class=\"wg-h2\">Viewer<\/h2>\r\n <p class=\"wg-p\">The Viewer provides responsive design testing by rendering the current page inside multiple device frames simultaneously. Perfect for checking how a website looks and behaves across phones, tablets, and desktops.<\/p>\r\n\r\n <h3 class=\"wg-h3\">Device Presets<\/h3>\r\n <div class=\"wg-card\"><div class=\"wg-ft-title\">Built-in Device Library<\/div><div class=\"wg-ft-body\">Choose from a wide range of built-in device presets: iPhones, iPads, Samsung Galaxy phones and tablets, Google Pixel, desktops, and more. Each preset uses the device's real screen dimensions for accurate responsive testing.<\/div><\/div>\r\n\r\n <h3 class=\"wg-h3\">Custom Presets<\/h3>\r\n <div class=\"wg-card\"><div class=\"wg-ft-title\">Create Your Own Devices<\/div><div class=\"wg-ft-body\">Define custom device viewports by specifying a name, width, and height. Custom presets are saved and available alongside the built-in devices.<\/div><\/div>\r\n\r\n <h3 class=\"wg-h3\">Preset Workspaces<\/h3>\r\n <div class=\"wg-card\"><div class=\"wg-ft-title\">Save Device Combinations<\/div><div class=\"wg-ft-body\">Save your current selection of active devices as a workspace. Switch between workspaces to quickly load different sets of devices - for example, a \"Mobile\" workspace with phones only, or a \"Full Review\" workspace with all sizes.<\/div><\/div>\r\n\r\n <h3 class=\"wg-h3\">Device Frames & UI<\/h3>\r\n <div class=\"wg-card\"><div class=\"wg-ft-title\">Realistic Device Frames<\/div><div class=\"wg-ft-body\">Devices are rendered with realistic frame bezels that match the actual hardware appearance. Each device shows its name and dimensions in a label header.<\/div><\/div>\r\n\r\n <h3 class=\"wg-h3\">Device Sync<\/h3>\r\n <div class=\"wg-card\"><div class=\"wg-ft-title\">Synchronized Scrolling & Clicking<\/div><div class=\"wg-ft-body\">All active device previews are synchronized - scroll one device and all others follow, click on one device and the same interaction is mirrored across all. This makes it easy to compare the same content section and interaction across different screen sizes simultaneously.<\/div><\/div>\r\n\r\n <h3 class=\"wg-h3\">Rotate<\/h3>\r\n <div class=\"wg-card\"><div class=\"wg-ft-title\">Portrait \/ Landscape Toggle<\/div><div class=\"wg-ft-body\">Toggle individual devices between portrait and landscape orientation. The viewport dimensions swap accordingly, and the page re-renders to show how the layout adapts.<\/div><\/div>\r\n\r\n <h3 class=\"wg-h3\">Layout<\/h3>\r\n <div class=\"wg-card\"><div class=\"wg-ft-title\">Viewer Layout Options<\/div><div class=\"wg-ft-body\">Choose how devices are arranged on screen - side by side horizontally, stacked vertically, or in a grid layout. Adjust the layout to fit your screen and workflow.<\/div><\/div>\r\n\r\n <h3 class=\"wg-h3\">Zoom<\/h3>\r\n <div class=\"wg-card\"><div class=\"wg-ft-title\">Viewer Zoom Control<\/div><div class=\"wg-ft-body\">Zoom the entire Viewer canvas in or out to fit more devices on screen, or zoom in to focus on details. The zoom level controls the scale of all device frames simultaneously.<\/div><\/div>\r\n\r\n <h3 class=\"wg-h3\">Inspector & Ruler<\/h3>\r\n <div class=\"wg-card\"><div class=\"wg-ft-title\">Inspector Inside the Viewer<\/div><div class=\"wg-ft-body\">The Viewer includes a built-in Inspector that works directly on the device previews. Activate it to inspect elements within any device frame, see their CSS properties, and compare how they render at different viewport widths.<\/div><\/div>\r\n <div class=\"wg-card\"><div class=\"wg-ft-title\">Ruler in the Viewer<\/div><div class=\"wg-ft-body\">A Ruler mode is available inside the Viewer to measure and verify exact pixel distances within device frames. This helps ensure responsive layouts match design specifications.<\/div><\/div>\r\n\r\n <h3 class=\"wg-h3\">Full Page Capture<\/h3>\r\n <div class=\"wg-card\"><div class=\"wg-ft-title\">Capture Device Previews<\/div><div class=\"wg-ft-body\">Each device frame has its own Full Page Capture button for capturing the full scrollable content of that specific device. The output format (PNG, JPG, WebP, AVIF) is selected from the Viewer header menu and applies to all devices.<\/div><\/div>\r\n <\/section>\r\n\r\n <!-- ===================== DESIGNER ===================== -->\r\n <section class=\"wg-section\" id=\"designer\">\r\n <h2 class=\"wg-h2\">Designer<\/h2>\r\n <p class=\"wg-p\">The Designer tab provides pixel-perfect precision tools for layout analysis and visual measurement. All tools are toggleable and can be used simultaneously.<\/p>\r\n\r\n <h3 class=\"wg-h3\">Grid Overlay<\/h3>\r\n <div class=\"wg-card\"><div class=\"wg-ft-title\">Column Grid System<\/div><div class=\"wg-ft-body\">Toggle a column grid overlay on top of the page. The grid is fully configurable: set the number of <strong>columns<\/strong> (default 12), <strong>gutter<\/strong> width (default 20px), and <strong>max width<\/strong> (default 1200px). The grid auto-centers on the page.<\/div><\/div>\r\n <div class=\"wg-card\"><div class=\"wg-ft-title\">Grid Customization<\/div><div class=\"wg-ft-body\">Adjust grid color and opacity to match your needs. The grid overlay is rendered as an SVG pattern for crisp lines at any zoom level.<\/div><\/div>\r\n\r\n <h3 class=\"wg-h3\">Rulers<\/h3>\r\n <div class=\"wg-card\"><div class=\"wg-ft-title\">Pixel Rulers<\/div><div class=\"wg-ft-body\">Toggle horizontal and vertical rulers along the top and left edges of the viewport. Rulers display accurate page coordinates with major tick marks every 100px, minor marks every 50px, and fine marks every 10px. The rulers update in real time as you scroll.<\/div><\/div>\r\n\r\n <h3 class=\"wg-h3\">Guidelines<\/h3>\r\n <div class=\"wg-card\"><div class=\"wg-ft-title\">Creating Guidelines<\/div><div class=\"wg-ft-body\">When rulers are active, enable guideline mode and click anywhere on a ruler to place a guideline at that position. Click the horizontal ruler to place vertical guidelines, and the vertical ruler to place horizontal guidelines. Each guideline shows its exact pixel coordinate.<\/div><\/div>\r\n\r\n <h3 class=\"wg-h3\">Measure Tool<\/h3>\r\n <div class=\"wg-card\"><div class=\"wg-ft-title\">Precision Measurement<\/div><div class=\"wg-ft-body\">Activate the Measure tool and click-drag anywhere on the page to measure a rectangular area. The overlay displays the width and height in pixels in real time. Click the dimensions to copy them to clipboard.<\/div><\/div>\r\n\r\n <h3 class=\"wg-h3\">Crosshair<\/h3>\r\n <div class=\"wg-card\"><div class=\"wg-ft-title\">Crosshair Cursor<\/div><div class=\"wg-ft-body\">Enable the crosshair to display full-width and full-height guide lines that follow your cursor. This helps with visual alignment when comparing element positions across the page.<\/div><\/div>\r\n\r\n <h3 class=\"wg-h3\">Eyedropper<\/h3>\r\n <div class=\"wg-card\"><div class=\"wg-ft-title\">Color Sampling<\/div><div class=\"wg-ft-body\">The eyedropper uses the browser's native EyeDropper API to pick any color from the screen - including colors outside the browser window. Each picked color is saved to a palette strip that persists during the session. Click any saved swatch to copy it.<\/div><\/div>\r\n\r\n <h3 class=\"wg-h3\">Full Page Capture<\/h3>\r\n <div class=\"wg-card\"><div class=\"wg-ft-title\">Capturing the Entire Page<\/div><div class=\"wg-ft-body\">Click the capture button in the Designer tab to take a Full Page Capture. Webstractor scrolls through the entire page, takes viewport-sized screenshots at each position, and stitches them into one tall image. Choose the output format (PNG, JPG, WebP, AVIF) before capturing.<\/div><\/div>\r\n <\/section>\r\n\r\n <!-- ===================== EXTRACTOR ===================== -->\r\n <section class=\"wg-section\" id=\"extractor\">\r\n <h2 class=\"wg-h2\">Extractor<\/h2>\r\n <p class=\"wg-p\">The Extractor automatically discovers and lists all visual assets on the current page. Browse, filter, convert, and download images, SVGs, and GIFs individually or as a ZIP bundle.<\/p>\r\n\r\n <h3 class=\"wg-h3\">Asset Types<\/h3>\r\n <div class=\"wg-card\"><div class=\"wg-ft-title\">Images<\/div><div class=\"wg-ft-body\">Detects all raster images on the page - from <code class=\"wg-code\"><img><\/code> elements, <code class=\"wg-code\"><picture><\/code>\/<code class=\"wg-code\"><source><\/code> elements, and CSS background-image properties. Displays each image as a thumbnail with dimensions (width x height) and source URL.<\/div><\/div>\r\n <div class=\"wg-card\"><div class=\"wg-ft-title\">SVG<\/div><div class=\"wg-ft-body\">Finds all inline SVG elements in the page DOM. SVGs can be downloaded as .svg files directly. The original SVG markup is preserved.<\/div><\/div>\r\n <div class=\"wg-card\"><div class=\"wg-ft-title\">GIF<\/div><div class=\"wg-ft-body\">Animated GIF images are detected and categorized separately from static images, making it easy to find and download animations.<\/div><\/div>\r\n\r\n <h3 class=\"wg-h3\">Type Filter<\/h3>\r\n <div class=\"wg-card\"><div class=\"wg-ft-title\">Filter by Asset Type<\/div><div class=\"wg-ft-body\">Filter the asset list by type - <strong>All<\/strong>, <strong>Image<\/strong>, <strong>GIF<\/strong>, or <strong>SVG<\/strong>. The filter buttons show the count of each asset type found on the page.<\/div><\/div>\r\n\r\n <h3 class=\"wg-h3\">Size Filter<\/h3>\r\n <div class=\"wg-card\"><div class=\"wg-ft-title\">Filter by Image Dimensions<\/div><div class=\"wg-ft-body\">Filter assets by their pixel dimensions using five size categories. Each category can be toggled on\/off independently:<\/div><div style=\"margin-top:10px;display:flex;flex-wrap:wrap;gap:6px\"><span class=\"wg-tag\">Tiny: ≤150px<\/span><span class=\"wg-tag\">Small: 151-360px<\/span><span class=\"wg-tag\">Medium: 361-720px<\/span><span class=\"wg-tag\">Large: 721-1200px<\/span><span class=\"wg-tag\">XL: >1200px<\/span><\/div><\/div>\r\n\r\n <h3 class=\"wg-h3\">Image Format Converter<\/h3>\r\n <div class=\"wg-card\"><div class=\"wg-ft-title\">Convert Before Downloading<\/div><div class=\"wg-ft-body\">Before downloading, select a target format from the Image Format dropdown: <strong>Original<\/strong> (keep as-is), <strong>PNG<\/strong> (lossless), <strong>JPG<\/strong> (compressed), <strong>WebP<\/strong> (modern, smaller), or <strong>AVIF<\/strong> (next-gen, smallest). All conversion is done locally in the browser using Canvas API and WebAssembly - no files are uploaded to any server.<\/div><\/div>\r\n\r\n <h3 class=\"wg-h3\">Selection & Download<\/h3>\r\n <div class=\"wg-card\"><div class=\"wg-ft-title\">Select & Download Individually<\/div><div class=\"wg-ft-body\">Click any asset thumbnail to select it. Use \"Select All\" and \"Deselect\" buttons for bulk operations. Click the download button to download selected assets.<\/div><\/div>\r\n <div class=\"wg-card\"><div class=\"wg-ft-title\">ZIP Download<\/div><div class=\"wg-ft-body\">When multiple assets are selected and the ZIP toggle is enabled, all selected assets are bundled into a single ZIP file and downloaded at once. The ZIP is created locally in the browser.<\/div><\/div>\r\n <\/section>\r\n\r\n <!-- ===================== CONTEXT MENU ===================== -->\r\n <section class=\"wg-section\" id=\"context-menu\">\r\n <h2 class=\"wg-h2\">Context Menu<\/h2>\r\n <p class=\"wg-p\">Right-click on any web page to access Webstractor tools directly from the browser's context menu - no need to open the panel first.<\/p>\r\n\r\n <h3 class=\"wg-h3\">Available Actions<\/h3>\r\n <div class=\"wg-card\"><div class=\"wg-ft-title\">Inspect with Webstractor<\/div><div class=\"wg-ft-body\">Activates the element inspector and immediately targets the element you right-clicked. The Webstractor panel opens with the Inspector tab showing the element's CSS, typography, and box model.<\/div><\/div>\r\n <div class=\"wg-card\"><div class=\"wg-ft-title\">Capture Full Page as<\/div><div class=\"wg-ft-body\">Right-clicking and choosing a format under \"Capture Full Page as\" (PNG, JPG, WEBP, or AVIF) starts a Full Page Capture of the entire scrollable page. The stitched image is converted to the chosen format and saved to your downloads folder.<\/div><\/div>\r\n <div class=\"wg-card\"><div class=\"wg-ft-title\">Eyedropper<\/div><div class=\"wg-ft-body\">Opens the native browser EyeDropper to pick any color from the screen. The picked color is stored in the eyedropper palette in the Designer tab.<\/div><\/div>\r\n <div class=\"wg-card\"><div class=\"wg-ft-title\">Save Image As...<\/div><div class=\"wg-ft-body\">When right-clicking on an image, a submenu appears with format conversion options:<\/div><div style=\"margin-top:10px;display:flex;flex-wrap:wrap;gap:6px\"><span class=\"wg-tag\">WebP<\/span><span class=\"wg-tag\">PNG<\/span><span class=\"wg-tag\">JPG<\/span><span class=\"wg-tag\">AVIF<\/span><\/div><div style=\"margin-top:8px\">The image is automatically converted to the selected format and downloaded. Conversion happens entirely in your browser.<\/div><\/div>\r\n <\/section>\r\n\r\n <!-- ===================== FAQ ===================== -->\r\n <section class=\"wg-section\" id=\"faq\">\r\n <h2 class=\"wg-h2\">Frequently Asked Questions<\/h2>\r\n\r\n <div class=\"wg-card\"><div class=\"wg-ft-title\">Is Webstractor free? Is there a paywall?<\/div><div class=\"wg-ft-body\">Yes, Webstractor is completely free. There are no paywalls, no premium tiers, no subscription plans, and no feature gating. Every tool is fully available from the moment you install the extension.<\/div><\/div>\r\n <div class=\"wg-card\"><div class=\"wg-ft-title\">Why doesn't Webstractor work on some pages?<\/div><div class=\"wg-ft-body\">Chrome prevents extensions from injecting content scripts on internal pages like <code class=\"wg-code\">chrome:\/\/<\/code>, <code class=\"wg-code\">chrome-extension:\/\/<\/code>, the Chrome Web Store, and the New Tab page. This is a browser security restriction, not a Webstractor limitation.<\/div><\/div>\r\n <div class=\"wg-card\"><div class=\"wg-ft-title\">How do I remove a guideline?<\/div><div class=\"wg-ft-body\">Click directly on the guideline itself. It will be removed instantly.<\/div><\/div>\r\n <div class=\"wg-card\"><div class=\"wg-ft-title\">Why does the Full Page Capture have visible seams?<\/div><div class=\"wg-ft-body\">Some pages with complex CSS animations, parallax effects, or lazy-loaded content may show minor artifacts at segment boundaries. Disabling animations before capturing can help. Sticky headers are automatically hidden after the first segment, but elements that change appearance during scroll may cause inconsistencies.<\/div><\/div>\r\n <div class=\"wg-card\"><div class=\"wg-ft-title\">Can I use Webstractor in Incognito mode?<\/div><div class=\"wg-ft-body\">Yes. Go to <code class=\"wg-code\">chrome:\/\/extensions<\/code>, find Webstractor, click \"Details\", and enable \"Allow in Incognito\".<\/div><\/div>\r\n <div class=\"wg-card\"><div class=\"wg-ft-title\">What image formats are supported for conversion?<\/div><div class=\"wg-ft-body\">Webstractor supports conversion between <strong>PNG<\/strong> (lossless, best for UI screenshots), <strong>JPG<\/strong> (lossy, smaller files), <strong>WebP<\/strong> (modern format, significantly smaller than PNG\/JPG), and <strong>AVIF<\/strong> (next-generation format, smallest files). AVIF encoding uses a WebAssembly module and may take a few seconds for large images. All conversion is done locally - no images are ever uploaded to any server.<\/div><\/div>\r\n <div class=\"wg-card\"><div class=\"wg-ft-title\">Where are exported files saved?<\/div><div class=\"wg-ft-body\">All downloads - screenshots, assets, PDFs, fonts, and ZIP bundles - go to your browser's default download folder. Filenames are automatically generated based on the page title and timestamp.<\/div><\/div>\r\n <div class=\"wg-card\"><div class=\"wg-ft-title\">Does Webstractor collect any data?<\/div><div class=\"wg-ft-body\">No. Webstractor has zero tracking, zero analytics, and zero server-side components. Everything runs locally in your browser. There is no telemetry and no usage data collection. The only time any network request is made is when you actively download or preview a font or image - in that case your browser fetches the file directly from its original source (e.g., Google Fonts), with no intermediary and nothing stored by Webstractor.<\/div><\/div>\r\n <div class=\"wg-card\"><div class=\"wg-ft-title\">How do I update Webstractor?<\/div><div class=\"wg-ft-body\">If installed from the Chrome Web Store, updates are delivered automatically. If installed manually in developer mode, download the latest version, go to <code class=\"wg-code\">chrome:\/\/extensions<\/code>, remove the old version, and load the new one.<\/div><\/div>\r\n <div class=\"wg-card\"><div class=\"wg-ft-title\">The extension panel is off-screen - how do I reset its position?<\/div><div class=\"wg-ft-body\">Close and reopen the panel by clicking the Webstractor toolbar icon twice. The panel resets to the top-right corner each time it opens.<\/div><\/div>\r\n <div class=\"wg-card\"><div class=\"wg-ft-title\">Can I use Webstractor on mobile or Android?<\/div><div class=\"wg-ft-body\">No, Webstractor is a desktop browser extension. It requires a Chromium-based desktop browser to run.<\/div><\/div>\r\n <div class=\"wg-card\"><div class=\"wg-ft-title\">Does Webstractor work on browsers other than Chrome?<\/div><div class=\"wg-ft-body\">Yes. Webstractor works on any Chromium-based browser: Google Chrome, Microsoft Edge, Brave, Opera, Vivaldi, and Arc.<\/div><\/div>\r\n <div class=\"wg-card\"><div class=\"wg-ft-title\">Why are some images not showing in the Extractor?<\/div><div class=\"wg-ft-body\">Some images are loaded lazily or rendered dynamically via JavaScript. Scroll through the entire page first to trigger lazy-loaded content, then open the Extractor tab to re-scan.<\/div><\/div>\r\n <div class=\"wg-card\"><div class=\"wg-ft-title\">Can I inspect elements inside iframes?<\/div><div class=\"wg-ft-body\">Cross-origin iframes are protected by the browser's same-origin policy. The Inspector can only access elements in the main document and same-origin iframes.<\/div><\/div>\r\n <div class=\"wg-card\"><div class=\"wg-ft-title\">Why do I see font errors (like 'Failed to decode downloaded font' or OTS errors) in the extension manager?<\/div><div class=\"wg-ft-body\">These errors come from the website itself, not Webstractor. Some sites serve broken, corrupted, or anti-hotlink-protected font files that the browser cannot decode. Webstractor never loads fonts on its own - it only reads the fonts the page has already loaded. Because the extension runs on that page, Chrome attributes these page-level font errors to the extension's error console. They are harmless, don't affect Webstractor's functionality, and can be safely ignored.<\/div><\/div>\r\n <div class=\"wg-card\"><div class=\"wg-ft-title\">Why can't I download some fonts (like Arial or Verdana)?<\/div><div class=\"wg-ft-body\">System fonts (Arial, Verdana, Times New Roman, and similar) are built into the operating system and have no downloadable web source - they are not hosted on Google Fonts, and most pages use them as a fallback rather than loading them as web fonts. Webstractor shows these as \"System\" fonts, which cannot be downloaded. Fonts that a page actually loads as web fonts (from Google Fonts or the site's own CDN) can be downloaded normally.<\/div><\/div>\r\n <div class=\"wg-card\"><div class=\"wg-ft-title\">Why is some font marked as protected or not downloadable?<\/div><div class=\"wg-ft-body\">Some fonts are protected by their provider and can only be served to that website, so a direct download is blocked. Nothing is wrong with the extension - those fonts simply cannot be downloaded.<\/div><\/div>\r\n <div class=\"wg-card\"><div class=\"wg-ft-title\">Webstractor stopped working or glitched - what should I do?<\/div><div class=\"wg-ft-body\">Reload the page first - and if that does not help, restart your browser or reload the extension from chrome:\/\/extensions. Every website is different: they use different frameworks, scripts, and code that can conflict with each other, so from time to time something may glitch, break, or not render as expected. This is completely normal and to be expected. A simple page reload fixes it in most cases. If the issue keeps happening on one specific site, you can report it and mention which site it was - but usually a reload is all you need.<\/div><\/div>\r\n <div class=\"wg-card\"><div class=\"wg-ft-title\">Why are my live edits not saved after I reload the page?<\/div><div class=\"wg-ft-body\">Webstractor's live editing works directly on the page in real time - it does not modify the website's source files or its server. The changes are applied only to the rendered page in your browser, so they are temporary and disappear when you reload, navigate away, or close the tab. This is how a browser extension works: it cannot permanently rewrite a website's code for every visitor. If you want to keep your work, you can always copy the updated CSS (via the \"Copy CSS\" button) while the element is still edited, and save it yourself, for example in your own stylesheet or project.<\/div><\/div>\r\n <div class=\"wg-card\"><div class=\"wg-ft-title\">Why does the Accessibility audit show so many fails?<\/div><div class=\"wg-ft-body\">An accessibility audit checks a page against a large set of WCAG rules, so it is completely normal for real websites - especially busy ones - to report many fails. It does not mean the site is broken; it simply highlights areas (contrast, missing labels, headings, and similar) that are worth improving. Use the report as a list of suggestions rather than a pass\/fail judgement.<\/div><\/div>\r\n <div class=\"wg-card\"><div class=\"wg-ft-title\">Why does Webstractor ask for so many permissions?<\/div><div class=\"wg-ft-body\">Webstractor is a full inspection toolkit, so each permission maps to one real feature and nothing is used for tracking. \"Read and change all your data\" (<code class=\"wg-code\"><all_urls><\/code>) lets you inspect and capture any site you open. <code class=\"wg-code\">tabs<\/code> + <code class=\"wg-code\">scripting<\/code> run the inspector, <code class=\"wg-code\">webRequest<\/code> \/ <code class=\"wg-code\">declarativeNetRequest<\/code> make the multi-device preview work on frame-blocking sites, <code class=\"wg-code\">downloads<\/code> saves your exports, and <code class=\"wg-code\">storage<\/code> keeps only your local preferences. All of it stays on your device.<\/div><\/div>\r\n <\/section>\r\n\r\n <!-- ===================== PRIVACY ===================== -->\r\n <section class=\"wg-section\" id=\"privacy\">\r\n <h2 class=\"wg-h2\">Privacy Policy<\/h2>\r\n <p class=\"wg-p\"><strong>Effective Date:<\/strong> August 14, 2026  ·  <strong>Developer:<\/strong> Kristijonas G. (Vilaan)  ·  <strong>Website:<\/strong> <a href=\"https:\/\/vilaan.com\" target=\"_blank\" rel=\"noopener noreferrer\">https:\/\/vilaan.com<\/a>  ·  <strong>Contact Email:<\/strong> <a href=\"mailto:info@vilaan.com\">info@vilaan.com<\/a><\/p>\r\n\r\n <h3 class=\"wg-h3\">1. Overview & Privacy Philosophy<\/h3>\r\n <p class=\"wg-p\">Webstractor is built with a strict privacy-first architecture. I believe that developer and design tools should respect your privacy entirely.<\/p>\r\n <div class=\"wg-card highlight\">\r\n <div style=\"color:var(--text);font-size:14px;line-height:1.8;font-weight:500\"><strong>Webstractor does NOT collect, store, transmit, or process any personal data, usage analytics, or tracking metrics.<\/strong> Extension operations happen strictly within your local web browser instance.<\/div>\r\n <\/div>\r\n\r\n <h3 class=\"wg-h3\">2. Network Requests & Third-Party Services<\/h3>\r\n <p class=\"wg-p\">Webstractor does not use any developer-owned backend servers, analytics tools, or telemetry frameworks. However, to provide specific features, your browser will make direct client-side requests:<\/p>\r\n <div class=\"wg-card\"><div class=\"wg-ft-title\">Direct Media & Font Downloads<\/div><div class=\"wg-ft-body\">When you actively choose to preview or download a font (e.g., from Google Fonts via <code class=\"wg-code\">fonts.googleapis.com<\/code> or <code class=\"wg-code\">fonts.gstatic.com<\/code>) or an image, your browser makes a direct HTTP <code class=\"wg-code\">GET<\/code> request to the original source server.<\/div><\/div>\r\n <div class=\"wg-card\"><div class=\"wg-ft-title\">No Intermediaries<\/div><div class=\"wg-ft-body\">I do not route these requests through any of my own servers, nor do I intercept, process, or store them.<\/div><\/div>\r\n <div class=\"wg-card\"><div class=\"wg-ft-title\">Standard Browser Data<\/div><div class=\"wg-ft-body\">As with any standard web connection, the target server (e.g., Google or the website's CDN) will receive your standard technical information, such as your IP address and User-Agent string. This data exchange is governed by the respective privacy policies of those third-party servers.<\/div><\/div>\r\n\r\n <h3 class=\"wg-h3\">3. Local Storage and Permissions<\/h3>\r\n <p class=\"wg-p\">Webstractor requires certain browser permissions to function as a design and developer inspection toolkit. Here is how these permissions are used locally:<\/p>\r\n <div class=\"wg-card\"><div class=\"wg-ft-title\">Active Tab & Web Page Inspection<\/div><div class=\"wg-ft-body\">Used exclusively to read DOM elements, computed CSS styles, and media assets on the page you explicitly choose to inspect.<\/div><\/div>\r\n <div class=\"wg-card\"><div class=\"wg-ft-title\">Storage Permission (chrome.storage.local)<\/div><div class=\"wg-ft-body\">Used solely to persist your local user preferences (such as your chosen default image format, custom device presets, active color format preferences, and workspace layouts). This data never leaves your device.<\/div><\/div>\r\n <div class=\"wg-card\"><div class=\"wg-ft-title\">Downloads Permission<\/div><div class=\"wg-ft-body\">Used exclusively to save exported files (screenshots, converted images, SVG files, font files, accessibility reports, or ZIP archives) directly to your local default downloads directory.<\/div><\/div>\r\n <div class=\"wg-card\"><div class=\"wg-ft-title\">Native EyeDropper API<\/div><div class=\"wg-ft-body\">Used locally to sample color values from your screen when requested.<\/div><\/div>\r\n\r\n <h3 class=\"wg-h3\">4. Voluntary Support (Donations)<\/h3>\r\n <p class=\"wg-p\">Webstractor is 100% free with zero paywalls. The extension includes an optional support link (e.g., to Ko-fi) allowing you to support my work. Clicking this link opens a third-party website in a new browser tab. I do not send any user identifiers or session data to these platforms.<\/p>\r\n\r\n <h3 class=\"wg-h3\">5. Changes & Contact<\/h3>\r\n <p class=\"wg-p\">If I update this Privacy Policy in the future, the revised document will be published at <a href=\"https:\/\/vilaan.com\" target=\"_blank\" rel=\"noopener noreferrer\">https:\/\/vilaan.com<\/a> with an updated effective date. My core commitment to zero data collection will remain unchanged.<\/p>\r\n <p class=\"wg-p\">If you have any questions regarding this Privacy Policy, please contact me:<\/p>\r\n <div class=\"wg-card\">\r\n <div style=\"color:var(--text);font-size:14px;line-height:1.8\">\r\n <strong>Kristijonas G.<\/strong><br>\r\n Website: <a href=\"https:\/\/vilaan.com\" target=\"_blank\" rel=\"noopener noreferrer\">https:\/\/vilaan.com<\/a><br>\r\n Email: <a href=\"mailto:info@vilaan.com\">info@vilaan.com<\/a>\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n\r\n <!-- ===================== TERMS ===================== -->\r\n <section class=\"wg-section\" id=\"terms\">\r\n <h2 class=\"wg-h2\">Terms of Service & Legal Disclaimer<\/h2>\r\n <p class=\"wg-p\"><strong>Effective Date:<\/strong> August 14, 2026  ·  <strong>Developer & Owner:<\/strong> Kristijonas G. (Vilaan)  ·  <strong>Website:<\/strong> <a href=\"https:\/\/vilaan.com\" target=\"_blank\" rel=\"noopener noreferrer\">https:\/\/vilaan.com<\/a>  ·  <strong>Contact Email:<\/strong> <a href=\"mailto:info@vilaan.com\">info@vilaan.com<\/a><\/p>\r\n\r\n <h3 class=\"wg-h3\">1. Acceptance of Terms<\/h3>\r\n <p class=\"wg-p\">By downloading, installing, accessing, or using the Webstractor Chrome extension (\"the Extension\"), you agree to be legally bound by these Terms of Service (\"Terms\"). If you do not agree to these Terms, you must uninstall and discontinue use of the Extension immediately.<\/p>\r\n\r\n <h3 class=\"wg-h3\">2. Intellectual Property Rights & Ownership<\/h3>\r\n <p class=\"wg-p\"><strong>Webstractor is proprietary software.<\/strong> It is provided as free-to-use software (Freeware), but it is <strong>NOT open-source software<\/strong>.<\/p>\r\n <p class=\"wg-p\">All rights, titles, and interests in and to Webstractor - including but not limited to its source code, user interface, features, algorithms, and documentation - are and will remain my exclusive property (<strong>Kristijonas G. \/ Vilaan<\/strong>). The Extension is protected by copyright and other applicable intellectual property laws.<\/p>\r\n\r\n <h3 class=\"wg-h3\">3. Proprietary License Restrictions<\/h3>\r\n <p class=\"wg-p\">You are granted a limited, non-exclusive, non-transferable, revocable license to install and use Webstractor solely for your personal or commercial workflow.<\/p>\r\n <p class=\"wg-p\"><strong>Strict Restrictions: You explicitly agree that you shall NOT:<\/strong><\/p>\r\n <div class=\"wg-card\"><div class=\"wg-ft-title\">1. Resell or Monetize<\/div><div class=\"wg-ft-body\">Sell, rent, lease, distribute, or otherwise commercially exploit the Extension or its source code.<\/div><\/div>\r\n <div class=\"wg-card\"><div class=\"wg-ft-title\">2. Copy or Clone<\/div><div class=\"wg-ft-body\">Copy, duplicate, clone, or create derivative works based on the Extension.<\/div><\/div>\r\n <div class=\"wg-card\"><div class=\"wg-ft-title\">3. Reverse Engineer<\/div><div class=\"wg-ft-body\">Decompile, disassemble, or attempt to derive the source code of Webstractor, except as permitted by mandatory law.<\/div><\/div>\r\n <div class=\"wg-card\"><div class=\"wg-ft-title\">4. Redistribute<\/div><div class=\"wg-ft-body\">Re-upload or re-publish Webstractor (or modified versions) to the Chrome Web Store, GitHub, or any other platform without my prior written permission.<\/div><\/div>\r\n\r\n <h3 class=\"wg-h3\">4. Third-Party Content & Network Requests<\/h3>\r\n <p class=\"wg-p\">Webstractor provides local tools to inspect, convert, and download assets (such as images, SVGs, and web fonts) from third-party websites or CDNs (such as Google Fonts).<\/p>\r\n <div class=\"wg-card\"><div class=\"wg-ft-title\">Direct Connections<\/div><div class=\"wg-ft-body\">When previewing or downloading these assets, your browser connects directly to the third-party servers. Your use of those assets is subject to the terms of service and privacy policies of their respective owners.<\/div><\/div>\r\n <div class=\"wg-card\"><div class=\"wg-ft-title\">Respect for Third-Party Rights<\/div><div class=\"wg-ft-body\">You acknowledge that third-party assets may be protected by copyright or licensing agreements. You are solely responsible for ensuring your use or redistribution of any extracted media complies with applicable laws and the original owner's terms.<\/div><\/div>\r\n\r\n <h3 class=\"wg-h3\">5. Disclaimer of Warranties (\"AS IS\")<\/h3>\r\n <div class=\"wg-card highlight\">\r\n <div style=\"color:var(--text);font-size:14px;line-height:1.8;font-weight:500\">\r\n WEBSTRACTOR IS PROVIDED ON AN <strong>\"AS IS\"<\/strong> AND <strong>\"AS AVAILABLE\"<\/strong> BASIS, WITHOUT WARRANTIES OF ANY KIND.\r\n <br><br>\r\n I DO NOT WARRANT THAT:\r\n <br>1. THE EXTENSION WILL BE BUG-FREE, SECURE, OR COMPATIBLE WITH EVERY WEBSITE OR FUTURE BROWSER UPDATE.\r\n <br>2. FULL-PAGE CAPTURES, FILE CONVERSIONS, OR ACCESSIBILITY AUDITS WILL ALWAYS BE 100% ACCURATE.\r\n <\/div>\r\n <\/div>\r\n\r\n <h3 class=\"wg-h3\">6. Limitation of Liability<\/h3>\r\n <p class=\"wg-p\">TO THE MAXIMUM EXTENT PERMITTED BY APPLICABLE LAW, IN NO EVENT SHALL I (KRISTIJONAS G. \/ VILAAN) BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, CONSEQUENTIAL, OR PUNITIVE DAMAGES, OR ANY LOSS OF PROFITS, DATA, OR BUSINESS INTERRUPTIONS ARISING OUT OF:<\/p>\r\n <div class=\"wg-card\"><div class=\"wg-ft-title\">Your Use of the Extension<\/div><div class=\"wg-ft-body\">Your use of or inability to use the Extension.<\/div><\/div>\r\n <div class=\"wg-card\"><div class=\"wg-ft-title\">Unanticipated Behavior<\/div><div class=\"wg-ft-body\">Unanticipated behavior or data loss resulting from local file conversions.<\/div><\/div>\r\n <div class=\"wg-card\"><div class=\"wg-ft-title\">Third-Party Media<\/div><div class=\"wg-ft-body\">Your use or misuse of third-party media and assets extracted using the Extension.<\/div><\/div>\r\n\r\n <h3 class=\"wg-h3\">7. Termination<\/h3>\r\n <p class=\"wg-p\">This license is effective until terminated. Your rights under this license will terminate automatically if you fail to comply with these Terms. Upon termination, you must cease all use of Webstractor.<\/p>\r\n\r\n <h3 class=\"wg-h3\">8. Contact Information<\/h3>\r\n <p class=\"wg-p\">For questions regarding these Terms of Service, please contact me:<\/p>\r\n <div class=\"wg-card\">\r\n <div style=\"color:var(--text);font-size:14px;line-height:1.8\">\r\n <strong>Kristijonas G. (Vilaan)<\/strong><br>\r\n Website: <a href=\"https:\/\/vilaan.com\" target=\"_blank\" rel=\"noopener noreferrer\">https:\/\/vilaan.com<\/a><br>\r\n Email: <a href=\"mailto:info@vilaan.com\">info@vilaan.com<\/a>\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n\r\n <\/div>\r\n <\/main>\r\n <\/div>\r\n<\/div>\r\n\r\n<script>\r\n(function(){\r\n var nav = document.getElementById('wgNav');\r\n var burger = document.getElementById('wgBurger');\r\n var overlay = document.getElementById('wgOverlay');\r\n var navButtons = nav.querySelectorAll('button[data-section]');\r\n var sections = document.querySelectorAll('.wg-section');\r\n var pills = document.querySelectorAll('.wg-pill[data-goto]');\r\n\r\n function show(id){\r\n sections.forEach(function(s){ s.classList.toggle('active', s.id === id); });\r\n navButtons.forEach(function(b){ b.classList.toggle('active', b.getAttribute('data-section') === id); });\r\n var main = document.querySelector('.wg-main');\r\n if(main) main.scrollTop = 0;\r\n }\r\n\r\n function closeMenu(){\r\n nav.classList.remove('open');\r\n overlay.classList.remove('open');\r\n }\r\n function openMenu(){\r\n nav.classList.add('open');\r\n overlay.classList.add('open');\r\n }\r\n\r\n navButtons.forEach(function(b){\r\n b.addEventListener('click', function(){\r\n show(b.getAttribute('data-section'));\r\n closeMenu();\r\n });\r\n });\r\n pills.forEach(function(p){\r\n p.addEventListener('click', function(){ show(p.getAttribute('data-goto')); });\r\n });\r\n if(burger) burger.addEventListener('click', function(e){ e.stopPropagation(); nav.classList.contains('open') ? closeMenu() : openMenu(); });\r\n if(overlay) overlay.addEventListener('click', closeMenu);\r\n\r\n \/\/ Deep-link support: allow opening a specific section via #privacy, #terms, etc.\r\n var initial = location.hash.replace('#','');\r\n if(initial && document.getElementById(initial)){ show(initial); } else { show('welcome'); }\r\n window.addEventListener('hashchange', function(){\r\n var h = location.hash.replace('#','');\r\n if(h && document.getElementById(h)) show(h);\r\n });\r\n})();\r\n<\/script>\r\n<\/body>\r\n<\/html>\r\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>Webstractor – Help & Guide Help & Guide Webstractor – All-in-one tools for designers & developers Welcome Inspector Viewer Designer Extractor Context Menu FAQ Privacy Policy Terms of Service Welcome to Webstractor Webstractor is the ultimate all-in-one browser toolkit built for designers and developers who demand precision, speed, and depth. Inspect every pixel, dissect any […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_header_footer","meta":{"footnotes":""},"class_list":["post-8763","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/vilaan.com\/en\/wp-json\/wp\/v2\/pages\/8763","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/vilaan.com\/en\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/vilaan.com\/en\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/vilaan.com\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/vilaan.com\/en\/wp-json\/wp\/v2\/comments?post=8763"}],"version-history":[{"count":13,"href":"https:\/\/vilaan.com\/en\/wp-json\/wp\/v2\/pages\/8763\/revisions"}],"predecessor-version":[{"id":8789,"href":"https:\/\/vilaan.com\/en\/wp-json\/wp\/v2\/pages\/8763\/revisions\/8789"}],"wp:attachment":[{"href":"https:\/\/vilaan.com\/en\/wp-json\/wp\/v2\/media?parent=8763"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}