https://creator.ai/_next/static/chunks/app/apps/pattern-forge/page-145cf91608033674.js

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

1State)(!1);(0,n.useEffect)(()=>{if(window.matchMedia("(display-mode: standalone)").matches||"standalone"in window.navigator&&window.navigator.standalone)return void i(!0);let e=navigator.userAgent,t=/iPad|iPhone|iPod/.test(e),a=/Android/.test(e);c(t),m(a);let n=localStorage.getItem("pwa-install-dismissed");if(parseInt(localStorage.getItem("pwa-install-dismiss-count")||"0",10)>=3||n&&(Date.now()-parseInt(n,10))/864e5<7)return;let r=setTimeout(()=>{s(!0)},15e3),l=e=>{e.preventDefault(),window.deferredPrompt=e};return window.addEventListener("beforeinstallprompt",l),()=>{clearTimeout(r),window.removeEventListener("beforeinstallprompt",l)}},[]);let p=()=>{s(!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())},u=async()=>{let e=window.deferredPrompt;e&&await e.prompt(),s(!1)};return o||!t?null:(0,a.jsxs)(a.Fragment,{children:[(0,a.jsx)("div",{className:"fixed inset-0 bg-black/50 z-40 animate-fade-in",onClick:p}),(0,a.jsx)("div",{className:"fixed bottom-0 left-0 right-0 z-50 animate-slide-up",children:(0,a.jsxs)("div",{className:"bg-[#1C1917] rounded-t-[20px] px-6 pt-5 pb-[max(24px,env(safe-area-inset-bottom))]",children:[(0,a.jsx)("div",{className:"w-10 h-1 bg-[#3F3B39] rounded-full mx-auto mb-5"}),(0,a.jsxs)("h3",{className:"text-lg font-bold text-[#F5F5F4] text-center mb-1",style:{fontFamily:"var(--font-display)"},children:["Install ",e]}),(0,a.jsx)("p",{className:"text-sm text-[#A8A29E] text-center mb-6",children:"Add to your home screen for the full app experience"}),d&&(0,a.jsxs)("div",{className:"space-y-4",children:[(0,a.jsx)(l,{number:1,text:"Tap the Share button in Safari",icon:(0,a.jsx)("svg",{className:"w-5 h-5",fill:"none",viewBox:"0 0 24 24",stroke:"currentColor",strokeWidth:1.5,children:(0,a.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,a.jsx)(l,{number:2,text:'Scroll down and tap "Add to Home Screen"',icon:(0,a.jsx)("svg",{className:"w-5 h-5",fill:"none",viewBox:"0 0 24 24",stroke:"currentColor",strokeWidth:1.5,children:(0,a.jsx)("path",{strokeLinecap:"round",strokeLinejoin:"round",d:"M12 4.5v15m7.5-7.5h-15"})})}),(0,a.jsx)(l,{number:3,text:'Tap "Add" to install',icon:(0,a.jsx)("svg",{className:"w-5 h-5",fill:"none",viewBox:"0 0 24 24",stroke:"currentColor",strokeWidth:1.5,children:(0,a.jsx)("path",{strokeLinecap:"round",strokeLinejoin:"round",d:"m4.5 12.75 6 6 9-13.5"})})})]}),x&&(0,a.jsx)("button",{onClick:u,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"}),!d&&!x&&(0,a.jsxs)("div",{className:"space-y-4",children:[(0,a.jsx)(l,{number:1,text:"Open this page in a mobile browser",icon:(0,a.jsx)("svg",{className:"w-5 h-5",fill:"none",viewBox:"0 0 24 24",stroke:"currentColor",strokeWidth:1.5,children:(0,a.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,a.jsx)(l,{number:2,text:'Use your browser menu to "Add to Home Screen"',icon:(0,a.jsx)("svg",{className:"w-5 h-5",fill:"none",viewBox:"0 0 24 24",stroke:"currentColor",strokeWidth:1.5,children:(0,a.jsx)("path",{strokeLinecap:"round",strokeLinejoin:"round",d:"M12 4.5v15m7.5-7.5h-15"})})})]}),(0,a.jsx)("button",{onClick:p,className:"w-full mt-5 py-3 text-sm text-[#78716C] font-medium text-center active:text-[#A8A29E]",children:"Not now"})]})}),(0,a.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 l({number:e,text:t,icon:s}){return(0,a.jsxs)("div",{className:"flex items-center gap-4",children:[(0,a.jsx)("div",{className:"w-10 h-10 rounded-full bg-[#292524] flex items-center justify-center text-[#A8A29E] shrink-0",children:s}),(0,a.jsxs)("div",{className:"flex-1",children:[(0,a.jsxs)("span",{className:"text-[10px] font-semibold uppercase tracking-wider text-[#78716C]",children:["Step ",e]}),(0,a.jsx)("p",{className:"text-sm text-[#D6D3D1]",children:t})]})]})}},79567:(e,t,s)=>{"use strict";s.d(t,{PatternForge:()=>o});var a=s(43163),n=s(19115),r=s(8273);let l={dots:"Dots",lines:"Lines",waves:"Waves",chevrons:"Chevrons",crosses:"Crosses",diamonds:"Diamonds",hexagons:"Hexagons",zigzag:"Zigzag"};

16function o(){let[e,t]=(0,n.useState)("dots"),[s,o]=(0,n.useState)(10),[i,d]=(0,n.useState)(10),[c,x]=(0,n.useState)("#43e97b"),[m,p]=(0,n.useState)("#0F0F0F"),[u,h]=(0,n.useState)(0),[b,f]=(0,n.useState)(!1),g=(0,n.useMemo)(()=>(function(e,t,s,a,n,r){let l=t+s,o=t/2,i="";switch(e){case"dots":i=`<circle cx="${l/2}" cy="${l/2}" r="${o}" fill="${a}" />`;break;case"lines":i=`<line x1="0" y1="0" x2="0" y2="${l}" stroke="${a}" stroke-width="${t/3}" />`;break;case"waves":i=`<path d="M0 ${l/2} Q ${l/4} 0, ${l/2} ${l/2} T ${l} ${l/2}" fill="none" stroke="${a}" stroke-width="${t/4}" />`;break;case"chevrons":i=`<path d="M0 ${.75*l} L ${l/2} ${.25*l} L ${l} ${.75*l}" fill="none" stroke="${a}" stroke-width="${t/4}" />`;break;case"crosses":i=`
17        <line x1="${l/2}" y1="${s/2}" x2="${l/2}" y2="${l-s/2}" stroke="${a}" stroke-width="${t/5}" />
18        <line x1="${s/2}" y1="${l/2}" x2="${l-s/2}" y2="${l/2}" stroke="${a}" stroke-width="${t/5}" />`;break;case"diamonds":i=`<polygon points="${l/2},${s/2} ${l-s/2},${l/2} ${l/2},${l-s/2} ${s/2},${l/2}" fill="${a}" />`;break;case"hexagons":{let e=l/2,s=l/2,n=Array.from({length:6},(t,a)=>{let n=Math.PI/3*a-Math.PI/6;return`${e+o*Math.cos(n)},${s+o*Math.sin(n)}`}).join(" ");i=`<polygon points="${n}" fill="none" stroke="${a}" stroke-width="${t/6}" />`;break}case"zigzag":i=`<polyline points="0,${l} ${l/4},0 ${l/2},${l} ${3*l/4},0 ${l},${l}" fill="none" stroke="${a}" stroke-width="${t/5}" />`}return`<svg xmlns="http://www.w3.org/2000/svg" width="400" height="400">
19  <defs>
20    <pattern id="p" patternUnits="userSpaceOnUse" width="${l}" height="${l}" patternTransform="rotate(${r})">
21      ${i}
22    </pattern>
23  </defs>
24  <rect width="400" height="400" fill="${n}" />
25  <rect width="400" height="400" fill="url(#p)" />
26</svg>`})(e,s,i,c,m,u),[e,s,i,c,m,u]),v=(0,n.useMemo)(()=>`data:image/svg+xml;charset=utf-8,${encodeURIComponent(g)}`,[g]),j=(0,n.useCallback)(()=>{let t=new Blob([g],{type:"image/svg+xml"}),s=URL.createObjectURL(t),a=document.createElement("a");a.href=s,a.download=`pattern-${e}.svg`,document.body.appendChild(a),a.click(),document.body.removeChild(a),URL.revokeObjectURL(s)},[g,e]),w=(0,n.useCallback)(async()=>{try{await navigator.clipboard.writeText(g),f(!0),setTimeout(()=>f(!1),2e3)}catch{let e=document.createElement("textarea");e.value=g,document.body.appendChild(e),e.select(),document.execCommand("copy"),document.body.removeChild(e),f(!0),setTimeout(()=>f(!1),2e3)}},[g]);return(0,a.jsx)(r.H,{name:"Pattern Forge",tagline:"Create seamless SVG patterns",primaryColor:"#43e97b",children:(0,a.jsxs)("div",{className:"flex flex-col gap-5",children:[(0,a.jsxs)("div",{children:[(0,a.jsx)("label",{className:"block text-[13px] font-medium text-[#D6D3D1] mb-2",children:"Pattern Type"}),(0,a.jsx)("div",{className:"grid grid-cols-4 gap-2",children:Object.keys(l).map(s=>(0,a.jsx)("button",{onClick:()=>t(s),className:"h-[36px] rounded-[8px] text-[12px] font-semibold transition-all",style:{background:e===s?"linear-gradient(135deg, #43e97b, #38f9d7)":"#1C1917",color:e===s?"#0F0F0F":"#A8A29E",border:e===s?"none":"1px solid #292524"},children:l[s]},s))})]}),(0,a.jsxs)("div",{className:"grid grid-cols-2 gap-4",children:[(0,a.jsxs)("div",{children:[(0,a.jsxs)("label",{className:"block text-[12px] font-medium text-[#A8A29E] mb-1",children:["Size: ",s,"px"]}),(0,a.jsx)("input",{type:"range",min:4,max:40,value:s,onChange:e=>o(Number(e.target.value)),className:"w-full accent-[#43e97b]"})]}),(0,a.jsxs)("div",{children:[(0,a.jsxs)("label",{className:"block text-[12px] font-medium text-[#A8A29E] mb-1",children:["Spacing: ",i,"px"]}),(0,a.jsx)("input",{type:"range",min:2,max:40,value:i,onChange:e=>d(Number(e.target.value)),className:"w-full accent-[#43e97b]"})]}),(0,a.jsxs)("div",{className:"col-span-2",children:[(0,a.jsxs)("label",{className:"block text-[12px] font-medium text-[#A8A29E] mb-1",children:["Rotation: ",u,"\xb0"]}),(0,a.jsx)("input",{type:"range",min:0,max:360,value:u,onChange:e=>h(Number(e.target.value)),className:"w-full accent-[#43e97b]"})]})]}),(0,a.jsxs)("div",{className:"flex gap-4",children:[(0,a.jsxs)("div",{className:"flex-1",children:[(0,a.jsx)("label",{className:"block text-[12px] font-medium text-[#A8A29E] mb-2",children:"Pattern Color"}),(0,a.jsxs)("div",{className:"flex items-center gap-2",children:[(0,a.jsx)("input",{type:"color",value:c,onChange:e=>x(e.target.value),className:"w-10 h-10 rounded-[8px] border border-[#292524] bg-transparent cursor-pointer"}),(0,a.jsx)("span",{className:"text-[13px] text-[#78716C] font-mono",children:c})]})]}),(0,a.jsxs)("div",{className:"flex-1",children:[(0,a.jsx)("label",{className:"block text-[12px] font-medium text-[#A8A29E] mb-2",children:"Backgroun

26d"}),(0,a.jsxs)("div",{className:"flex items-center gap-2",children:[(0,a.jsx)("input",{type:"color",value:m,onChange:e=>p(e.target.value),className:"w-10 h-10 rounded-[8px] border border-[#292524] bg-transparent cursor-pointer"}),(0,a.jsx)("span",{className:"text-[13px] text-[#78716C] font-mono",children:m})]})]})]}),(0,a.jsxs)("div",{children:[(0,a.jsx)("label",{className:"block text-[13px] font-medium text-[#D6D3D1] mb-2",children:"Preview"}),(0,a.jsx)("div",{className:"w-full aspect-square rounded-[12px] border border-[#292524] overflow-hidden",style:{backgroundImage:`url("${v}")`,backgroundSize:"cover"}})]}),(0,a.jsxs)("div",{className:"flex gap-3",children:[(0,a.jsx)("button",{onClick:j,className:"flex-1 h-[48px] rounded-[12px] text-[15px] font-semibold text-[#0F0F0F] transition-all active:scale-[0.98]",style:{background:"linear-gradient(135deg, #43e97b, #38f9d7)"},children:"Download SVG"}),(0,a.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:b?"Copied!":"Copy SVG Code"})]})]})})}}},e=>{e.O(0,[8693,700,7358],()=>e(e.s=41478)),_N_E=e.O()}]);