https://creator.ai/_next/static/chunks/app/apps/pixel-studio/page-f3f9aa6169ee65d3.js

1(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[9513],{8273:(e,t,a)=>{"use strict";a.d(t,{H:()=>n});var s=a(43163),l=a(48996);function n({name:e,tagline:t,primaryColor:a,children:r}){return(0,s.jsxs)("div",{className:"min-h-dvh bg-[#0F0F0F]",children:[(0,s.jsxs)("div",{className:"max-w-[430px] md:max-w-[520px] mx-auto",children:[(0,s.jsxs)("header",{className:"px-5 pt-10 pb-4",children:[(0,s.jsx)("h1",{className:"text-[24px] font-bold text-[#F5F5F4] tracking-[-0.02em]",style:{fontFamily:"var(--font-display)"},children:e}),(0,s.jsx)("p",{className:"text-[14px] text-[#78716C] mt-1",children:t})]}),(0,s.jsx)("div",{className:"px-5 pb-6",children:r}),(0,s.jsx)("footer",{className:"px-5 pb-10 text-center",children:(0,s.jsxs)("p",{className:"text-[12px] text-[#44403C]",children:["Built on"," ",(0,s.jsx)("a",{href:"/",className:"text-[#78716C] hover:text-[#F5F5F4] transition-colors underline underline-offset-2",children:"creator.ai"})]})})]}),(0,s.jsx)(l.O,{appName:e})]})}},48996:(e,t,a)=>{"use strict";a.d(t,{O:()=>n});var s=a(43163),l=a(19115);function n({appName:e}

1){let[t,a]=(0,l.useState)(!1),[i,o]=(0,l.useState)(!1),[c,d]=(0,l.useState)(!1),[x,u]=(0,l.useState)(!1);(0,l.useEffect)(()=>{if(window.matchMedia("(display-mode: standalone)").matches||"standalone"in window.navigator&&window.navigator.standalone)return void o(!0);let e=navigator.userAgent,t=/iPad|iPhone|iPod/.test(e),s=/Android/.test(e);d(t),u(s);let l=localStorage.getItem("pwa-install-dismissed");if(parseInt(localStorage.getItem("pwa-install-dismiss-count")||"0",10)>=3||l&&(Date.now()-parseInt(l,10))/864e5<7)return;let n=setTimeout(()=>{a(!0)},15e3),r=e=>{e.preventDefault(),window.deferredPrompt=e};return window.addEventListener("beforeinstallprompt",r),()=>{clearTimeout(n),window.removeEventListener("beforeinstallprompt",r)}},[]);let f=()=>{a(!1),localStorage.setItem("pwa-install-dismissed",Date.now().toString());let e=parseInt(localStorage.getItem("pwa-install-dismiss-count")||"0",10);localStorage.setItem("pwa-install-dismiss-count",(e+1).toString())},m=async()=>{let e=window.deferredPrompt;e&&await e.prompt(),a(!1)};return i||!t?null:(0,s.jsxs)(s.Fragment,{children:[(0,s.jsx)("div",{className:"fixed inset-0 bg-black/50 z-40 animate-fade-in",onClick:f}),(0,s.jsx)("div",{className:"fixed bottom-0 left-0 right-0 z-50 animate-slide-up",children:(0,s.jsxs)("div",{className:"bg-[#1C1917] rounded-t-[20px] px-6 pt-5 pb-[max(24px,env(safe-area-inset-bottom))]",children:[(0,s.jsx)("div",{className:"w-10 h-1 bg-[#3F3B39] rounded-full mx-auto mb-5"}),(0,s.jsxs)("h3",{className:"text-lg font-bold text-[#F5F5F4] text-center mb-1",style:{fontFamily:"var(--font-display)"},children:["Install ",e]}),(0,s.jsx)("p",{className:"text-sm text-[#A8A29E] text-center mb-6",children:"Add to your home screen for the full app experience"}),c&&(0,s.jsxs)("div",{className:"space-y-4",children:[(0,s.jsx)(r,{number:1,text:"Tap the Share button in Safari",icon:(0,s.jsx)("svg",{className:"w-5 h-5",fill:"none",viewBox:"0 0 24 24",stroke:"currentColor",strokeWidth:1.5,children:(0,s.jsx)("path",{strokeLinecap:"round",strokeLinejoin:"round",d:"M9 8.25H7.5a2.25 2.25 0 0 0-2.25 2.25v9a2.25 2.25 0 0 0 2.25 2.25h9a2.25 2.25 0 0 0 2.25-2.25v-9a2.25 2.25 0 0 0-2.25-2.25H15m0-3-3-3m0 0-3 3m3-3V15"})})}),(0,s.jsx)(r,{number:2,text:'Scroll down and tap "Add to Home Screen"',icon:(0,s.jsx)("svg",{className:"w-5 h-5",fill:"none",viewBox:"0 0 24 24",stroke:"currentColor",strokeWidth:1.5,children:(0,s.jsx)("path",{strokeLinecap:"round",strokeLinejoin:"round",d:"M12 4.5v15m7.5-7.5h-15"})})}),(0,s.jsx)(r,{number:3,text:'Tap "Add" to install',icon:(0,s.jsx)("svg",{className:"w-5 h-5",fill:"none",viewBox:"0 0 24 24",stroke:"currentColor",strokeWidth:1.5,children:(0,s.jsx)("path",{strokeLinecap:"round",strokeLinejoin:"round",d:"m4.5 12.75 6 6 9-13.5"})})})]}),x&&(0,s.jsx)("button",{onClick:m,className:"w-full py-4 bg-white text-[#0F0F0F] rounded-[12px] text-base font-semibold transition-all duration-150 active:scale-95",children:"Install App"}),!c&&!x&&(0,s.jsxs)("div",{className:"space-y-4",children:[(0,s.jsx)(r,{number:1,text:"Open this page in a mobile browser",icon:(0,s.jsx)("svg",{className:"w-5 h-5",fill:"none",viewBox:"0 0 24 24",stroke:"currentColor",strokeWidth:1.5,children:(0,s.jsx)("path",{strokeLinecap:"round",strokeLinejoin:"round",d:"M10.5 1.5H8.25A2.25 2.25 0 0 0 6 3.75v16.5a2.25 2.25 0 0 0 2.25 2.25h7.5A2.25 2.25 0 0 0 18 20.25V3.75a2.25 2.25 0 0 0-2.25-2.25H13.5m-3 0V3h3V1.5m-3 0h3"})})}),(0,s.jsx)(r,{number:2,text:'Use your browser menu to "Add to Home Screen"',icon:(0,s.jsx)("svg",{className:"w-5 h-5",fill:"none",viewBox:"0 0 24 24",stroke:"currentColor",strokeWidth:1.5,children:(0,s.jsx)("path",{strokeLinecap:"round",strokeLinejoin:"round",d:"M12 4.5v15m7.5-7.5h-15"})})})]}),(0,s.jsx)("button",{onClick:f,className:"w-full mt-5 py-3 text-sm text-[#78716C] font-medium text-center active:text-[#A8A29E]",children:"Not now"})]})}),(0,s.jsx)("style",{children:`
2        @keyframes pwa-fade-in {
3          from { opacity: 0; }
4          to { opacity: 1; }
5        }
6        @keyframes pwa-slide-up {
7          from { transform: translateY(100%); }
8          to { transform: translateY(0); }
9        }
10        .animate-fade-in {
11          animation: pwa-fade-in 200ms ease-out;
12        }
13        .animate-slide-up {
14          animation: pwa-slide-up 300ms ease-out;
15        }
16      `})]})}function r({number:e,text:t,icon:a}){return(0,s.jsxs)("div",{className:"flex items-center gap-4",children:[(0,s.jsx)("div",{className:"w-10 h-10 rounded-full bg-[#292524] flex items-center justify-center text-[#A8A29E] shrink-0",children:a}),(0,s.jsxs)("div",{className:"flex-1",children:[(0,s.jsxs)("span",{className:"text-[10px] font-semibold uppercase tracking-wider text-[#78716C]",children:["Step ",e]}),(0,s.jsx)("p",{className:"text-sm text-[#D6D3D1]",children:t})]})]})}},75302:(e,t,a)=>{Promise.resolve().then(a.bind(a,99638))},99638:(e,t,a)=>{"use strict";a.d(t,{PixelStudio:()=>c});var s=a(43163),l=a(19115),n=a(8273);let r=["#000000","#ffffff","#ff0000","#00ff00","#0000ff","#ffff00","#ff00ff","#00ffff","#ff8800","#8800ff","#0088ff","#88ff00","#ff0088","#884400","#888888","#444444"];function i(){return Array.from({length:16}

16,()=>Array.from({length:16},()=>""))}function o(e){return e.map(e=>[...e])}function c(){let[e,t]=(0,l.useState)(i),[a,c]=(0,l.useState)("#000000"),[d,x]=(0,l.useState)("draw"),[u,f]=(0,l.useState)(!0),[m,p]=(0,l.useState)([i()]),[h,b]=(0,l.useState)(0),[v,g]=(0,l.useState)(!1),[w,j]=(0,l.useState)(!1),k=(0,l.useRef)(null),C=(0,l.useRef)(null),N=(0,l.useCallback)(e=>{p(t=>{let a=[...t.slice(0,h+1),o(e)];return a.length>21&&a.shift(),a}),b(e=>Math.min(e+1,20))},[h]),y=(0,l.useCallback)(()=>{if(h<=0)return;let e=h-1;b(e),t(o(m[e]))},[h,m]),F=(0,l.useCallback)(()=>{let e=i();t(e),N(e)},[N]),S=(0,l.useCallback)((e,t)=>{let a=k.current;if(!a)return null;let s=a.getBoundingClientRect(),l=e-s.left,n=t-s.top,r=s.width/16,i=Math.floor(l/r),o=Math.floor(n/r);return i<0||i>=16||o<0||o>=16?null:[i,o]},[]),A=(0,l.useCallback)((e,t,s)=>{if("fill"===d){let l=o(s),n=l[t][e];if(n===a)return l;let r=[[e,t]];for(;r.length>0;){let[e,t]=r.pop();e<0||e>=16||t<0||t>=16||l[t][e]!==n||(l[t][e]=a,r.push([e+1,t],[e-1,t],[e,t+1],[e,t-1]))}return l}let l=o(s);return l[t][e]="erase"===d?"":a,l},[d,a]),E=(0,l.useRef)(e);(0,l.useEffect)(()=>{E.current=e},[e]);let L=(0,l.useCallback)((a,s)=>{let l=A(a,s,e);t(l),E.current=l,"fill"===d?N(l):g(!0)},[e,A,d,N]),M=(0,l.useCallback)((e,s)=>{if(!v||"fill"===d)return;let l=E.current,n=l[s][e],r="erase"===d?"":a;if(n===r)return;let i=o(l);i[s][e]=r,E.current=i,t(i)},[v,d,a]),D=(0,l.useCallback)(()=>{v&&(N(E.current),g(!1))},[v,N]),T=(0,l.useCallback)(e=>{e.preventDefault();let t=S(e.clientX,e.clientY);t&&L(t[0],t[1])},[S,L]),P=(0,l.useCallback)(e=>{let t=S(e.clientX,e.clientY);t&&M(t[0],t[1])},[S,M]),I=(0,l.useCallback)(()=>{D()},[D]),R=(0,l.useCallback)(e=>{e.preventDefault();let t=e.touches[0],a=S(t.clientX,t.clientY);a&&L(a[0],a[1])},[S,L]),B=(0,l.useCallback)(e=>{e.preventDefault();let t=e.touches[0],a=S(t.clientX,t.clientY);a&&M(a[0],a[1])},[S,M]),H=(0,l.useCallback)(e=>{e.preventDefault(),D()},[D]);(0,l.useEffect)(()=>{let t=k.current;if(!t)return;let a=t.getContext("2d");if(!a)return;let s=t.width,l=s/16;a.fillStyle="#1C1917",a.fillRect(0,0,s,s);for(let t=0;t<16;t++)for(let s=0;s<16;s++){let n=e[t][s];n&&(a.fillStyle=n,a.fillRect(s*l,t*l,l,l))}if(u){a.strokeStyle="rgba(255,255,255,0.08)",a.lineWidth=1;for(let e=0;e<=16;e++)a.beginPath(),a.moveTo(e*l,0),a.lineTo(e*l,s),a.stroke(),a.beginPath(),a.moveTo(0,e*l),a.lineTo(s,e*l),a.stroke()}},[e,u]);let O=(0,l.useCallback)(()=>{let t=document.createElement("canvas");t.width=512,t.height=512;let a=t.getContext("2d");a.clearRect(0,0,512,512);for(let t=0;t<16;t++)for(let s=0;s<16;s++){let l=e[t][s];l&&(a.fillStyle=l,a.fillRect(32*s,32*t,32,32))}let s=document.createElement("a");s.download="pixel-art.png",s.href=t.toDataURL("image/png"),s.click()},[e]),W=(0,l.useCallback)(async()=>{let e=`Check out my pixel art made on creator.ai!
17
18https://creator.ai/apps/pixel-studio`;if(navigator.share)try{await navigator.share({text:e})}catch{}else await navigator.clipboard.writeText(e),j(!0),setTimeout(()=>j(!1),1500)},[]);return(0,s.jsx)(n.H,{name:"Pixel Studio",tagline:"Create pixel art right in your browser",primaryColor:"#4facfe",children:(0,s.jsxs)("div",{className:"flex flex-col gap-4",children:[(0,s.jsx)("div",{ref:C,className:"w-full aspect-square relative rounded-[12px] overflow-hidden border border-[#292524]",children:(0,s.jsx)("canvas",{ref:k,width:512,height:512,className:"w-full h-full cursor-crosshair touch-none",style:{imageRendering:"pixelated"},onMouseDown:T,onMouseMove:P,onMouseUp:I,onMouseLeave:I,onTouchStart:R,onTouchMove:B,onTouchEnd:H})}),(0,s.jsxs)("div",{className:"bg-[#1C1917] rounded-[12px] p-3 space-y-3",children:[(0,s.jsx)("div",{className:"flex items-center gap-2",children:[{id:"draw",label:"Draw",icon:"✏️"},{id:"erase",label:"Erase",icon:"\uD83E\uDDF9"},{id:"fill",label:"Fill",icon:"\uD83E\uDEA3"}].map(e=>(0,s.jsxs)("button",{onClick:()=>x(e.id),className:`flex-1 h-[40px] rounded-[10px] text-[13px] font-semibold transition-all active:scale-[0.98] flex items-center justify-center gap-1.5 ${d===e.id?"bg-[#4facfe] text-white":"bg-[#292524] text-[#A8A29E] hover:text-[#F5F5F4]"}`,children:[(0,s.jsx)("span",{className:"text-[14px]",children:e.icon}),e.label]},e.id))}),(0,s.jsxs)("div",{className:"flex items-center gap-2",children:[(0,s.jsx)("button",{onClick:y,disabled:h<=0,className:"flex-1 h-[36px] rounded-[8px] bg-[#292524] text-[12px] font-semibold text-[#A8A29E] hover:text-[#F5F5F4] transition-colors active:scale-[0.98] disabled:opacity-30 disabled:cursor-not-allowed",children:"↩ Undo"}),(0,s.jsx)("button",{onClick:F,className:"flex-1 h-[36px] rounded-[8px] bg-[#292524] text-[12px] font-semibold text-[#A8A29E] hover:text-[#F5F5F4] transition-colors active:scale-[0.98]",children:"Clear"}),(0,s.jsxs)("button",{onClick:()=>f(!u),className:`flex-1 h-[36px] rounded-[8px] text-[12px] font-semibold transition-colors active:scale-[0.98] ${u?"bg-[#4facfe]/20 text-[#4facfe]":"bg-[#292524] text-[#A8A29E]"}`,children:["Grid ",u?"On":"Off"]})]})]}),(0,s.jsxs)("div",{className:"bg-[#1C1917] rounded-[12px] p-3 space-y-3",children:[(0,s.jsx)("h3",{className:"text-[13px] font-semibold text-[#78716C]",style:{fontFamily:"var(--font-display)"},children:"Colors"}),(0,s.jsx)("div",{className:"grid grid-cols-8 gap-2",children:r.map(e=>(0,s.jsx)("button",{onClick:()=>{c(e),"erase"===d&&x("draw")},className:`aspect-square rounded-[8px] border-2 transition-transform active:scale-[0.9] ${a===e&&"erase"!==d?"border-white scale-110":"border-[#292524]"}`,style:{backgroundColor:e}},e))}),(0,s.jsxs)("div",{className:"flex items-center gap-3",children:[(0,s.jsx)("label",{className:"text-[12px] text-[#78716C]",children:"Custom:"}),(0,s.jsx)("input",{type:"color",value:a,onChange:e=>{c(e.target.value),"erase"===d&&x("draw")},className:"w-[36px] h-[36px] rounded-[8px] border border-[#292524] cursor-pointer bg-transparent"}),(0,s.jsx)("span",{className:"text-[12px] text-[#A8A29E] font-mono",children:a})]})]}),(0,s.jsxs)("div",{className:"flex gap-3",children:[(0,s.jsx)("button",{onClick:O,className:"flex-1 h-[48px] rounded-[12px] text-[15px] font-semibold text-white transition-all active:scale-[0.98]",style:{background:"linear-gradient(135deg, #4facfe, #00f2fe)"},children:"Export PNG"}),(0,s.jsx)("button",{onClick:W,className:"flex-1 h-[48px] rounded-[12px] bg-[#1C1917] border border-[#292524] text-[15px] font-semibold text-[#F5F5F4] transition-colors hover:bg-[#292524] active:scale-[0.98]",children:w?"Copied!":"Share"})]})]})})}}},e=>{e.O(0,[8693,700,7358],()=>e(e.s=75302)),_N_E=e.O()}]);