Your Generated Album Art

Description: ${userDescription}

`; const response = await fetch('/integrations/pdf-generation/pdf', { method: 'POST', body: JSON.stringify({ source: { html } }) }); if (!response.ok) { throw new Error('Failed to generate PDF'); } return await response.blob(); }; return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-gradient-to-br from-[#1a1a2e] to-[#16213e] text-white font-sans relative", __source: { fileName: "", lineNumber: 122, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "absolute inset-0 bg-gradient-to-r from-purple-600 via-transparent to-blue-600 animate-gradient-x", __source: { fileName: "", lineNumber: 123, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "container mx-auto px-4 py-16 grid grid-cols-1 gap-16 relative z-10", __source: { fileName: "", lineNumber: 124, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-7xl font-bold text-center mb-12 text-transparent bg-clip-text bg-gradient-to-r from-[#4a00e0] to-[#00c6ff]", style: { letterSpacing: '0.05em' }, __source: { fileName: "", lineNumber: 125, columnNumber: 9 }, __self: this }, "Album Art Generator"), /*#__PURE__*/ React.createElement("div", { className: "max-w-3xl mx-auto bg-[#0f3460] rounded-3xl shadow-2xl p-8 md:p-16", style: { boxShadow: '20px 20px 60px #0d1e35, -20px -20px 60px #133b7f', position: 'relative' }, __source: { fileName: "", lineNumber: 131, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("textarea", { value: userDescription, onChange: (e)=>setUserDescription(e.target.value), placeholder: "Describe your dream album art...", className: "w-full h-40 p-4 bg-[#1a1a2e] border border-[#4a00e0] rounded-[30px] text-white placeholder-gray-300 italic font-light resize-none transition-shadow focus:outline-none focus:ring-2 focus:ring-[#8e2de2] hover:shadow-[inset_0_0_10px_#4a00e0] focus:border-b-4 focus:border-blue-400", name: "userDescription", style: { boxShadow: 'inset 0 0 10px #00000050, 9px 9px 18px #0e1d31, -9px -9px 18px #122d49' }, __source: { fileName: "", lineNumber: 132, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("input", { type: "email", value: email, onChange: (e)=>setEmail(e.target.value), placeholder: "Enter your email to see and download art", className: "w-full mt-4 p-4 bg-[#1a1a2e] border border-[#4a00e0] rounded-[30px] text-white placeholder-gray-300 italic font-light transition-shadow focus:outline-none focus:ring-2 focus:ring-[#8e2de2] hover:shadow-[inset_0_0_10px_#4a00e0] focus:border-b-4 focus:border-blue-400", name: "userEmail", __source: { fileName: "", lineNumber: 140, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("button", { onClick: generateArt, disabled: !userDescription || isLoading, className: `${isLoading ? 'disabled:opacity-50' : 'hover:shadow-[0_0_15px_#4a00e0]'} w-full mt-6 bg-gradient-to-r from-[#4a00e0] to-[#8e2de2] text-white py-4 rounded-xl font-bold text-lg tracking-wider transition relative`, style: { boxShadow: '9px 9px 18px #0e1d31, -9px -9px 18px #122d49', transition: 'transform 0.2s' }, __source: { fileName: "", lineNumber: 148, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "flex items-center justify-center", __source: { fileName: "", lineNumber: 159, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "mr-2", __source: { fileName: "", lineNumber: 160, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-palette", __source: { fileName: "", lineNumber: 161, columnNumber: 17 }, __self: this })), isLoading ? 'Crafting Your Art...' : 'Generate Album Art')), /*#__PURE__*/ React.createElement("svg", { className: "absolute top-0 right-0 mt-[-20px] mr-[-20px] fill-current text-[#4a00e0]", width: "40", height: "40", __source: { fileName: "", lineNumber: 166, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("circle", { cx: "20", cy: "20", r: "20", __source: { fileName: "", lineNumber: 167, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("svg", { className: "absolute bottom-0 left-0 mb-[-20px] ml-[-20px] fill-current text-[#4a00e0]", width: "40", height: "40", __source: { fileName: "", lineNumber: 169, columnNumber: 1 }, __self: this }, /*#__PURE__*/ React.createElement("circle", { cx: "20", cy: "20", r: "20", __source: { fileName: "", lineNumber: 170, columnNumber: 13 }, __self: this })), isLoading && /*#__PURE__*/ React.createElement("div", { className: "mt-8", __source: { fileName: "", lineNumber: 173, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center justify-center", __source: { fileName: "", lineNumber: 174, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "loader ease-linear rounded-full border-8 border-t-8 border-gray-200 h-12 w-12", __source: { fileName: "", lineNumber: 175, columnNumber: 17 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "h-2 w-full bg-[#1a1a2e] rounded-full overflow-hidden mt-4", __source: { fileName: "", lineNumber: 177, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "h-full bg-gradient-to-r from-[#4a00e0] to-[#8e2de2] transition-all duration-500 ease-out", style: { width: `${progress}%` }, __source: { fileName: "", lineNumber: 178, columnNumber: 17 }, __self: this })), /*#__PURE__*/ React.createElement("p", { className: "text-center mt-2 text-[#8e2de2] font-medium", __source: { fileName: "", lineNumber: 183, columnNumber: 15 }, __self: this }, loadingMessage), /*#__PURE__*/ React.createElement("p", { className: "text-center mt-1 text-sm text-gray-400", __source: { fileName: "", lineNumber: 184, columnNumber: 15 }, __self: this }, "Estimated time: Less than 60 seconds"))), generatedArt && showArt && /*#__PURE__*/ React.createElement("div", { className: "mt-16 text-center", __source: { fileName: "", lineNumber: 189, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-3xl font-bold mb-8 text-[#8e2de2]", __source: { fileName: "", lineNumber: 190, columnNumber: 13 }, __self: this }, "Your Masterpiece"), /*#__PURE__*/ React.createElement("img", { src: generatedArt, alt: "Generated album art", className: "w-full max-w-2xl mx-auto rounded-2xl shadow-2xl", __source: { fileName: "", lineNumber: 191, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("a", { href: generatedArt, download: "Your_Album_Art.png", className: "inline-block mt-8 bg-[#4a00e0] text-white px-8 py-4 rounded-full font-bold text-lg hover:bg-[#3600a9] transition", __source: { fileName: "", lineNumber: 192, columnNumber: 13 }, __self: this }, "Download Your Art"))), /*#__PURE__*/ React.createElement("style", { jsx: true, global: true, __source: { fileName: "", lineNumber: 202, columnNumber: 7 }, __self: this }, ` @keyframes gradient-x { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } } .animate-gradient-x { animation: gradient-x 8s ease infinite; } .loader { border-top-color: transparent; animation: spin 1s linear infinite; } @keyframes spin { to { transform: rotate(360deg); } } `)); }