Form Upload

Form Upload

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

Textline:		Number:
Password:		Slider:
Checkbox:		DropDown:	\n \n
Radio:	\n A\n B\n C\n	Color:
EMail:		Time:
Phone:		Date & Time:
URL:		Date:
Search:		Week:
File:		Month:
Text:	\n \n

\n \n \n

\n Server Response:\n \n

\n );\n}\n\nfunction client() {\n const root = document.getElementById(\"root\");\n if (root) {\n createRoot(root).render();\n }\n}\n\nif (typeof document !== \"undefined\") {\n client();\n}\n\nexport default async function server(request: Request): Promise {\n return new Response(\n `\n \n \n Form Upload\n \n \n \n

\n \n \n \n \n `,\n {\n headers: {\n \"content-type\": \"text/html\",\n },\n },\n );\n}\n\nconst css = `\nbody {\n margin: 0;\n height: 100vh;\n display: flex;\n justify-content: center;\n align-items: center;\n background: linear-gradient(to bottom, #87CEEB, #E0F6FF);\n font-family: Arial, sans-serif;\n}\n\n.container {\n display: flex;\n justify-content: center;\n align-items: center;\n height: 100%;\n}\n\n.upload-box {\n background-color: white;\n border-radius: 10px;\n padding: 2rem;\n box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);\n width: 600px;\n}\n\nh2 {\n margin-top: 0;\n color: #333;\n font-size: 1.5rem;\n text-align: center;\n}\n\n.form-table {\n width: 100%;\n border-collapse: collapse;\n margin-top: 1rem;\n}\n\n.form-table td {\n padding: 0.3rem;\n border: none;\n}\n\n.form-table tr:nth-child(even) {\n background-color: #f8f8f8;\n}\n\n.form-table label {\n font-weight: bold;\n margin-right: 0.5rem;\n font-size: 0.85rem;\n}\n\n.form-table label[for=\"dateTimeInput\"] {\n white-space: nowrap;\n font-size: 0.8rem;\n}\n\n.form-table input[type=\"text\"],\n.form-table input[type=\"number\"],\n.form-table input[type=\"password\"],\n.form-table input[type=\"email\"],\n.form-table input[type=\"tel\"],\n.form-table input[type=\"url\"],\n.form-table input[type=\"search\"],\n.form-table input[type=\"date\"],\n.form-table input[type=\"time\"],\n.form-table input[type=\"datetime-local\"],\n.form-table input[type=\"week\"],\n.form-table input[type=\"month\"],\n.form-table select {\n width: 100%;\n padding: 0.2rem;\n border: 1px solid #ccc;\n border-radius: 3px;\n font-size: 0.8rem;\n}\n\n.form-table input[type=\"checkbox\"],\n.form-table input[type=\"radio\"] {\n margin-right: 0.5rem;\n}\n\n.form-table input[type=\"file\"] {\n font-size: 0.8rem;\n}\n\n.form-table textarea {\n width: 100%;\n padding: 0.2rem;\n border: 1px solid #ccc;\n border-radius: 3px;\n font-size: 0.8rem;\n resize: vertical;\n}\n\n.submit-button,\n.reset-button {\n padding: 0.3rem 1rem;\n border: none;\n border-radius: 3px;\n font-size: 0.9rem;\n cursor: pointer;\n transition: background-color 0.3s;\n display: inline-block;\n margin: 0 0.5rem;\n}\n\n.submit-button {\n background-color: #4CAF50;\n color: white;\n}\n\n.submit-button:hover:not(:disabled) {\n background-color: #45a049;\n}\n\n.submit-button:disabled {\n background-color: #a5d6a7;\n cursor: not-allowed;\n}\n\n.reset-button {\n background-color: #f44336;\n color: white;\n}\n\n.reset-button:hover:not(:disabled) {\n background-color: #d32f2f;\n}\n\n.reset-button:disabled {\n background-color: #ef9a9a;\n cursor: not-allowed;\n}\n\n.button-container {\n text-align: center;\n margin-top: 1rem;\n}\n\n.server-response {\n margin-top: 1rem;\n}\n\n.server-response label {\n display: block;\n font-weight: bold;\n margin-bottom: 0.5rem;\n font-size: 0.85rem;\n}\n\n.server-response textarea {\n width: 100%;\n padding: 0.2rem;\n border: 1px solid #ccc;\n border-radius: 3px;\n font-size: 0.8rem;\n resize: vertical;\n background-color: #f8f8f8;\n white-space: pre;\n overflow-x: auto;\n}\n`;","deleted","label",[99],"permalink","https://www.val.town/x/rozek/GDI_FormUpload/code/main.tsx","extension","actionData","errors"]