https://kigo.studio/_nuxt/DjyF4XwX.js

1const __vite__mapDeps=(i,m=__vite__mapDeps,d=(m.f||(m.f=["./BaN_nPat.js","./BzIJxrYs.js","./entry.YAdjvOer.css","./FooterComponent.BjueVZP3.css"])))=>i.map(i=>d[i]);
2import{_ as Rs,f as Us,m as as,a3 as Ds,g as Fs,j as Os,r as S,i,u as js,M as K,h as Js,k as Ns,n as Gs,l as Ws,X as Ks,c as d,a as s,t as r,q as l,v,d as b,N as A,O as U,a4 as Zs,x as D,F as Qs,p as Xs,s as is,w as Ys,S as st,o as c,z as tt,A as et}from"./BzIJxrYs.js";const ot=window.setInterval,nt={class:"scrollable"},lt={class:"home__content"},rt={class:"home__group"},at={class:"hero__text"},it={class:"hero__agency"},ct={class:"hero__content"},ut={class:"hero__main-title"},pt={class:"generator__container"},dt={class:"generator__info"},_t={class:"section-content"},ht={class:"info-card"},gt={class:"label"},vt={class:"label"},mt={class:"label"},ft={class:"label"},yt={class:"hint"},bt={class:"contact__input contact__input--checkbox button"},wt={class:"checkbox-label"},kt={class:"checkbox-text"},St=["disabled"],Ct={key:0,alt:"loading icon",src:"https://api.iconify.design/eos-icons:three-dots-loading.svg?color=%23ffffff"},xt={key:1,alt:"generate css icon",src:"https://api.iconify.design/material-symbols:chip-extraction-rounded.svg?color=%23ffffff"},$t={key:0,alt:"loading icon",src:"https://api.iconify.design/eos-icons:three-dots-loading.svg?color=%23000000"},Lt={key:1,alt:"generate css icon",src:"https://api.iconify.design/material-symbols:chip-extraction-rounded.svg?color=%23000000"},Tt={key:0,class:"error-message"},Mt={class:"generator__results"},Ht={class:"section-content section-content--grey"},qt={class:"results-header"},At={class:"results-header__title"},Et={key:0,width:"16",height:"16",viewBox:"0 0 24 24",fill:"none",xmlns:"http://www.w3.org/2000/svg"},Pt={key:1,width:"16",height:"16",viewBox:"0 0 24 24",fill:"none",xmlns:"http://www.w3.org/2000/svg"},Bt={class:"results-output"},It=["value","placeholder"],Vt={key:0,class:"results-status"},zt={class:"generator__instructions"},Rt={class:"section-content section-content--grey"},Ut={class:"instructions__title"},Dt={class:"instruction-step"},Ft={class:"instruction-step__header"},Ot={class:"instruction-step__title"},jt=["innerHTML"],Jt={class:"instruction-step__note"},Nt={class:"code-block"},Gt={class:"code-block__header"},Wt={class:"code-block__label"},Kt={key:0,width:"14",height:"14",viewBox:"0 0 24 24",fill:"none",xmlns:"http://www.w3.org/2000/svg"},Zt={key:1,width:"14",height:"14",viewBox:"0 0 24 24",fill:"none",xmlns:"http://www.w3.org/2000/svg"},Qt={class:"code-block__content"},Xt=["innerHTML"],Yt={class:"instruction-step"},se={class:"instruction-step__header"},te={class:"instruction-step__title"},ee=["innerHTML"],oe={class:"code-block"},ne={class:"code-block__header"},le={class:"code-block__label"},re={key:0,width:"14",height:"14",viewBox:"0 0 24 24",fill:"none",xmlns:"http://www.w3.org/2000/svg"},ae={key:1,width:"14",height:"14",viewBox:"0 0 24 24",fill:"none",xmlns:"http://www.w3.org/2000/svg"},ie={class:"code-block__content"},ce=["innerHTML"],ue={class:"instruction-step"},pe={class:"instruction-step__header"},de={class:"instruction-step__title"},_e=["innerHTML"],he={class:"code-block"},ge={class:"code-block__header"},ve={class:"code-block__label"},me={key:0,width:"14",height:"14",viewBox:"0 0 24 24",fill:"none",xmlns:"http://www.w3.org/2000/svg"},fe={key:1,width:"14",height:"14",viewBox:"0 0 24 24",fill:"none",xmlns:"http://www.w3.org/2000/svg"},ye={class:"code-block__content"},be=["innerHTML"],we={class:"faqs"},ke={class:"section-content"},Se={class:"faqs__title"},Ce={class:"faqs__list"},xe=["onClick"],$e={class:"faqs__header"},Le={class:"faqs__question"},Te={class:"faqs__answer"},Me=["innerHTML"],He={__name:"critical-css-generator",props:{changeCursorSize:{type:Function,default:()=>{}}},setup(cs){const{t:e,tm:Z}=Us();as.registerPlugin(Ds);const E=Fs(),Q=Os(),X=o=>{const t=o.match(/^\/(en|es)(\/|$)/);return t?t[1]:"en"},F=S(null);let O=null,C=null,j=!1,L=null,T=null,J=null;const Y=S(!1),us=i(()=>`critical-css-generator ${X(E.path)}`),g=i(()=>`critical-css-generator.${X(E.path)}`),ps=tt(()=>et(()=>import("./BaN_nPat.js"),__vite__mapDeps([0,1,2,3]),import.meta.url)),w=cs,ss=i(()=>{const o=Z("routes.tools.critical_css_generator.faqs.items");return!Array.isArray(o)||o.length===0?null:JSON.stringify({"@context":"https://schema.org","@type":"FAQPage",mainEntity:o.map(t=>

2({"@type":"Question",name:t.question,acceptedAnswer:{"@type":"Answer",text:t.answer.replace(/<[^>]*>/g,"")}}))})});js({htmlAttrs:i(()=>Q.value.htmlAttrs),link:i(()=>[...Q.value.link,{rel:"canonical",href:`https://kigo.studio${E.path}`}]),script:i(()=>[{type:"application/ld+json",children:JSON.stringify({"@context":"https://schema.org","@type":"WebApplication",name:`${e("routes.tools.critical_css_generator.meta.title")}`,url:`https://kigo.studio${E.path}`,description:e("routes.tools.critical_css_generator.meta.description"),applicationCategory:"DeveloperApplication",operatingSystem:"Any",offers:{"@type":"Offer",price:"0",priceCurrency:"USD"},publisher:{"@type":"Organization",name:"Kigo Studio",url:"https://kigo.studio",logo:"https://kigo.studio/logo.png",contactPoint:{"@type":"ContactPoint",email:"[email protected]",telephone:`${e("mobile_number")}`,contactType:"Customer Service",availableLanguage:[{"@type":"Language",name:"English",alternateName:"en"},{"@type":"Language",name:"Spanish",alternateName:"es"}]}}})},...ss.value?[{type:"application/ld+json",children:ss.value}]:[]])});const u=K({url:"",width:1920,height:1080,renderWaitTime:5e3,timeout:9e4,blockJSRequests:!1}),M=K({url:!1}),ds=/^https?:\/\/(?:www\.)?[-a-zA-Z0-9@:%._+~#=]{1,256}\.[a-zA-Z0-9()]{1,6}\b(?:[-a-zA-Z0-9()@:%_+.~#?&/=]*)$/,P=i(()=>ds.test(u.url.trim())),ts=i(()=>u.width>=280),es=i(()=>u.height>=400),os=i(()=>u.renderWaitTime>=0),_s=i(()=>P.value&&ts.value&&es.value&&os.value),{$isMobileDevice:ns}=Js();Ns(()=>u.url,()=>{M.url&&(M.url=!1)});const m=S("idle"),f=S(null),H=S(""),x=S(0),h=K({}),hs=i(()=>Z("routes.tools.critical_css_generator.faqs.items")),N=S(0),gs=o=>{N.value=N.value===o?-1:o};let $=null;const q=i(()=>m.value==="initiating"||m.value==="polling"),ls=i(()=>{switch(m.value){case"initiating":return e("routes.tools.critical_css_generator.status.initiating");case"polling":return x.value>0?e("routes.tools.critical_css_generator.status.processing",{seconds:x.value}):e("routes.tools.critical_css_generator.status.extracting");default:return e("routes.tools.critical_css_generator.status.generate")}}),vs=i(()=>{switch(m.value){case"initiating":return e("routes.tools.critical_css_generator.placeholder.initiating");case"polling":return e("routes.tools.critical_css_generator.placeholder.polling");case"error":return e("routes.tools.critical_css_generator.placeholder.error");case"success":return f.value||e("routes.tools.critical_css_generator.placeholder.default");default:return e("routes.tools.critical_css_generator.placeholder.default")}}),ms=i(()=>{const o=e("routes.tools.critical_css_generator.code_snippets.your_page"),t=e("routes.tools.critical_css_generator.code_snippets.critical_css_for"),n=e("routes.tools.critical_css_generator.code_snippets.css_placeholder");return`<style>
3  /* ${t} ${u.url||o} */
4${f.value||`  ${n}`}
5</style>`}),fs=i(()=>{const o=e("routes.tools.critical_css_generator.code_snippets.example");return`<html>
6  ...
7  <body>
8  ...
9    <link rel="stylesheet" href="/css/vendors.min.css">  // ${o}
10    <link rel="stylesheet" href="/css/style.min.css">    // ${o}
11  </body>
12</html>`}),ys=i(()=>{const o=e("routes.tools.critical_css_generator.code_snippets.page_loaded"),t=e("routes.tools.critical_css_generator.code_snippets.define_stylesheets"),n=e("routes.tools.critical_css_generator.code_snippets.example"),p=e("routes.tools.critical_css_generator.code_snippets.add_stylesheets"),a=e("routes.tools.critical_css_generator.code_snippets.separator"),k=e("routes.tools.critical_css_generator.code_snippets.all_loaded"),y=e("routes.tools.critical_css_generator.code_snippets.failed_load");return`window.addEventListener("DOMContentLoaded", function () {
13  console.log("${o}");
14  // ${t}
15  let stylesheets = [
16    // "/css/vendors.min.css", // ${n}
17    // "/css/style.min.css",   // ${n}
18    // ${p}
19  ];
20  // ${a}
21  let loadedCount = 0;
22  function checkAllStylesLoaded() {
23    loadedCount++;
24    if (loadedCount === stylesheets.length) {
25      console.log("${k}");
26    }
27  }
28  stylesheets.forEach(function (href) {
29    var link = document.createElement("link");
30    link.rel = "stylesheet";
31    link.href = href;
32    link.onload = checkAllStylesLoaded;
33    link.onerror = () => console.warn("${y}" + href);
34    document.head.appendChild(link);
35  });
36});`}),bs=i(()=>{const o=e("routes.tools.critical_css_generator.code_snippets.your_page"),t=e("routes.tools.critical_css_generator.code_snippets.critical_css_for"),n=e("routes.tools.critical_css_generator.code_snippets.css_placeholder"),p=u.url||o,a=f.value||`  ${n}`;return`<span class="hl-tag">&lt;style&gt;</span>
37  <span class="hl-comment">/* ${t} ${p} */</span>
38${a}
39<span class="hl-tag">&lt;/style&gt;</span>`}),ws=i(()=>{const o=e("routes.tools.critical_css_generator.code_snippets.example");return`<span class="hl-tag">&lt;html&gt;</span>
40  <span class="hl-punctuation">...</span>
41  <span class="hl-tag">&lt;body&gt;</span>
42  <span class="hl-punctuation">...</span>
43    <span class="hl-tag">&lt;link</span> <span class="hl-attr">rel</span>=<span class="hl-string">"stylesheet"</span> <span class="hl-attr">href</span>=<span class="hl-string">"/css/vendors.min.css"</span><span class="hl-tag">&gt;</span>  <span class="hl-comment">// ${o}</span>
44    <span class="hl-tag">&lt;link</span> <span class="hl-attr">rel</span>=<span class="hl-string">"stylesheet"</span> <span class="hl-attr">href</span>=<span class="hl-string">"/css/style.min.css"</span><span class="hl-tag">&gt;</span>    <span class="hl-comment">// ${o}</span>
45  <span class="hl-tag">&lt;/body&gt;</span>
46<span class="hl-tag">&lt;/html&gt;</span>`}),ks=i(()=>{const o=e("routes.tools.critical_css_generator.code_snippets.page_loaded"),t=e("routes.tools.critical_css_generator.code_snippets.define_stylesheets"),n=e("routes.tools.critical_css_generator.code_snippets.example"),p=e("routes.tools.critical_css_generator.code_snippets.add_stylesheets"),a=e("routes.tools.critical_css_generator.code_snippets.separator"),k=e("routes.tools.critical_css_generator.code_snippets.all_loaded"),y=e("routes.tools.critical_css_generator.code_snippets.failed_load");return`<span class="hl-variable">window</span>.<span class="hl-function">addEventListener</span>(<span class="hl-string">"DOMContentLoaded"</span>, <span class="hl-keyword">function</span> () {
47  <span class="hl-variable">console</span>.<span class="hl-function">log</span>(<span class="hl-string">"${o}"</span>);
48  <span class="hl-comment">// ${t}</span>
49  <span class="hl-keyword">let</span> <span class="hl-variable">stylesheets</span> = [
50    <span class="hl-comment">// "/css/vendors.min.css", // ${n}</span>
51    <span class="hl-comment">// "/css/style.min.css",   // ${n}</span>
52    <span class="hl-comment">// ${p}</span>
53  ];
54  <span class="hl-comment">// ${a}</span>
55  <span class="hl-keyword">let</span> <span class="hl-variable">loadedCount</span> = <span class="hl-number">0</span>;
56  <span class="hl-keyword">function</span> <span class="hl-function">checkAllStylesLoaded</span>() {
57    <span class="hl-variable">loadedCount</span>++;
58    <span class="hl-keyword">if</span> (<span class="hl-variable">loadedCount</span> === <span class="hl-variable">stylesheets</span>.<span class="hl-property">length</span>) {

59      <span class="hl-variable">console</span>.<span class="hl-function">log</span>(<span class="hl-string">"${k}"</span>);
60    }
61  }
62  <span class="hl-variable">stylesheets</span>.<span class="hl-function">forEach</span>(<span class="hl-keyword">function</span> (<span class="hl-variable">href</span>) {
63    <span class="hl-keyword">var</span> <span class="hl-variable">link</span> = <span class="hl-variable">document</span>.<span class="hl-function">createElement</span>(<span class="hl-string">"link"</span>);
64    <span class="hl-variable">link</span>.<span class="hl-property">rel</span> = <span class="hl-string">"stylesheet"</span>;
65    <span class="hl-variable">link</span>.<span class="hl-property">href</span> = <span class="hl-variable">href</span>;
66    <span class="hl-variable">link</span>.<span class="hl-property">onload</span> = <span class="hl-variable">checkAllStylesLoaded</span>;
67    <span class="hl-variable">link</span>.<span class="hl-property">onerror</span> = () =&gt; <span class="hl-variable">console</span>.<span class="hl-function">warn</span>(<span class="hl-string">"${y}"</span> + <span class="hl-variable">href</span>);
68    <span class="hl-variable">document</span>.<span class="hl-property">head</span>.<span class="hl-function">appendChild</span>(<span class="hl-variable">link</span>);
69  });
70});`}),B=()=>{$&&(clearInterval($),$=null)},Ss=o=>{B(),x.value=o,$=ot(()=>{x.value--,console.log(x.value,"value"),x.value<=0&&(clearInterval($),$=null)},1e3)},Cs=async()=>{const{url:o,...t}=u,n="/api/generate-critical-css-background",p=`/api/critical-css-result?targetUrl=${encodeURIComponent(o)}`;try{const a=await fetch(n,{method:"POST",headers:{"Content-Type":"application/json"},body:JSON.stringify({targetUrl:o,...t})});if(a.status!==202){const _=await a.text();throw new Error(`Background function invocation failed (${a.status}): ${_}`)}m.value="polling";const k=Math.max(1,Math.ceil(u.renderWaitTime/1e3));Ss(k);let y=0;const G=60,W=1e3;for(;y<G;){y++,await new Promise(_=>setTimeout(_,W)),console.log("Polling URL:",p);try{const _=await fetch(p,{method:"GET",headers:{Accept:"text/css, application/json"}});if(_.status===202){const zs=await _.json();console.log("Still processing:",zs.message);continue}if(!_.ok)throw new Error(`Fetch failed: ${_.status} ${_.statusText}`);const Is=await _.text();f.value=Is,m.value="success",B();const Vs=document.querySelector(`.${g.value} .generator__results`);xs(Vs);return}catch(_){throw console.error("Polling error:",_),_}}throw new Error(`Polling timeout after ${G} attempts. Generation may have failed or timed out on the backend.`)}catch(a){console.error("Error during generation/polling:",a),m.value="error",H.value=a instanceof Error?a.message:"An unexpected error occurred.",f.value=null,B()}},I=o=>{const t=o.target.querySelector("input");if(t){t.focus();return}const n=o.target.querySelector("textarea");n&&n.focus()},xs=o=>{const t=document.querySelector(`.${g.value} .scrollable`);if(t){const n=o.getBoundingClientRect(),p=t.getBoundingClientRect(),a=n.top-p.top;t.scrollTo({top:t.scrollTop+a-300,behavior:"smooth"})}},$s=o=>{J&&clearTimeout(J);const t=document.getElementById("scrollbar-container");t.style.opacity==0&&(t.style.opacity=1),J=setTimeout(()=>{t.style.opacity=0},2*1e3),Ls(o)},Ls=o=>{const n=document.getElementById("scrollbar-thumb");n.style.height="20%",n.style.top=`${o*(1-20/100)}%`},V=()=>{ns()||w.changeCursorSize(!0,e("copy"))},z=()=>{w.changeCursorSize(!1)},Ts=o=>{if(ns()||o.target.disabled)return;let t=e("form.hover.invalid_form");_s.value&&(t=e("routes.tools.critical_css_generator.form.hover_generate")),w.changeCursorSize(!0,t)},rs=()=>{w.changeCursorSize(!1)},Ms=o=>{if(o.preventDefault(),!q.value){if(rs(),M.url=!P.value,!P.value){H.value=e("routes.tools.critical_css_generator.errors.invalid_url");return}f.value=null,H.value="",m.value="initiating",Cs()}},R=async(o,t)=>{try{await navigator.clipboard.writeText(o),h[t]=!0,w.changeCursorSize(!0,e("routes.tools.critical_css_generator.results.copied")),setTimeout(()=>{h[t]=!1,w.changeCursorSize(!1)},2e3)}catch(n){console.error("Failed to copy:",n)}};Gs(()=>{B(),O&&O(),C&&(C.disconnect(),C=null)});const Hs=o=>{const t=document.querySelector(`.${g.value} .hero__agency`);t&&(t.style.opacity=`${1-o*2}`)},qs=o=>

70{if(!T)return;T.style.transform=`scale(${1-.05*o})`,T.style.borderRadius=`${20*o}px`;const t=document.querySelector(`.${g.value} .helper-right`);t&&(t.style.width=`calc(2.5% * ${o})`);const n=document.querySelector(`.${g.value} .helper-left`);n&&(n.style.width=`calc(2.5% * ${o})`)},As=()=>{const o=document.querySelector(`.${g.value} .hero__main-title`);o&&(o.style.opacity=1)},Es=()=>{const o=document.querySelector(`.${g.value} .scrollable`),t=document.querySelectorAll(`.${g.value} .hero__main-title > span`);t.length&&(C=new IntersectionObserver(n=>{n.forEach(p=>{const a=p.target;p.isIntersecting&&(a.classList.add("is-visible"),C.unobserve(a))})},{root:o,threshold:.35}),t.forEach(n=>C.observe(n)))},Ps=()=>{const o=document.querySelector(`.${g.value} .scrollable`);if(!o)return null;const t=()=>{j||(requestAnimationFrame(()=>{L||(L=document.querySelector(`.${g.value} .footer`)),T||(T=document.querySelector(`.${g.value} .faqs`));const n=o.scrollTop,p=window.innerHeight,a=n/p,k=o.scrollHeight-o.clientHeight,y=n/k*100;if($s(y),Hs(a),L){const W=o.scrollHeight-o.clientHeight-L.offsetHeight*.95,_=Math.max((n-W)/(L.offsetHeight*.95),0);qs(_*2)}j=!1}),j=!0)};return o.addEventListener("scroll",t),()=>{o.removeEventListener("scroll",t)}},Bs=()=>{F.value&&as.to(F.value,{duration:2,scrambleText:{text:e("subtitle"),chars:"<+&/sx",revealDelay:.5,speed:.3}}),Es();const o=document.querySelector(`.${g.value} .scrollable`);o&&(o.style.overflow="auto")};return Ws(async()=>{O=Ps(),As(),Y.value=!0,await Ks(),Bs()}),(o,t)=>(c(),d("main",{class:v(us.value)},[t[31]||(t[31]=s("div",{class:"shadow-main"},null,-1)),t[32]||(t[32]=s("p",{class:"visually-hidden"},"Kigo Studio",-1)),s("div",nt,[s("div",lt,[s("div",rt,[t[28]||(t[28]=s("div",{class:"helper-right"},null,-1)),t[29]||(t[29]=s("div",{class:"helper-bottom"},null,-1)),t[30]||(t[30]=s("div",{class:"helper-left"},null,-1)),s("div",at,[s("div",it,[s("div",{ref_key:"subtitle",ref:F},null,512)]),s("div",ct,[s("h1",ut,r(l(e)("routes.tools.critical_css_generator.hero.title")),1),s("p",null,r(l(e)("routes.tools.critical_css_generator.hero.description")),1)])]),s("div",pt,[s("section",dt,[s("div",_t,[s("div",ht,[s("form",{class:"contact__inputs",onSubmit:Ms},[s("div",{class:v(["contact__input","button",M.url&&"error"]),onClick:I},[s("div",null,[s("span",gt,[b(r(l(e)("routes.tools.critical_css_generator.form.url_label"))+" ",1),t[9]||(t[9]=s("span",{class:"asterisk"},"*",-1))]),A(s("input",{"onUpdate:modelValue":t[0]||(t[0]=n=>u.url=n),type:"url",placeholder:"https://example.com"},null,512),[[U,u.url]]),s("div",{class:v(["contact__separator",M.url&&"error"])},null,2),t[10]||(t[10]=s("div",{class:"contact__input-bg"},null,-1)),s("div",{class:v(["verification",P.value&&"verified"])},null,2)])],2),s("div",{class:"contact__input button",onClick:I},[s("div",null,[s("span",vt,r(l(e)("routes.tools.critical_css_generator.form.viewport_width")),1),A(s("input",{"onUpdate:modelValue":t[1]||(t[1]=n=>u.width=n),type:"number",min:"320",placeholder:"1920"},null,512),[[U,u.width,void 0,{number:!0}]]),t[11]||(t[11]=s("div",{class:"contact__separator"},null,-1)),t[12]||(t[12]=s("div",{class:"contact__input-bg"},null,-1)),s("div",{class:v(["verification",ts.value&&"verified"])},null,2)])]),s("div",{class:"contact__input button",onClick:I},[s("div",null,[s("span",mt,r(l(e)("routes.tools.critical_css_generator.form.viewport_height")),1),A(s("input",{"onUpdate:modelValue":t[2]||(t[2]=n=>u.height=n),type:"number",min:"480",placeholder:"1080"},null,512),[[U,u.height,void 0,{number:!0}]]),t[13]||(t[13]=s("div",{class:"contact__separator"},null,-1)),t[14]||(t[14]=s("div",{class:"contact__input-bg"},null,-1)),s("div",{class:v(["verification",es.value&&"verified"])},null,2)])]),s("div",{class:"contact__input button",onClick:I},[s("div",null,[s("span",ft,r(l(e)("routes.tools.critical_css_generator.form.render_wait")),1),A(s("input",{"onUpdate:modelValue":t[3]||(t[3]=n=>u.renderWaitTime=n),type:"number",min:"0",placeholder:"5000"},null,512),[[U,u.renderWaitTime,void 0,{number:!0}]]),t[15]||(t[15]=s("div",{class:"contact__separator"}

70,null,-1)),t[16]||(t[16]=s("div",{class:"contact__input-bg"},null,-1)),s("div",{class:v(["verification",os.value&&"verified"])},null,2),s("span",yt,r(l(e)("routes.tools.critical_css_generator.form.render_wait_hint")),1)])]),s("div",bt,[s("div",null,[s("label",wt,[A(s("input",{"onUpdate:modelValue":t[4]||(t[4]=n=>u.blockJSRequests=n),type:"checkbox",class:"checkbox-input"},null,512),[[Zs,u.blockJSRequests]]),t[17]||(t[17]=s("span",{class:"checkbox-custom"},null,-1)),s("span",kt,r(l(e)("routes.tools.critical_css_generator.form.block_js")),1)])])]),s("button",{type:"submit",class:"button",disabled:q.value,onMouseenter:Ts,onMouseleave:rs},[q.value?(c(),d("img",Ct)):(c(),d("img",xt)),b(" "+r(ls.value)+" ",1),s("span",null,[q.value?(c(),d("img",$t)):(c(),d("img",Lt)),b(" "+r(ls.value),1)])],40,St)],32),H.value?(c(),d("div",Tt,[t[18]||(t[18]=s("span",null," ❌ ",-1)),b(" "+r(H.value),1)])):D("",!0)])])]),s("section",Mt,[s("div",Ht,[s("div",qt,[s("h2",At,r(l(e)("routes.tools.critical_css_generator.results.title")),1),f.value?(c(),d("button",{key:0,class:v(["copy-button",{"copy-button--copied":h["Generated CSS"]}]),onClick:t[5]||(t[5]=n=>R(f.value,"Generated CSS")),onMouseenter:V,onMouseleave:z},[h["Generated CSS"]?(c(),d("svg",Pt,t[20]||(t[20]=[s("path",{d:"M20 6L9 17L4 12",stroke:"currentColor","stroke-width":"2","stroke-linecap":"round","stroke-linejoin":"round"},null,-1)]))):(c(),d("svg",Et,t[19]||(t[19]=[s("rect",{x:"9",y:"9",width:"13",height:"13",rx:"2",stroke:"currentColor","stroke-width":"2"},null,-1),s("path",{d:"M5 15H4C2.89543 15 2 14.1046 2 13V4C2 2.89543 2.89543 2 4 2H13C14.1046 2 15 2.89543 15 4V5",stroke:"currentColor","stroke-width":"2"},null,-1)]))),b(" "+r(h["Generated CSS"]?l(e)("routes.tools.critical_css_generator.results.copied"):l(e)("routes.tools.critical_css_generator.results.copy_css")),1)],34)):D("",!0)]),s("div",Bt,[s("textarea",{readonly:"",value:m.value==="success"&&f.value?f.value:vs.value,class:"results-output__textarea",placeholder:l(e)("routes.tools.critical_css_generator.placeholder.textarea")},null,8,It)]),q.value?(c(),d("p",Vt,r(m.value==="polling"?l(e)("routes.tools.critical_css_generator.results.checking"):l(e)("routes.tools.critical_css_generator.results.waiting")),1)):D("",!0)])]),s("section",zt,[s("div",Rt,[s("h2",Ut,r(l(e)("routes.tools.critical_css_generator.instructions.title")),1),s("div",Dt,[s("div",Ft,[s("h3",Ot,r(l(e)("routes.tools.critical_css_generator.instructions.step1_title")),1)]),s("p",{class:"instruction-step__description",innerHTML:l(e)("routes.tools.critical_css_generator.instructions.step1_description")},null,8,jt),s("p",Jt,[s("em",null,r(l(e)("routes.tools.critical_css_generator.instructions.step1_note")),1)]),s("div",Nt,[s("div",Gt,[s("span",Wt,r(l(e)("routes.tools.critical_css_generator.instructions.step1_label")),1),s("button",{class:v(["copy-button copy-button--small",{"copy-button--copied":h["Inline CSS Snippet"]}]),onClick:t[6]||(t[6]=n=>R(ms.value,"Inline CSS Snippet")),onMouseenter:V,onMouseleave:z},[h["Inline CSS Snippet"]?(c(),d("svg",Zt,t[22]||(t[22]=[s("path",{d:"M20 6L9 17L4 12",stroke:"currentColor","stroke-width":"2","stroke-linecap":"round","stroke-linejoin":"round"},null,-1)]))):(c(),d("svg",Kt,t[21]||(t[21]=[s("rect",{x:"9",y:"9",width:"13",height:"13",rx:"2",stroke:"currentColor","stroke-width":"2"},null,-1),s("path",{d:"M5 15H4C2.89543 15 2 14.1046 2 13V4C2 2.89543 2.89543 2 4 2H13C14.1046 2 15 2.89543 15 4V5",stroke:"currentColor","stroke-width":"2"},null,-1)]))),b(" "+r(h["Inline CSS Snippet"]?l(e)("routes.tools.critical_css_generator.results.copied"):l(e)("routes.tools.critical_css_generator.results.copy")),1)],34)]),s("pre",Qt,[s("code",{innerHTML:bs.value},null,8,Xt)])])]),s("div",Yt,[s("div",se,[s("h3",te,r(l(e)("routes.tools.critical_css_generator.instructions.step2_title")),1)]),s("p",{class:"instruction-step__description",innerHTML:l(e)("routes.tools.critical_css_generator.instructions.step2_description")},null,8,ee),s("div",oe,[s("div",ne,[s("span",le,r(l(e)("routes.tools.critical_css_generator.instructions.step2_label")),1),s("button",{class:v(["copy-button copy-button--small",{"copy-button--copied":h["Body Link Snippet"]}]),onClick:t[7]||(t[7]=n=>R(fs.value,"Body Link Snippet")),onMouseenter:V,onMouseleave:z},[h["Body Link Snippet"]?(c(),d("svg",ae,t[24]||(t[24]=[s("path",{d:"M20 6L9 17L4 12",stroke:"currentColor","stroke-width":"2","stroke-linecap":"round","stroke-linejoin":"round"},null,-1)]))):(c(),d("svg",re,t[23]||(t[23]=[s("rect",{x:"9",y:"9",width:"13",height:"13",rx:"2",stroke:"currentColor","stroke-width":"2"},null,-1),s("path",{d:"M5 15H4C2.89543 15 2 14.1046 2 13V4C2 2.89543 2.89543 2 4 2H13C14.1046 2 15 2.89543 15 4V5",stroke:"currentColor","stroke-width":"2"},null,-1)]))),b(" "+r(h["Body Link Snippet"]?l(e)("routes.tools.critical_css_generator.results.copied"):l(e)("routes.tools.critical_css_generator.results.copy")),1)],34)]),s("pre",ie,[s("code",{innerHTML:ws.value}

70,null,8,ce)])])]),s("div",ue,[s("div",pe,[s("h3",de,r(l(e)("routes.tools.critical_css_generator.instructions.step3_title")),1)]),s("p",{class:"instruction-step__description",innerHTML:l(e)("routes.tools.critical_css_generator.instructions.step3_description")},null,8,_e),s("div",he,[s("div",ge,[s("span",ve,r(l(e)("routes.tools.critical_css_generator.instructions.step3_label")),1),s("button",{class:v(["copy-button copy-button--small",{"copy-button--copied":h["Defer JS Script"]}]),onClick:t[8]||(t[8]=n=>R(ys.value,"Defer JS Script")),onMouseenter:V,onMouseleave:z},[h["Defer JS Script"]?(c(),d("svg",fe,t[26]||(t[26]=[s("path",{d:"M20 6L9 17L4 12",stroke:"currentColor","stroke-width":"2","stroke-linecap":"round","stroke-linejoin":"round"},null,-1)]))):(c(),d("svg",me,t[25]||(t[25]=[s("rect",{x:"9",y:"9",width:"13",height:"13",rx:"2",stroke:"currentColor","stroke-width":"2"},null,-1),s("path",{d:"M5 15H4C2.89543 15 2 14.1046 2 13V4C2 2.89543 2.89543 2 4 2H13C14.1046 2 15 2.89543 15 4V5",stroke:"currentColor","stroke-width":"2"},null,-1)]))),b(" "+r(h["Defer JS Script"]?l(e)("routes.tools.critical_css_generator.results.copied"):l(e)("routes.tools.critical_css_generator.results.copy")),1)],34)]),s("pre",ye,[s("code",{innerHTML:ks.value},null,8,be)])])])])]),s("section",we,[s("div",ke,[s("h2",Se,r(l(e)("routes.tools.critical_css_generator.faqs.title")),1),s("ul",Ce,[(c(!0),d(Qs,null,Xs(hs.value,(n,p)=>(c(),d("li",{key:p,class:v(["faqs__item",{"faqs__item--open":N.value===p}]),onClick:a=>gs(p)},[s("div",$e,[s("p",Le,r(n.question),1),t[27]||(t[27]=s("span",{class:"faqs__icon"},[s("svg",{width:"30",height:"30",viewBox:"0 0 24 24",fill:"none",xmlns:"http://www.w3.org/2000/svg"},[s("path",{class:"faqs__icon-horizontal",d:"M4 12H20",stroke:"currentColor","stroke-width":"2","stroke-linecap":"round","stroke-linejoin":"round"}),s("path",{class:"faqs__icon-vertical",d:"M12 4V20",stroke:"currentColor","stroke-width":"2","stroke-linecap":"round","stroke-linejoin":"round"})])],-1))]),s("div",Te,[s("p",{innerHTML:n.answer},null,8,Me)])],10,xe))),128))])])])])]),(c(),is(st,null,{default:Ys(()=>[Y.value?(c(),is(l(ps),{key:0,"view-class":g.value,"change-cursor-size":w.changeCursorSize},null,8,["view-class","change-cursor-size"])):D("",!0)]),_:1}))])])],2))}},Ae=Rs(He,[["__scopeId","data-v-0d51c5ef"]]);export{Ae as default};