https://uefngenerator-space.pages.dev/static/IconGeneratorPage-DCOZtk8V.js

1import{u as e,r as t,j as s}from"./react-vendor-DjxRzqa3.js";import{a as r,s as a,A as n}from"./index-DVfo0OiQ.js";import{c as o}from"./clipboard-C1ajXT4b.js";import{O as i,A as l,S as c,aP as d,f as x,X as m,n as p,ba as u,R as h,D as b,a0 as g,aG as f,C as w}from"./icons-vendor-CpQ_kMwd.js";import"./ai-vendor-gfeKX_KV.js";import"./motion-vendor-B1sNfRBu.js";import"./supabase-vendor-C4WxauY6.js";const y="/examples/icons/hammer_before.webp",v="/examples/icons/hammer_after.png",j=[{q:"How do I use the generated icons in UEFN and Roblox?",a:"Download the 1:1 PNG file and import it directly into your UEFN Content Browser or Roblox Studio Asset Manager. You can bind it to Verse custom UI widgets, inventory item definitions, accolade devices, or Roblox GUI ImageLabels."},{q:"Can I generate icons from text alone without an image?",a:"Yes. You can generate icons from a text prompt alone, from an uploaded in-game screenshot or viewport capture, or by combining both for maximum precision."},{q:"What resolution and format are generated?",a:"All icons are generated in high-resolution 1024×1024 square format (1:1 aspect ratio), formatted for high-DPI in-game screens and inventory slots."},{q:"How many credits does an icon generation cost?",a:"Every user gets 2 free icon generations to test! After using your 2 free generations, each icon generation costs 1 credit."},{q:"Are generated icons royalty-free for commercial maps?",a:"Yes. All icons created on our platform are 100% royalty-free and ready for use in your published commercial UEFN islands and Roblox experiences."}];function N(){const N=e();r({title:"AI Game Icon Generator – UEFN & Roblox UI Icons | UEFNCreator.Space",description:"Generate stylized 1:1 game icons from text prompts or in-game viewport captures for UEFN and Roblox. High-resolution 1024x1024 PNG game UI assets ready for inventory and HUDs.",keywords:"AI game icon generator, UEFN icon generator, Roblox icon generator, Fortnite item icons, game UI icons, 1:1 vector game icons, in-game screenshot to icon",canonicalPath:"/icon-generator",structuredData:[{"@context":"https://schema.org","@type":"SoftwareApplication",name:"AI Game Icon Generator for UEFN & Roblox",applicationCategory:"MultimediaApplication",operatingSystem:"Web",offers:{"@type":"Offer",price:"0.00",priceCurrency:"USD"},description:"Create stylized 1:1 game icons for UEFN and Roblox from text descriptions or raw in-game captures using AI."},{"@context":"https://schema.org","@type":"FAQPage",mainEntity:j.map(e=>({"@type":"Question",name:e.q,acceptedAnswer:{"@type":"Answer",text:e.a}}))}]});const[I,S]=t.useState(null),[_,k]=t.useState(null),[U,C]=t.useState(!1),[A,D]=t.useState(0),G=Math.max(0,2-A),[E,z]=t.useState(""),[R,F]=t.useState(null),[q,O]=t.useState(!1),[P,T]=t.useState(v),[L,W]=t.useState(y),[H,J]=t.useState(null),[$,V]=t.useState([]),[Y,M]=t.useState(!1),[B,Z]=t.useState(!1),[X,Q]=t.useState(!1),[K,ee]=t.useState(!1),[te,se]=t.useState(50),[re,ae]=t.useState(null),ne=t.useRef(null),oe=async()=>{if(a)try{const{data:{session:e}}=await a.auth.getSession();if(e?.user){S(e.user.id);const{data:t}=await a.from("profiles").select("credits").eq("id",e.user.id).single();t&&k(t.credits);const{count:s,data:r}=await a.from("generation_logs").select("id, image_url, prompt, created_at",{count:"exact"}).eq("user_id",e.user.id).eq("preset","icon").eq("status","success").order("created_at",{ascending:!1}).limit(10);"number"==typeof s&&D(s),r&&r.length>0&&V(r.map(e=>({id:e.id,imageUrl:e.image_url,prompt:e.prompt,createdAt:e.created_at})))}else S(null),k(null),D(0)}catch(e){}};t.useEffect(()=>{oe();const{data:{subscription:e}}=a?.auth?.onAuthStateChange(()=>{oe()})??{data:{subscription:{unsubscribe:()=>{}}}};return()=>e.unsubscribe()},[]),t.useEffect(()=>{const e=setTimeout(()=>{"undefined"!=typeof window&&window.$crisp&&window.$crisp.push(["do","chat:show"])},500);return()=>{clearTimeout(e),"undefined"!=typeof window&&window.$crisp&&window.$crisp.push(["do","chat:hide"])}},[]);const ie=e=>{if(!e.type.startsWith("image/"))return void J("Please upload a valid image file (PNG, JPG, WebP).");const t=new FileReader;t.onload=t=>{const s=t.target?.result;F({file:e,dataUrl:s}),J(null)}

1,t.readAsDataURL(e)},le=e=>{e.preventDefault(),Q(!1);const t=e.dataTransfer.files?.[0];t&&t.type.startsWith("image/")&&ie(t)};t.useEffect(()=>{const e=e=>{const t=document.activeElement;if("INPUT"===t?.tagName)return;const s=Array.from(e.clipboardData?.items||[]).find(e=>e.type.startsWith("image/"));if(s){const t=s.getAsFile();t&&(e.preventDefault(),ie(t))}};return window.addEventListener("paste",e),()=>window.removeEventListener("paste",e)},[]);t.useEffect(()=>{try{const e=sessionStorage.getItem("icon_gen_draft_prompt"),t=sessionStorage.getItem("icon_gen_draft_image"),s=sessionStorage.getItem("icon_gen_draft_name");e&&z(e),t&&F({dataUrl:t,file:s?new File([],s):void 0}),(e||t)&&(sessionStorage.removeItem("icon_gen_draft_prompt"),sessionStorage.removeItem("icon_gen_draft_image"),sessionStorage.removeItem("icon_gen_draft_name"))}catch{}},[]);const ce=async()=>{const e=E.trim(),t=!!R?.dataUrl;if(!e&&!t)return void J("Please enter a description or attach an image.");if(!a)return;const{data:{session:s}}=await a.auth.getSession();if(!s){try{e&&sessionStorage.setItem("icon_gen_draft_prompt",e),R?.dataUrl&&sessionStorage.setItem("icon_gen_draft_image",R.dataUrl),R?.file?.name&&sessionStorage.setItem("icon_gen_draft_name",R.file.name)}catch{}return void C(!0)}let r=A;try{const{count:e}=await a.from("generation_logs").select("*",{count:"exact",head:!0}).eq("user_id",s.user.id).eq("preset","icon").eq("status","success");"number"==typeof e&&(r=e,D(e))}catch{}const n=r<2;let o=_;if(!n){try{const{data:e}=await a.from("profiles").select("credits").eq("id",s.user.id).single();e&&(o=e.credits,k(e.credits))}catch{}if(null===o||o<1)return void N("/pricing")}O(!0),ee(!0),J(null);try{const r="eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJzdXBhYmFzZSIsInJlZiI6ImVid3N6dHZhZ3hucWljdm9mcWdqIiwicm9sZSI6ImFub24iLCJpYXQiOjE3NTIwNzIyMDEsImV4cCI6MjA2NzY0ODIwMX0.gwnC4Os_dUtCcrg9Y0Kfgi8OTYneD_Sr6aZ30vbmcXs",o="https://ebwsztvagxnqicvofqgj.supabase.co",i=t?[R.dataUrl]:[],l=await fetch(`${o}/functions/v1/icon-generator`,{method:"POST",headers:{"Content-Type":"application/json",Authorization:`Bearer ${r}`,apikey:r},body:JSON.stringify({prompt:e,...i.length>0&&{image_urls:i}})}),c=await l.json();if(!l.ok||c.error)throw new Error(c.error||"Icon generation failed. Please try again.");const d=c?.image?.url??"";if(!d)throw new Error("No image URL returned from generator.");if(!n){const e=await(async e=>{if(!a)return!0;const{data:{session:t}}=await a.auth.getSession();if(!t)return N("/pricing"),!1;const{error:s}=await a.rpc("deduct_credits",{deduct_amount:e});return s?(N("/pricing"),!1):(k(t=>null===t?null:Math.max(0,t-e)),!0)})(1);if(!e)throw new Error("Insufficient credits.")}D(e=>e+1),a.from("generation_logs").insert({user_id:s.user.id,preset:"icon",prompt:e||"[Reference Image Only]",enhanced_prompt:"Game Icon Style (Server-Side Enforced)",credits_used:n?0:1,status:"success",image_url:d}).then(()=>{}),T(d);const x={id:"icon_"+Date.now(),imageUrl:d,prompt:e||"Game Icon",beforeUrl:R?.dataUrl,createdAt:(new Date).toISOString()};V(e=>[x,...e])}catch(i){J(i.message||"Generation failed. Please try another prompt.")}finally{O(!1)}};return s.jsxs("div",{className:"w-full text-white pb-16 selection:bg-[#0075e1] selection:text-white relative overflow-x-hidden",children:[s.jsx("div",{className:"absolute top-6 sm:top-8 lg:top-9 right-4 sm:right-6 lg:right-8 z-30",children:s.jsxs("button",{type:"button",onClick:()=>N("/fothumbs-icon"),className:"group inline-flex items-center gap-2 px-3 sm:px-3.5 py-1.5 sm:py-2 rounded-xl bg-[#0f111a]/95 hover:bg-[#181a27] border border-white/10 hover:border-white/20 text-gray-200 hover:text-white text-xs font-semibold transition-all duration-150 shadow-lg shadow-black/50 cursor-pointer active:scale-95 backdrop-blur-md",title:"Open in Fothumbs",children:[s.jsx("div",{className:"text-blue-500 flex items-center justify-center flex-shrink-0",children:s.jsx(i,{className:"w-4 h-4"})}),s.jsx("span",{children:"Open in Fothumbs"}),s.jsx(l,{className:"w-3.5 h-3.5 text-gray-400 group-hover:text-white transition-colors"})]})}),s.jsx("div",{className:"absolute top-0 left-1/2 -translate-x-1/2 w-[1200px] h-[550px] bg-[radial-gradient(ellipse_at_top,_var(--tw-gradient-stops))] from-blue-600/15 via-indigo-900/10 to-transparent blur-3xl pointer-events-none -z-10"}),s.jsxs("section",{className:"min-h-[calc(100dvh-5.5rem)] flex flex-col justify-center max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-6 sm:py-8 relative",children:[s.jsxs("div",{className:"text-center max-w-2xl mx-auto mb-5 sm:mb-6 -translate-y-4 sm:-translate-y-6",children:[s.jsxs("div",{className:"inline-flex items-center gap-2 px-3 py-1 rounded-full bg-blue-500/10 border border-blue-500/20 text-blue-400 text-xs font-semibold mb-2 sm:mb-2.5",children:[s.jsx(c,{className:"w-3.5 h-3.5"}),s.jsx("span",{children:"UEFN & Roblox Studio Tool"})]}),s.jsx("h1",{className:"text-2xl sm:text-3xl lg:text-4xl font-extrabold text-white tracking-tight bg-gradient-to-r from-white via-white to-gray-400 bg-clip-text text-transparent",children:"AI Game Icon Generator"}),s.jsx("p",{className:"text-xs sm:text-sm text-gray-400 mt-1.5 max-w-lg mx-auto leading-relaxed",children:"Turn text prompts or in-game screenshots into stylized 1:1 square game icons for inventory and HUDs."})]}),s.jsxs("div",{className:"grid grid-cols-1 lg:grid-cols-12 gap-6 lg:gap-8 items-stretch",children:[s.jsxs("div",{onDragOver:e=>{e.dataTransfer.types.includes("Files")&&e.preventDefault()},onDrop:le,className:"lg:col-span-5 bg-[#0f111a]/95 border border-white/10 hover:border-white/15 rounded-2xl p-5 sm:px-6 sm:pt-4 sm:pb-6 shadow-2xl backdrop-blur-md flex flex-col justify-between space-y-4 relative overflow-hidden transition-colors",children:[s.jsx("div",{className:"absolute -top-20 -left-20 w-48 h-48 bg-blue-600/10 rounded-full blur-3xl pointer-events-none"}),s.jsxs("div",{className:"space-y-4 relative z-10",children:[s.jsxs("div",{className:"flex items-center justify-between pb-3 border-b border-white/5 -mt-0.5 sm:-mt-1",children:[s.jsxs("div",{className:"flex items-center gap-2.5",children:[s.jsx("div",{className:"w-7 h-7 rounded-lg bg-blue-500/15 border border-blue-500/30 flex items-center justify-center text-blue-400 shadow-sm",children:s.jsx(d,{className:"w-4 h-4"})}),s.jsxs("div",{children:[s.jsx("span",{className:"text-xs font-bold text-white uppercase tracking-wider block leading-tight",children:"Create Icon"}),s.jsx("span",{className:"text-[10px] text-gray-400 font-normal",children:"Describe item or upload capture"})]})]}),I&&0===G?s.jsx("span",{className:"text-[11px] font-semibold text-blue-400/90 bg-blue-500/10 px-2.5 py-1 rounded-md border border-blue-500/20",children:null!==_?`${_} Credits`:"0 Credits"}):s.jsx("span",{className:"text-[11px] font-semibold text-blue-400/90 bg-blue-500/10 px-2.5 py-1 rounded-md border border-blue-500/20",children:"AI Studio"})]}),s.jsxs("div",{className:"space-y-1.5",children:[s.jsxs("div",{className:"flex items-center justify-between",children:[s.jsx("label",{htmlFor:"prompt-input",className:"block text-xs font-semibold text-gray-300",children:"Icon Description"}),s.jsx("span",{className:"text-[10px] text-gray-500",children:"English • Cel-Shaded"})]}),s.jsx("textarea",{id:"prompt-input",value:E,onChange:e=>z(e.target.value),onPaste:e=>{const t=Array.from(e.clipboardData?.items||[]).find(e=>e.type.startsWith("image/"));if(t){const s=t.getAsFile();s&&(e.preventDefault(),ie(s))}},onDragOver:e=>{e.dataTransfer.types.includes("Files")&&e.preventDefault()},onDrop:le,onKeyDown:e=>{"Enter"!==e.key||e.shiftKey||(e.preventDefault(),ce())},rows:4,placeholder:"Describe your item or weapon (e.g. Golden sword, energy shield, health potion)...",className:"w-full bg-[#08090f] border border-white/10 rounded-xl p-3.5 text-xs sm:text-sm text-gray-200 placeholder-gray-500 outline-none focus:border-blue-500 focus:ring-1 focus:ring-blue-500/50 transition-all resize-none leading-relaxed"})]}),s.jsxs("div",{className:"space-y-1.5",children:[s.jsxs("label",{className:"block text-xs font-semibold text-gray-300",children:["Reference Screenshot ",s.jsx("span",{className:"text-gray-500 font-normal",children:"(Optional 3D capture)"})]}),s.jsx("input",{ref:ne,type:"file",accept:"image/*",className:"hidden",onChange:e=>{const t=e.target.files?.[0];t&&ie(t),e.target.value=""}}),R?s.jsxs("div",{className:"flex items-center gap-3 p-3 rounded-xl bg-[#08090f] border border-white/10",children:[s.jsx("img",{src:R.dataUrl,alt:"Ref",className:"w-12 h-12 rounded-lg object-contain bg-[#06070a] border border-white/10 shrink-0 p-1"}),s.jsxs("div",{className:"min-w-0 flex-1",children:[s.jsx("p",{className:"text-xs font-bold text-white truncate",children:R.file?.name||"In-game screenshot"}),s.jsxs("p",{className:"text-[10px] text-emerald-400 font-medium flex items-center gap-1",children:[s.jsx(x,{className:"w-3 h-3"})," Ready for AI cel-shading"]})]}),s.jsx("button",{type:"button",onClick:()=>{F(null),W(y)},className:"text-gray-400 hover:text-red-400 p-2 transition-colors cursor-pointer rounded-lg hover:bg-white/5",title:"Remove image",children:s.jsx(m,{className:"w-4 h-4"})})]}):s.jsx("div",{onClick:()=>ne.current?.click(),onDragOver:e=>{e.dataTransfer.types.includes("Files")&&(e.preventDefault(),Q(!0))},onDragLeave:()=>Q(!1),onDrop:le,className:"border border-dashed rounded-xl p-4 text-center cursor-pointer transition-all group "+(X?"border-blue-500 bg-blue-950/20":"border-white/15 hover:border-blue-500/50 bg-[#08090f] hover:bg-blue-950/10"),children:s.jsxs("div",{className:"flex items-center justify-center gap-2.5 text-xs text-gray-400 group-hover:text-gray-300",children:[s.jsx("div",{className:"w-7 h-7 rounded-lg bg-white/5 group-hover:bg-blue-500/20 text-blue-400 flex items-center justify-center transition-colors",children:s.jsx(p,{className:"w-3.5 h-3.5"})}),s.jsxs("div",{className:"text-left",children:[s.jsx("p",{className:"font-semibold text-gray-300 group-hover:text-white",children:"Attach 3D Viewport Capture"}),s.jsx("p",{className:"text-[10px] text-gray-500",children:"PNG, JPG, WebP"})]})]})})]}),H&&s.jsxs("div",{className:"p-3 rounded-xl bg-red-950/40 border border-red-500/30 text-xs text-red-300 flex items-start gap-2 animate-in fade-in",children:[s.jsx(u,{className:"w-4 h-4 text-red-400 shrink-0 mt-0.5"}),s.jsx("span",{children:H})]})]}),s.jsxs("div",{className:"pt-3 relative z-10 space-y-3",children:[s.jsx("button",{onClick:ce,disabled:q||!E.trim()&&!R,className:"w-full h-12 rounded-xl font-bold text-xs sm:text-sm text-white bg-gradient-to-r from-blue-600 via-blue-500 to-indigo-600 hover:from-blue-500 hover:to-indigo-500 active:scale-[0.99] disabled:opacity-40 disabled:pointer-events-none transition-all flex items-center justify-center gap-2.5 shadow-lg shadow-blue-600/30 hover:shadow-blue-600/40 cursor-pointer",children:q?s.jsxs(s.Fragment,{children:[s.jsx(h,{className:"w-4 h-4 animate-spin text-white"}),s.jsx("span",{children:"Rendering 1:1 Vector Icon..."})]}):s.jsxs(s.Fragment,{children:[s.jsx(c,{className:"w-4 h-4 text-yellow-300"}),s.jsx("span",{children:I&&0===G?"Generate Game Icon (1 Credit)":"Generate Game Icon"})]})}),$.length>0&&s.jsxs("div",{className:"pt-2 border-t border-white/5",children:[s.jsx("p",{className:"text-[10px] font-bold text-gray-400 uppercase tracking-wider mb-1.5",children:"Recent Generations"}),s.jsx("div",{className:"flex gap-2 overflow-x-auto pb-1",children:$.map(e=>s.jsx("img",{src:e.imageUrl,alt:e.prompt,onClick:()=>{ee(!0),T(e.imageUrl),e.beforeUrl&&W(e.beforeUrl)},className:"w-10 h-10 rounded-lg border border-white/10 hover:border-blue-500 cursor-pointer object-contain bg-[#06070a] p-1 shrink-0 transition-all hover:scale-105"},e.id))})]})]})]}),s.jsxs("div",{className:"lg:col-span-7 bg-[#0f111a]/95 border border-white/10 hover:border-white/15 rounded-2xl p-5 sm:px-6 sm:pt-4 sm:pb-6 shadow-2xl backdrop-blur-md flex flex-col justify-between space-y-4 relative overflow-hidden transition-colors",children:[s.jsx("div",{className:"absolute -top-20 -right-20 w-48 h-48 bg-indigo-600/10 rounded-full blur-3xl pointer-events-none"}),s.jsxs("div",{className:"space-y-4 relative z-10",children:[s.jsxs("div",{className:"flex items-center justify-between pb-3 border-b border-white/5 -mt-0.5 sm:-mt-1",children:[s.jsxs("div",{children:[s.jsx("h2",{className:"text-xs sm:text-sm font-bold text-white leading-tight",children:q?"Rendering 1:1 Icon...":K?"Generated Game Icon":"Before & After Preview"}),s.jsx("p",{className:"text-[11px] text-gray-400 mt-0.5",children:q?"Applying vector cel-shading & edge highlights":K?"High-resolution 1:1 icon ready for game inventory":"Raw capture converted to 1:1 stylized icon"})]}),K?s.jsx("button",{type:"button",onClick:()=>{ee(!1),T(v),W(y)},className:"px-2.5 py-1 rounded-lg bg-white/5 hover:bg-white/10 text-gray-400 hover:text-white border border-white/10 text-xs font-medium transition-all cursor-pointer",children:"View Example"}):s.jsx("span",{className:"px-2.5 py-1 rounded-lg bg-blue-500/10 text-blue-400 border border-blue-500/20 text-xs font-semibold",children:"Example"})]}),s.jsx("div",{className:"w-full h-[330px] sm:h-[360px] lg:h-[380px] flex items-center justify-center",children:q||K?s.jsxs("div",{className:"h-full aspect-square mx-auto relative rounded-xl overflow-hidden bg-[#06070a] border border-blue-500/30 select-none shadow-2xl flex items-center justify-center p-4",children:[s.jsx("div",{className:"absolute inset-0 z-0 opacity-20 pointer-events-none",style:{backgroundImage:"radial-gradient(circle, #38bdf8 1.2px, transparent 1.2px)",backgroundSize:"12px 12px"}}),q?s.jsxs("div",{className:"flex flex-col items-center justify-center space-y-3 text-center relative z-10",children:[s.jsx(h,{className:"w-10 h-10 text-blue-400 animate-spin"}),s.jsx("p",{className:"text-sm font-bold text-white",children:"Rendering 1:1 Icon..."}),s.jsx("p",{className:"text-xs text-gray-400",children:"Applying vector cel-shading"})]}):s.jsx("img",{src:P,alt:"Generated Game Icon",className:"w-full h-full object-contain relative z-10 hover:scale-105 transition-transform duration-300 pointer-events-none"})]}):s.jsxs("div",{className:"h-full aspect-square mx-auto relative rounded-xl overflow-hidden bg-[#06070a] border border-white/10 select-none shadow-2xl",children:[s.jsxs("div",{className:"absolute inset-0 z-0 bg-[#06070a] overflow-hidden",children:[s.jsx("div",{className:"absolute inset-0 z-0 opacity-20 pointer-events-none",style:{backgroundImage:"radial-gradient(circle, #38bdf8 1.2px, transparent 1.2px)",backgroundSize:"12px 12px"}}),s.jsx("div",{className:"absolute inset-0 z-10 flex items-center justify-center p-4",children:s.jsx("img",{src:P,alt:"After Icon",className:"w-full h-full object-contain pointer-events-none"})})]}),s.jsx("div",{className:"absolute inset-0 z-10 overflow-hidden bg-[#06070a]",style:{clipPath:`inset(0 ${100-te}% 0 0)`},children:s.jsx("img",{src:L,alt:"Before Capture",className:"w-full h-full object-cover pointer-events-none"})}),s.jsx("div",{className:"absolute top-2.5 left-2.5 px-2.5 py-0.5 rounded-md text-[9px] font-black uppercase tracking-wider z-20 shadow-md bg-black/80 text-white/90 border border-white/20 pointer-events-none",children:"BEFORE"}),s.jsx("div",{className:"absolute top-2.5 right-2.5 px-2.5 py-0.5 rounded-md text-[9px] font-black uppercase tracking-wider z-20 shadow-md bg-blue-600 text-white shadow-blue-600/30 pointer-events-none",children:"AFTER"}),s.jsx("div",{className:"absolute top-0 bottom-0 w-0.5 bg-blue-400 pointer-events-none shadow-[0_0_12px_rgba(96,165,250,0.9)] z-30",style:{left:`${te}%`},children:s.jsx("div",{className:"absolute top-1/2 -translate-y-1/2 -translate-x-1/2 w-7 h-7 rounded-full bg-blue-600 text-white shadow-xl border-2 border-white flex items-center justify-center text-[10px] font-black shadow-blue-500/50",children:"⇄"})}),s.jsx("input",{type:"range",min:"0",max:"100",value:te,onChange:e=>se(Number(e.target.value)),className:"absolute inset-0 w-full h-full opacity-0 cursor-ew-resize z-40","aria-label":"Comparison slider"})]})})]}),s.jsxs("div",{className:"pt-3 border-t border-white/10 flex flex-wrap items-center justify-between gap-3 relative z-10",children:[s.jsxs("div",{className:"flex items-center gap-2",children:[s.jsxs("button",{type:"button",onClick:()=>(async e=>{try{const t=await fetch(e),s=await t.blob(),r=window.URL.createObjectURL(s),a=document.createElement("a

1");a.href=r,a.download=`game-icon-${Date.now()}.png`,document.body.appendChild(a),a.click(),document.body.removeChild(a),setTimeout(()=>window.URL.revokeObjectURL(r),1e3)}catch{window.open(e,"_blank")}})(P),className:"h-10 px-4 rounded-xl bg-blue-600 hover:bg-blue-500 text-white text-xs font-bold transition-all flex items-center gap-2 cursor-pointer shadow-md shadow-blue-600/25 active:scale-95",children:[s.jsx(b,{className:"w-4 h-4"}),s.jsx("span",{children:"Download 1:1 PNG"})]}),s.jsxs("button",{type:"button",onClick:()=>(async e=>{await o(e)?(Z(!0),setTimeout(()=>Z(!1),2e3)):(M(!0),setTimeout(()=>M(!1),2e3))})(P),className:"h-10 px-3.5 rounded-xl bg-white/5 hover:bg-white/10 text-gray-300 hover:text-white text-xs font-medium transition-all flex items-center gap-1.5 cursor-pointer active:scale-95 border border-white/5",title:"Copy",children:[B?s.jsx(x,{className:"w-4 h-4 text-emerald-400"}):s.jsx(g,{className:"w-4 h-4"}),s.jsx("span",{children:B?"Copied":"Copy"})]})]}),s.jsxs("div",{className:"flex items-center gap-1.5 text-[11px] text-gray-400 font-medium",children:[s.jsx("span",{className:"w-2 h-2 rounded-full bg-emerald-400 animate-pulse"}),s.jsx("span",{children:"1024×1024 HD PNG (1:1)"})]})]})]})]})]}),s.jsxs("section",{className:"max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 pt-20 pb-12 border-t border-white/10 space-y-12",children:[s.jsxs("div",{className:"space-y-3 text-left",children:[s.jsx("h2",{className:"text-base sm:text-lg font-bold text-white tracking-tight",children:"About the AI Game Icon Generator"}),s.jsx("p",{className:"text-xs sm:text-sm text-gray-400 leading-relaxed",children:"The AI Game Icon Generator enables creators to produce stylized, high-contrast 1:1 square game UI assets instantly. Whether you start with a text description or upload a raw in-game 3D viewport screenshot, the AI converts geometry and lighting into clean cel-shaded vector outlines with professional enamel highlights."}),s.jsx("p",{className:"text-xs sm:text-sm text-gray-400 leading-relaxed",children:"Every icon exports in standard 1024×1024 resolution, designed specifically for UEFN Verse UI widgets, custom inventory slots, accolade awards, and Roblox Studio GUI ImageLabels."}),s.jsxs("div",{className:"grid grid-cols-1 sm:grid-cols-3 gap-3 pt-2",children:[s.jsxs("div",{className:"p-3.5 rounded-xl bg-[#12131b] border border-white/5 space-y-1",children:[s.jsx("span",{className:"text-xs font-bold text-white",children:"📐 1:1 Square Format"}),s.jsx("p",{className:"text-[11px] text-gray-400",children:"1024×1024 HD resolution ready for game HUDs."})]}),s.jsxs("div",{className:"p-3.5 rounded-xl bg-[#12131b] border border-white/5 space-y-1",children:[s.jsx("span",{className:"text-xs font-bold text-white",children:"🎨 Vector Cel-Shading"}),s.jsx("p",{className:"text-[11px] text-gray-400",children:"Crisp, bold outlines with high in-game contrast."})]}),s.jsxs("div",{className:"p-3.5 rounded-xl bg-[#12131b] border border-white/5 space-y-1",children:[s.jsx("span",{className:"text-xs font-bold text-white",children:"⚡ Text or 3D Capture"}),s.jsx("p",{className:"text-[11px] text-gray-400",children:"Generate from a prompt, screenshot, or both."})]})]}),s.jsx("div",{className:"pt-2",children:s.jsxs("div",{className:"p-4 rounded-xl bg-gradient-to-r from-blue-950/40 via-purple-950/30 to-indigo-950/40 border border-blue-500/20 flex flex-col sm:flex-row items-start sm:items-center justify-between gap-3",children:[s.jsxs("div",{className:"space-y-0.5",children:[s.jsxs("h4",{className:"text-xs font-bold text-white flex items-center gap-1.5",children:[s.jsx(c,{className:"w-3.5 h-3.5 text-blue-400"}),s.jsx("span",{children:"In-App Fothumbs Icon Studio"})]}),s.jsx("p",{className:"text-[11px] text-gray-400",children:"Want chat history, layer breakdowns, and batch icon generation? Try our integrated multi-chat studio."})]}),s.jsxs("button",{type:"button",onClick:()=>N("/fothumbs-icon"),className:"px-3.5 py-1.5 rounded-lg bg-blue-600/20 hover:bg-blue-600/30 text-blue-300 hover:text-white text-xs font-bold border border-blue-500/30 transition-colors flex items-center gap-1.5 cursor-pointer shrink-0",children:[s.jsx("span",{children:"Open In-App Studio"}),s.jsx(f,{className:"w-3.5 h-3.5"})]})]})})]}),s.jsxs("div",{className:"space-y-3 pt-4 border-t border-white/5",children:[s.jsx("h3",{className:"text-sm sm:text-base font-bold text-white",children:"Frequently Asked Questions"}),s.jsx("div",{className:"space-y-2",children:j.map((e,t)=>{const r=re===t;return s.jsxs("div",{className:"rounded-xl border border-white/10 bg-[#12131b] overflow-hidden",children:[s.jsxs("button",{type:"button",onClick:()=>ae(r?null:t),className:"w-full px-4 py-3 text-left flex items-center justify-between text-xs font-semibold text-gray-200 hover:text-white transition-colors cursor-pointer",children:[s.jsx("span",{children:e.q}),s.jsx(w,{className:"w-3.5 h-3.5 text-gray-400 transition-transform "+(r?"rotate-180 text-blue-400":"")})]}),r&&s.jsx("div",{className:"px-4 pb-3.5 text-xs text-gray-400 leading-relaxed border-t border-white/5 pt-2.5",children:e.a})]},t)})})]})]}),U&&s.jsx(n,{isOpen:U,onClose:()=>C(!1),onSuccess:()=>{C(!1),oe().then(()=>{setTimeout(()=>ce(),300)})}})]})}export{N as default};