EMail (to the val creator)

\n \n \n \n \n \n \n \n \n

Subject:

setSubject(e.target.value)} disabled={isSubmitting} />

Message:

setMessage(e.target.value)} disabled={isSubmitting} /></td>\n            </tr>\n            <tr>\n              <td colSpan=\"2\" className=\"button-cell\">\n                <button type=\"submit\" disabled={!isFormValid || isSubmitting}>Submit</button>\n                <button type=\"reset\" disabled={isSubmitting}>Reset</button>\n              </td>\n            </tr>\n            <tr>\n              <td><label htmlFor=\"status\">Status:</label></td>\n              <td><input type=\"text\" id=\"status\" value={status} readOnly /></td>\n            </tr>\n          </tbody>\n        </table>\n      </form>\n    </div>\n  );\n}\n\nfunction client() {\n  createRoot(document.getElementById(\"root\")).render(<App />);\n}\n\nif (typeof document !== \"undefined\") { client(); }\n\nexport default async function server(request: Request): Promise<Response> {\n  if (request.method === \"POST\" && new URL(request.url).pathname === \"/send-email\") {\n    const { subject, message } = await request.json();\n    try {\n      await email({ subject, text: message });\n      return new Response(JSON.stringify({ success: true }), {\n        headers: { \"Content-Type\": \"application/json\" },\n      });\n    } catch (error) {\n      return new Response(JSON.stringify({ success: false, error: error.message }), {\n        status: 500,\n        headers: { \"Content-Type\": \"application/json\" },\n      });\n    }\n  }\n\n  return new Response(`\n    <!DOCTYPE html>\n    <html lang=\"en\">\n      <head>\n        <meta charset=\"UTF-8\">\n        <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n        <title>Email Form</title>\n        <style>${css}</style>\n      </head>\n      <body>\n        <div id=\"root\"></div>\n        <script src=\"https://esm.town/v/std/catch\"></script>\n        <script type=\"module\" src=\"${import.meta.url}\"></script>\n      </body>\n    </html>\n  `,\n  {\n    headers: { \"Content-Type\": \"text/html\" },\n  });\n}\n\nconst css = `\nbody {\n  margin: 0;\n  padding: 0;\n  font-family: Arial, sans-serif;\n  background: linear-gradient(to bottom, #87CEEB, #E0F6FF);\n  min-height: 100vh;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n}\n\n.container {\n  background-color: white;\n  padding: 2rem;\n  border-radius: 10px;\n  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);\n}\n\nh1 {\n  margin-top: 0;\n  font-size: 1.5rem;\n}\n\n.subtitle {\n  font-size: 1rem;\n  color: gray;\n}\n\ntable {\n  width: 100%;\n  border-collapse: collapse;\n}\n\ntd {\n  padding: 0.5rem;\n}\n\ntd:has(label[for=\"message\"]) {\n  vertical-align: top;\n  padding-top: 0.5rem;\n  position: relative;\n}\ntd:has(label[for=\"message\"]) label { position: relative; top: 8px; }\n\ninput[type=\"text\"], textarea {\n  width: 100%;\n  padding: 0.5rem;\n  border: 1px solid #ccc;\n  border-radius: 4px;\n}\n\ntextarea {\n  height: 100px;\n  resize: vertical;\n}\n\n.button-cell {\n  text-align: center;\n}\n\nbutton {\n  margin: 0 0.5rem;\n  padding: 0.5rem 1rem;\n  background-color: #4CAF50;\n  color: white;\n  border: none;\n  border-radius: 4px;\n  cursor: pointer;\n}\n\nbutton:disabled {\n  background-color: #ccc;\n  cursor: not-allowed;\n}\n\n#status {\n  background-color: #f0f0f0;\n}\n`;","deleted","label",[98],"permalink","https://www.val.town/x/rozek/GDI_EMailSender/code/main.tsx","extension","actionData","errors"]
</article></body></html>