function MainComponent() { const [username, setUsername] = React.useState(''); const [password, setPassword] = React.useState(''); const [showScaryImage, setShowScaryImage] = React.useState(false); function handleUsernameChange(event) { setUsername(event.target.value); } function handlePasswordChange(event) { setPassword(event.target.value); } function handleSubmit(event) { event.preventDefault(); setShowScaryImage(true); } const headerStyle = { backgroundImage: `url(/blocks-background.jpg)`, backgroundSize: 'cover', backgroundPosition: 'center' }; const scaryImageStyle = { visibility: showScaryImage ? 'visible' : 'hidden', position: 'fixed', left: '50%', top: '50%', transform: 'translate(-50%, -50%)', zIndex: '10', maxWidth: '90%', maxHeight: '90%', animation: 'fadeIn 0.5s' }; return /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement("div", { className: "flex items-center justify-center h-screen", style: headerStyle, __source: { fileName: "", lineNumber: 39, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-full max-w-md bg-[#f8f8f890] p-10 rounded-md shadow-2xl", __source: { fileName: "", lineNumber: 40, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-center text-4xl font-bold font-roboto text-[#333] mb-8", __source: { fileName: "", lineNumber: 41, columnNumber: 11 }, __self: this }, "Whimsiios Games"), /*#__PURE__*/ React.createElement("form", { onSubmit: handleSubmit, className: "bg-white p-8 rounded", __source: { fileName: "", lineNumber: 42, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 43, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("input", { className: "shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:ring-blue-500 focus:border-blue-500", id: "username", type: "text", placeholder: "Username", name: "username", value: username, onChange: handleUsernameChange, __source: { fileName: "", lineNumber: 44, columnNumber: 15 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "mb-6", __source: { fileName: "", lineNumber: 54, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("input", { className: "shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 mb-3 leading-tight focus:ring-blue-500 focus:border-blue-500", id: "password", type: "password", placeholder: "Password", name: "password", value: password, onChange: handlePasswordChange, __source: { fileName: "", lineNumber: 55, columnNumber: 15 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center justify-between", __source: { fileName: "", lineNumber: 65, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("button", { className: "bg-blue-600 hover:bg-blue-800 text-white font-bold py-2 px-4 w-full rounded focus:ring-2 focus:ring-blue-600 focus:ring-opacity-50", type: "submit", __source: { fileName: "", lineNumber: 66, columnNumber: 15 }, __self: this }, "Log In"), /*#__PURE__*/ React.createElement("a", { className: "inline-block align-baseline font-bold text-sm text-blue-600 hover:text-blue-800 mt-4", href: "#", __source: { fileName: "", lineNumber: 72, columnNumber: 15 }, __self: this }, "Forgot Password?"))), /*#__PURE__*/ React.createElement("p", { className: "text-center text-gray-600 text-xs mt-4", __source: { fileName: "", lineNumber: 80, columnNumber: 11 }, __self: this }, "By signing in, you agree to our Terms of Service and Privacy Policy."))), /*#__PURE__*/ React.createElement("img", { src: "/scary-image.jpg", alt: "A scary creature jumps out as a surprise", style: scaryImageStyle, onClick: ()=>setShowScaryImage(false), __source: { fileName: "", lineNumber: 85, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement("style", { jsx: true, global: true, __source: { fileName: "", lineNumber: 91, columnNumber: 7 }, __self: this }, ` @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } `)); }