bauform-generator / index.html
Stelvin's picture
Bauhaus Pattern Completed
3ae0c14 verified
<!DOCTYPE html><html lang="en" class="geist_a71539c9-module__T19VSG__variable geist_mono_8d43a2aa-module__8Li5zG__variable h-full antialiased"><head><meta charSet="utf-8"/><meta name="viewport" content="width=device-width, initial-scale=1"/><link rel="preload" href="/_next/static/media/797e433ab948586e-s.p.0.q-h669a_dqa.woff2" as="font" crossorigin="" type="font/woff2"/><link rel="preload" href="/_next/static/media/caa3a2e1cccd8315-s.p.16t1db8_9y2o~.woff2" as="font" crossorigin="" type="font/woff2"/><link rel="stylesheet" href="/_next/static/chunks/1888-cj9wcw0q.css" data-precedence="next"/><link rel="preload" as="script" fetchPriority="low" href="/_next/static/chunks/15qx7pm65vta4.js"/><script src="/_next/static/chunks/05ynd69aob1p7.js" async=""></script><script src="/_next/static/chunks/0n~dq4kpx9xxx.js" async=""></script><script src="/_next/static/chunks/turbopack-0v2s.ahsq5u-o.js" async=""></script><script src="/_next/static/chunks/0t0zq6fibhgqr.js" async=""></script><script src="/_next/static/chunks/0dbhjjzl8qfwv.js" async=""></script><script src="/_next/static/chunks/0dutqbz0xe-nc.js" async=""></script><meta name="next-size-adjust" content=""/><title>Bauform Generator</title><meta name="description" content="A Generative Bauhaus Pattern System"/><link rel="icon" href="/favicon.ico?favicon.0x3dzn~oxb6tn.ico" sizes="256x256" type="image/x-icon"/><script src="/_next/static/chunks/03~yq9q893hmn.js" noModule=""></script></head><body class="min-h-full flex flex-col"><div hidden=""><!--$--><!--/$--></div><div data-rht-toaster="" style="position:fixed;z-index:9999;top:16px;left:16px;right:16px;bottom:16px;pointer-events:none"></div><div class="fixed inset-0 bg-[#f2eee3] text-zinc-900 overflow-hidden font-sans select-none"><section aria-label="Notifications alt+T" tabindex="-1" aria-live="polite" aria-relevant="additions text" aria-atomic="false"></section><div class="absolute inset-0 z-0"></div><div class="absolute top-4 right-4 sm:top-8 sm:right-8 z-30 flex flex-col items-end gap-3 w-[calc(100%-2rem)] sm:w-80"><div class="flex gap-2 p-1.5 bg-black/90 backdrop-blur-xl border border-white/10 rounded-2xl shadow-2xl text-white"><button class="p-3 hover:bg-white/10 rounded-xl transition-all active:scale-90" title="Shuffle Pattern"><svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-shuffle" aria-hidden="true"><path d="m18 14 4 4-4 4"></path><path d="m18 2 4 4-4 4"></path><path d="M2 18h1.973a4 4 0 0 0 3.3-1.7l5.454-8.6a4 4 0 0 1 3.3-1.7H22"></path><path d="M2 6h1.972a4 4 0 0 1 3.6 2.2"></path><path d="M22 18h-6.041a4 4 0 0 1-3.3-1.8l-.359-.45"></path></svg></button><button class="flex items-center gap-2 px-4 py-2 bg-white text-black font-bold rounded-xl hover:bg-zinc-200 transition-all active:scale-95"><svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-download" aria-hidden="true"><path d="M12 15V3"></path><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path><path d="m7 10 5 5 5-5"></path></svg><span class="text-[10px] uppercase tracking-widest font-black hidden sm:inline">Export</span></button><button class="p-3 rounded-xl transition-all duration-300 bg-white/20"><svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-settings transition-transform duration-700 ease-in-out rotate-180" aria-hidden="true"><path d="M9.671 4.136a2.34 2.34 0 0 1 4.659 0 2.34 2.34 0 0 0 3.319 1.915 2.34 2.34 0 0 1 2.33 4.033 2.34 2.34 0 0 0 0 3.831 2.34 2.34 0 0 1-2.33 4.033 2.34 2.34 0 0 0-3.319 1.915 2.34 2.34 0 0 1-4.659 0 2.34 2.34 0 0 0-3.32-1.915 2.34 2.34 0 0 1-2.33-4.033 2.34 2.34 0 0 0 0-3.831A2.34 2.34 0 0 1 6.35 6.051a2.34 2.34 0 0 0 3.319-1.915"></path><circle cx="12" cy="12" r="3"></circle></svg></button></div><div class="w-full bg-black/90 backdrop-blur-2xl border border-white/10 rounded-3xl p-6 shadow-2xl animate-in fade-in slide-in-from-top-4 duration-500 text-white max-h-[80vh] overflow-y-auto"><div class="space-y-6"><section class="space-y-4"><div class="flex items-center gap-2 text-zinc-500 mb-2"><svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-grid3x3 lucide-grid-3x3" aria-hidden="true"><rect width="18" height="18" x="3" y="3" rx="2"></rect><path d="M3 9h18"></path><path d="M3 15h18"></path><path d="M9 3v18"></path><path d="M15 3v18"></path></svg><span class="text-[10px] uppercase tracking-[0.2em] font-bold">Geometry</span></div><div class="space-y-2"><div class="flex justify-between text-[10px] font-bold uppercase tracking-widest text-zinc-400"><span>Zoom</span><span class="text-white">10</span></div><input type="range" min="4" max="18" step="0.1" class="w-full h-1 bg-white/10 rounded-full appearance-none accent-white cursor-pointer" value="10"/></div><div class="space-y-2"><div class="flex justify-between text-[10px] font-bold uppercase tracking-widest text-zinc-400"><span>Fill Rate</span><span class="text-white">0.8</span></div><input type="range" min="0.2" max="1" step="0.05" class="w-full h-1 bg-white/10 rounded-full appearance-none accent-white cursor-pointer" value="0.8"/></div><div class="space-y-2"><div class="flex justify-between text-[10px] font-bold uppercase tracking-widest text-zinc-400"><span>Radius</span><span class="text-white">0.35</span></div><input type="range" min="0" max="0.5" step="0.01" class="w-full h-1 bg-white/10 rounded-full appearance-none accent-white cursor-pointer" value="0.35"/></div></section><section class="space-y-4 pt-4 border-t border-white/5"><div class="flex items-center gap-2 text-zinc-500 mb-2"><svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-layers" aria-hidden="true"><path d="M12.83 2.18a2 2 0 0 0-1.66 0L2.6 6.08a1 1 0 0 0 0 1.83l8.58 3.91a2 2 0 0 0 1.66 0l8.58-3.9a1 1 0 0 0 0-1.83z"></path><path d="M2 12a1 1 0 0 0 .58.91l8.6 3.91a2 2 0 0 0 1.65 0l8.58-3.9A1 1 0 0 0 22 12"></path><path d="M2 17a1 1 0 0 0 .58.91l8.6 3.91a2 2 0 0 0 1.65 0l8.58-3.9A1 1 0 0 0 22 17"></path></svg><span class="text-[10px] uppercase tracking-[0.2em] font-bold">Layering</span></div><div class="space-y-2"><div class="flex justify-between text-[10px] font-bold uppercase tracking-widest text-zinc-400"><span>Macro Shift</span><span class="text-white">0.5</span></div><input type="range" min="0" max="1" step="0.01" class="w-full h-1 bg-white/10 rounded-full appearance-none accent-white cursor-pointer" value="0.5"/></div></section><section class="space-y-4 pt-4 border-t border-white/5"><div class="flex items-center gap-2 text-zinc-500 mb-2"><svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-palette" aria-hidden="true"><path d="M12 22a1 1 0 0 1 0-20 10 9 0 0 1 10 9 5 5 0 0 1-5 5h-2.25a1.75 1.75 0 0 0-1.4 2.8l.3.4a1.75 1.75 0 0 1-1.4 2.8z"></path><circle cx="13.5" cy="6.5" r=".5" fill="currentColor"></circle><circle cx="17.5" cy="10.5" r=".5" fill="currentColor"></circle><circle cx="6.5" cy="12.5" r=".5" fill="currentColor"></circle><circle cx="8.5" cy="7.5" r=".5" fill="currentColor"></circle></svg><span class="text-[10px] uppercase tracking-[0.2em] font-bold">Palette</span></div><div class="flex justify-between items-center gap-2"><div class="relative group"><input type="color" class="w-10 h-10 rounded-full border-2 border-white/10 bg-transparent cursor-pointer hover:scale-110 transition-transform overflow-hidden" value="#f2eee3"/></div><div class="relative group"><input type="color" class="w-10 h-10 rounded-full border-2 border-white/10 bg-transparent cursor-pointer hover:scale-110 transition-transform overflow-hidden" value="#1a1a1a"/></div><div class="relative group"><input type="color" class="w-10 h-10 rounded-full border-2 border-white/10 bg-transparent cursor-pointer hover:scale-110 transition-transform overflow-hidden" value="#e63946"/></div><div class="relative group"><input type="color" class="w-10 h-10 rounded-full border-2 border-white/10 bg-transparent cursor-pointer hover:scale-110 transition-transform overflow-hidden" value="#457b9d"/></div><div class="relative group"><input type="color" class="w-10 h-10 rounded-full border-2 border-white/10 bg-transparent cursor-pointer hover:scale-110 transition-transform overflow-hidden" value="#ffb703"/></div></div></section></div></div></div></div><!--$--><!--/$--><script src="/_next/static/chunks/15qx7pm65vta4.js" id="_R_" async=""></script><script>(self.__next_f=self.__next_f||[]).push([0])</script><script>self.__next_f.push([1,"1:\"$Sreact.fragment\"\n2:I[5766,[\"/_next/static/chunks/0t0zq6fibhgqr.js\",\"/_next/static/chunks/0dbhjjzl8qfwv.js\"],\"Toaster\"]\n3:I[39756,[\"/_next/static/chunks/0t0zq6fibhgqr.js\",\"/_next/static/chunks/0dbhjjzl8qfwv.js\"],\"default\"]\n4:I[37457,[\"/_next/static/chunks/0t0zq6fibhgqr.js\",\"/_next/static/chunks/0dbhjjzl8qfwv.js\"],\"default\"]\n5:I[47257,[\"/_next/static/chunks/0t0zq6fibhgqr.js\",\"/_next/static/chunks/0dbhjjzl8qfwv.js\"],\"ClientPageRoot\"]\n6:I[31713,[\"/_next/static/chunks/0t0zq6fibhgqr.js\",\"/_next/static/chunks/0dbhjjzl8qfwv.js\",\"/_next/static/chunks/0dutqbz0xe-nc.js\"],\"default\"]\n9:I[97367,[\"/_next/static/chunks/0t0zq6fibhgqr.js\",\"/_next/static/chunks/0dbhjjzl8qfwv.js\"],\"OutletBoundary\"]\na:\"$Sreact.suspense\"\nc:I[97367,[\"/_next/static/chunks/0t0zq6fibhgqr.js\",\"/_next/static/chunks/0dbhjjzl8qfwv.js\"],\"ViewportBoundary\"]\ne:I[97367,[\"/_next/static/chunks/0t0zq6fibhgqr.js\",\"/_next/static/chunks/0dbhjjzl8qfwv.js\"],\"MetadataBoundary\"]\n10:I[68027,[\"/_next/static/chunks/0t0zq6fibhgqr.js\",\"/_next/static/chunks/0dbhjjzl8qfwv.js\"],\"default\",1]\n:HL[\"/_next/static/chunks/1888-cj9wcw0q.css\",\"style\"]\n:HL[\"/_next/static/media/797e433ab948586e-s.p.0.q-h669a_dqa.woff2\",\"font\",{\"crossOrigin\":\"\",\"type\":\"font/woff2\"}]\n:HL[\"/_next/static/media/caa3a2e1cccd8315-s.p.16t1db8_9y2o~.woff2\",\"font\",{\"crossOrigin\":\"\",\"type\":\"font/woff2\"}]\n"])</script><script>self.__next_f.push([1,"0:{\"P\":null,\"c\":[\"\",\"\"],\"q\":\"\",\"i\":false,\"f\":[[[\"\",{\"children\":[\"__PAGE__\",{}]},\"$undefined\",\"$undefined\",16],[[\"$\",\"$1\",\"c\",{\"children\":[[[\"$\",\"link\",\"0\",{\"rel\":\"stylesheet\",\"href\":\"/_next/static/chunks/1888-cj9wcw0q.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\",\"nonce\":\"$undefined\"}],[\"$\",\"script\",\"script-0\",{\"src\":\"/_next/static/chunks/0t0zq6fibhgqr.js\",\"async\":true,\"nonce\":\"$undefined\"}],[\"$\",\"script\",\"script-1\",{\"src\":\"/_next/static/chunks/0dbhjjzl8qfwv.js\",\"async\":true,\"nonce\":\"$undefined\"}]],[\"$\",\"html\",null,{\"lang\":\"en\",\"className\":\"geist_a71539c9-module__T19VSG__variable geist_mono_8d43a2aa-module__8Li5zG__variable h-full antialiased\",\"children\":[\"$\",\"body\",null,{\"className\":\"min-h-full flex flex-col\",\"children\":[[\"$\",\"$L2\",null,{}],[\"$\",\"$L3\",null,{\"parallelRouterKey\":\"children\",\"error\":\"$undefined\",\"errorStyles\":\"$undefined\",\"errorScripts\":\"$undefined\",\"template\":[\"$\",\"$L4\",null,{}],\"templateStyles\":\"$undefined\",\"templateScripts\":\"$undefined\",\"notFound\":[[[\"$\",\"title\",null,{\"children\":\"404: This page could not be found.\"}],[\"$\",\"div\",null,{\"style\":{\"fontFamily\":\"system-ui,\\\"Segoe UI\\\",Roboto,Helvetica,Arial,sans-serif,\\\"Apple Color Emoji\\\",\\\"Segoe UI Emoji\\\"\",\"height\":\"100vh\",\"textAlign\":\"center\",\"display\":\"flex\",\"flexDirection\":\"column\",\"alignItems\":\"center\",\"justifyContent\":\"center\"},\"children\":[\"$\",\"div\",null,{\"children\":[[\"$\",\"style\",null,{\"dangerouslySetInnerHTML\":{\"__html\":\"body{color:#000;background:#fff;margin:0}.next-error-h1{border-right:1px solid rgba(0,0,0,.3)}@media (prefers-color-scheme:dark){body{color:#fff;background:#000}.next-error-h1{border-right:1px solid rgba(255,255,255,.3)}}\"}}],[\"$\",\"h1\",null,{\"className\":\"next-error-h1\",\"style\":{\"display\":\"inline-block\",\"margin\":\"0 20px 0 0\",\"padding\":\"0 23px 0 0\",\"fontSize\":24,\"fontWeight\":500,\"verticalAlign\":\"top\",\"lineHeight\":\"49px\"},\"children\":404}],[\"$\",\"div\",null,{\"style\":{\"display\":\"inline-block\"},\"children\":[\"$\",\"h2\",null,{\"style\":{\"fontSize\":14,\"fontWeight\":400,\"lineHeight\":\"49px\",\"margin\":0},\"children\":\"This page could not be found.\"}]}]]}]}]],[]],\"forbidden\":\"$undefined\",\"unauthorized\":\"$undefined\"}]]}]}]]}],{\"children\":[[\"$\",\"$1\",\"c\",{\"children\":[[\"$\",\"$L5\",null,{\"Component\":\"$6\",\"serverProvidedParams\":{\"searchParams\":{},\"params\":{},\"promises\":[\"$@7\",\"$@8\"]}}],[[\"$\",\"script\",\"script-0\",{\"src\":\"/_next/static/chunks/0dutqbz0xe-nc.js\",\"async\":true,\"nonce\":\"$undefined\"}]],[\"$\",\"$L9\",null,{\"children\":[\"$\",\"$a\",null,{\"name\":\"Next.MetadataOutlet\",\"children\":\"$@b\"}]}]]}],{},null,false,null]},null,false,null],[\"$\",\"$1\",\"h\",{\"children\":[null,[\"$\",\"$Lc\",null,{\"children\":\"$Ld\"}],[\"$\",\"div\",null,{\"hidden\":true,\"children\":[\"$\",\"$Le\",null,{\"children\":[\"$\",\"$a\",null,{\"name\":\"Next.Metadata\",\"children\":\"$Lf\"}]}]}],[\"$\",\"meta\",null,{\"name\":\"next-size-adjust\",\"content\":\"\"}]]}],false]],\"m\":\"$undefined\",\"G\":[\"$10\",[[\"$\",\"link\",\"0\",{\"rel\":\"stylesheet\",\"href\":\"/_next/static/chunks/1888-cj9wcw0q.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\",\"nonce\":\"$undefined\"}]]],\"S\":true,\"h\":null,\"s\":\"$undefined\",\"l\":\"$undefined\",\"p\":\"$undefined\",\"d\":\"$undefined\",\"b\":\"7t_yi52BOz2-VmF9Pkp_V\"}\n"])</script><script>self.__next_f.push([1,"7:{}\n8:\"$0:f:0:1:1:children:0:props:children:0:props:serverProvidedParams:params\"\n"])</script><script>self.__next_f.push([1,"d:[[\"$\",\"meta\",\"0\",{\"charSet\":\"utf-8\"}],[\"$\",\"meta\",\"1\",{\"name\":\"viewport\",\"content\":\"width=device-width, initial-scale=1\"}]]\n"])</script><script>self.__next_f.push([1,"11:I[27201,[\"/_next/static/chunks/0t0zq6fibhgqr.js\",\"/_next/static/chunks/0dbhjjzl8qfwv.js\"],\"IconMark\"]\nb:null\nf:[[\"$\",\"title\",\"0\",{\"children\":\"Bauform Generator\"}],[\"$\",\"meta\",\"1\",{\"name\":\"description\",\"content\":\"A Generative Bauhaus Pattern System\"}],[\"$\",\"link\",\"2\",{\"rel\":\"icon\",\"href\":\"/favicon.ico?favicon.0x3dzn~oxb6tn.ico\",\"sizes\":\"256x256\",\"type\":\"image/x-icon\"}],[\"$\",\"$L11\",\"3\",{}]]\n"])</script></body></html>