function MainComponent() { const [psiActive, setPsiActive] = React.useState(false); const [physicalActive, setPhysicalActive] = React.useState(false); const [wishImage, setWishImage] = React.useState(null); const [wishImagePreview, setWishImagePreview] = React.useState(''); const [targetImage, setTargetImage] = React.useState(null); const [targetImagePreview, setTargetImagePreview] = React.useState(''); React.useEffect(()=>{ function getPreview(file, setPreview) { if (file) { const reader = new FileReader(); reader.onloadend = ()=>{ setPreview(reader.result); }; reader.readAsDataURL(file); } else { setPreview(''); } } getPreview(wishImage, setWishImagePreview); getPreview(targetImage, setTargetImagePreview); }, [ wishImage, targetImage ]); function togglePsi() { setPsiActive(!psiActive); if (physicalActive) setPhysicalActive(false); } function togglePhysical() { setPhysicalActive(!physicalActive); if (psiActive) setPsiActive(false); } function handleWishImageChange(event) { const file = event.target.files[0]; if (file && file.type.startsWith("image")) { setWishImage(file); } else { setWishImage(null); } } function handleTargetImageChange(event) { const file = event.target.files[0]; if (file && file.type.startsWith("image")) { setTargetImage(file); } else { setTargetImage(null); } } const psiButtonStyle = psiActive ? 'bg-[#4CAF50]' : 'bg-[#555]'; const physicalButtonStyle = physicalActive ? 'bg-[#4CAF50]' : 'bg-[#555]'; const psiIconColor = psiActive ? 'text-[#4CAF50]' : 'text-white'; const physicalIconColor = physicalActive ? 'text-[#4CAF50]' : 'text-white'; return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center justify-center min-h-screen bg-[#121212] p-4", __source: { fileName: "", lineNumber: 60, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-[#232323] py-8 px-6 rounded-lg shadow-lg space-y-4", __source: { fileName: "", lineNumber: 61, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-[#FAFAFA] font-crimson-text text-xl text-center", __source: { fileName: "", lineNumber: 62, columnNumber: 9 }, __self: this }, "Psionic Radionics Wish Granting Machine"), /*#__PURE__*/ React.createElement("div", { className: "flex justify-center gap-2", __source: { fileName: "", lineNumber: 64, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("button", { className: `font-roboto px-4 py-2 rounded ${psiButtonStyle}`, onClick: togglePsi, __source: { fileName: "", lineNumber: 65, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: `fa fa-brain ${psiIconColor}`, __source: { fileName: "", lineNumber: 69, columnNumber: 13 }, __self: this }), " PSI"), /*#__PURE__*/ React.createElement("button", { className: `font-roboto px-4 py-2 rounded ${physicalButtonStyle}`, onClick: togglePhysical, __source: { fileName: "", lineNumber: 71, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: `fa fa-hand-rock ${physicalIconColor}`, __source: { fileName: "", lineNumber: 75, columnNumber: 13 }, __self: this }), " Physical")), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 79, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "wish-image", className: "block text-white font-roboto mb-2", __source: { fileName: "", lineNumber: 80, columnNumber: 11 }, __self: this }, "Wish (Trend) Image:"), /*#__PURE__*/ React.createElement("input", { type: "file", id: "wish-image", name: "wish-image", className: "block w-full text-white font-roboto p-2 bg-[#333] rounded", onChange: handleWishImageChange, __source: { fileName: "", lineNumber: 81, columnNumber: 11 }, __self: this }), wishImagePreview && /*#__PURE__*/ React.createElement("div", { className: "mt-2", __source: { fileName: "", lineNumber: 83, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: wishImagePreview, alt: "Wish Trend Image Preview", className: "w-full h-auto rounded-md", __source: { fileName: "", lineNumber: 84, columnNumber: 15 }, __self: this }))), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 89, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "target-image", className: "block text-white font-roboto mb-2", __source: { fileName: "", lineNumber: 90, columnNumber: 11 }, __self: this }, "Target Image:"), /*#__PURE__*/ React.createElement("input", { type: "file", id: "target-image", name: "target-image", className: "block w-full text-white font-roboto bg-[#333] p-2 rounded", onChange: handleTargetImageChange, __source: { fileName: "", lineNumber: 91, columnNumber: 11 }, __self: this }), targetImagePreview && /*#__PURE__*/ React.createElement("div", { className: "mt-2", __source: { fileName: "", lineNumber: 93, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: targetImagePreview, alt: "Target Image Preview", className: "w-full h-auto rounded-md", __source: { fileName: "", lineNumber: 94, columnNumber: 15 }, __self: this }))), /*#__PURE__*/ React.createElement("div", { className: "flex justify-center", __source: { fileName: "", lineNumber: 99, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("button", { className: "font-roboto text-white bg-blue-600 hover:bg-blue-700 px-4 py-2 rounded", __source: { fileName: "", lineNumber: 100, columnNumber: 11 }, __self: this }, "Power by AI"))), /*#__PURE__*/ React.createElement("style", { jsx: true, global: true, __source: { fileName: "", lineNumber: 104, columnNumber: 7 }, __self: this }, ` @keyframes psiActivation { 0% { background-color: #555; } 100% { background-color: #4CAF50; } } @keyframes physicalActivation { 0% { background-color: #555; } 100% { background-color: #4CAF50; } } button { transition: background-color 0.3s; } .bg-[#4CAF50] { animation: psiActivation 0.3s forwards; } .bg-[#555]:not(.bg-blue-600):not(.bg-blue-700) { animation: physicalActivation 0.3s forwards; } `)); }