Val Town Hall

Speaker Application

\n\n

Event Details

Date: May 21st
Time: 12pm ET
\n Location: Virtual (Zoom or\n Discord)\n
\n Duration: 90 seconds\n
\n Content: Screenshare something\n made with Val Town\n

\n\n

\n \n

\n\n

🎉

\n Thanks for your submission!\n

You'll hear back from us shortly :)

\n\n \n Oops!\n Something went wrong. Please try again.\n

\n\n \n \n\n \n \n",[],[99,179],{"_104":188,"_95":189,"_152":190,"_154":153,"_155":138,"_156":191,"_158":22,"_106":192,"_100":193,"_160":194,"_162":195,"_163":22,"_164":-5,"_165":196,"_98":197},"891f3adc-3005-11f0-b1e3-569c3dd06744","script.js","7defd392-3000-11f0-81b8-569c3dd06744",41,["D",1747146078186],5,"script","document.addEventListener(\"DOMContentLoaded\", () => {\n const form = document.getElementById(\"speaker-form\");\n const formContainer = document.getElementById(\"form-container\");\n const thankYouMessage = document.getElementById(\"thank-you\");\n const errorMessage = document.getElementById(\"error-message\");\n const errorText = document.getElementById(\"error-text\");\n\n // Form submission handler\n form.addEventListener(\"submit\", async (e) => {\n e.preventDefault();\n\n // Disable the submit button and show loading state\n const submitButton = form.querySelector(\"button[type=\\\"submit\\\"]\");\n const originalButtonText = submitButton.textContent;\n submitButton.disabled = true;\n submitButton.textContent = \"Submitting...\";\n\n // Hide any previous error messages\n errorMessage.classList.remove(\"show\");\n errorMessage.classList.add(\"hidden\");\n\n try {\n // Collect form data\n const formData = {\n name: form.elements.name.value.trim(),\n email: form.elements.email.value.trim(),\n username: form.elements.username.value.trim(),\n company: form.elements.company.value.trim(),\n website: form.elements.website.value.trim(),\n talkDescription: form.elements.talkDescription.value.trim(),\n };\n\n // Send the form data to the server\n const response = await fetch(\"/submit\", {\n method: \"POST\",\n headers: {\n \"Content-Type\": \"application/json\",\n },\n body: JSON.stringify(formData),\n });\n\n const result = await response.json();\n if (response.ok && result.success) {\n formContainer.style.display = \"none\";\n\n thankYouMessage.classList.remove(\"hidden\");\n thankYouMessage.classList.add(\"show\");\n thankYouMessage.style.display = \"block\";\n\n // Scroll to top if needed\n window.scrollTo({ top: 0, behavior: \"smooth\" });\n } else {\n // Show error message\n errorText.textContent = result.message || \"Something went wrong. Please try again.\";\n errorMessage.classList.remove(\"hidden\");\n errorMessage.classList.add(\"show\");\n\n // Reset button\n submitButton.disabled = false;\n submitButton.textContent = originalButtonText;\n }\n } catch (error) {\n // Show error message\n errorText.textContent = \"Network error. Please check your connection and try again.\";\n errorMessage.classList.remove(\"hidden\");\n errorMessage.classList.add(\"show\");\n\n // Reset button\n submitButton.disabled = false;\n submitButton.textContent = originalButtonText;\n }\n });\n});",[],[99,189],{"_104":199,"_95":200,"_152":201,"_154":153,"_155":138,"_156":202,"_158":22,"_106":203,"_100":157,"_160":173,"_162":204,"_163":22,"_164":-5,"_165":205,"_98":206},"66277440-3005-11f0-a603-569c3dd06744","style.css","747f1048-3000-11f0-a14f-569c3dd06744",37,["D",1747146019518],"/* Custom styles beyond Tailwind */\n\n/* Focus effects for form elements */\ninput:focus, textarea:focus {\n box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.3);\n outline: none;\n}\n\n/* Display classes for thank you and error messages */\n#thank-you.show {\n display: block !important;\n}\n\n#error-message.show {\n display: block;\n}\n\n/* Responsive adjustments */\n@media (max-width: 640px) {\n .container {\n padding: 1rem;\n }\n}",[],[99,200],[99],{"_104":209,"_95":210,"_152":211,"_154":-5,"_155":138,"_156":212,"_158":22,"_106":213,"_100":32,"_160":161,"_162":-5,"_163":22,"_164":-5,"_165":214,"_98":230},"8d090e20-3005-11f0-865b-569c3dd06744","frontend-react","60b978b1-e49f-4953-bb8c-6919b111c831",42,["D",1747146084753],[215,222],{"_104":216,"_95":179,"_152":217,"_154":211,"_155":138,"_156":212,"_158":22,"_106":218,"_100":32,"_160":173,"_162":219,"_163":22,"_164":-5,"_165":220,"_98":221},"8d08d77a-3005-11f0-865b-569c3dd06744","8d08d838-3005-11f0-865b-569c3dd06744",["D",1747146084753],"\n\n \n \n \n Val Town Hall Speaker Application\n \n \n \n \n

\n \n \n",[],[210,179],{"_104":223,"_95":224,"_152":225,"_154":211,"_155":138,"_156":101,"_158":22,"_106":226,"_100":32,"_160":194,"_162":227,"_163":22,"_164":-5,"_165":228,"_98":229},"8fbcd9e4-3005-11f0-84ea-569c3dd06744","index.tsx","8fbcdaac-3005-11f0-84ea-569c3dd06744",["D",1747146089291],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React from \"https://esm.sh/react@18.2.0\";\nimport { createRoot } from \"https://esm.sh/react-dom@18.2.0/client\";\nimport { App } from \"./components/App.tsx\";\n\nconst root = createRoot(document.getElementById(\"app\")!);\nroot.render();",[],[210,224],[210],{"_104":232,"_95":233,"_152":234,"_154":-5,"_155":138,"_156":193,"_158":22,"_106":235,"_100":32,"_160":173,"_162":236,"_163":22,"_164":-5,"_165":237,"_98":238},"8323ee7a-3000-11f0-abaf-569c3dd06744","README.md","8323ef42-3000-11f0-abaf-569c3dd06744",["D",1747143920670],"# Val Town Hall Speaker Application Form\n\nA simple, animated form for collecting speaker applications for the Val Town Hall event.\n\n## Features\n\n- Clean, modern form with subtle animations\n- SQLite database storage for all submissions\n- Email notifications for new submissions\n- Mobile-responsive design\n- Client-side validation\n\n## Project Structure\n\n- `/index.ts` - Main HTTP handler with form submission endpoint\n- `/frontend/index.html` - Main HTML page with the form\n- `/frontend/style.css` - CSS styling and animations\n- `/frontend/script.js` - JavaScript for form handling and animations\n\n## How It Works\n\n1. The form collects speaker information including name, email, Val Town username, company (optional), website (optional), and talk description.\n2. On submission, the data is sent to the server endpoint.\n3. The server validates the data, stores it in SQLite, and sends an email notification.\n4. A thank you message is displayed to the user upon successful submission.\n\n## Database Schema\n\n```sql\nCREATE TABLE IF NOT EXISTS val_town_hall_speakers (\n id INTEGER PRIMARY KEY AUTOINCREMENT,\n name TEXT NOT NULL,\n email TEXT NOT NULL,\n username TEXT NOT NULL,\n company TEXT,\n website TEXT,\n talk_description TEXT NOT NULL,\n created_at TEXT NOT NULL\n)\n```\n\n## Email Notifications\n\nEmail notifications are sent in plain text format and include all the information submitted through the form.",[],[233],{"_104":240,"_95":241,"_152":242,"_154":-5,"_155":138,"_156":243,"_158":22,"_106":244,"_100":245,"_160":246,"_162":247,"_163":22,"_164":96,"_165":248,"_98":249},"689c9344-3001-11f0-868c-569c3dd06744","index.ts","626b63e8-3000-11f0-8353-569c3dd06744",9,["D",1747144305655],3,"http","import { Hono } from \"https://esm.sh/hono@3.12.6\";\nimport { email } from \"https://esm.town/v/std/email\";\nimport { readFile, serveFile } from \"https://esm.town/v/std/utils@85-main/index.ts\";\nimport { sqlite } from \"https://esm.town/v/stevekrouse/sqlite\";\n\n// Initialize Hono app\nconst app = new Hono();\n\n// Unwrap Hono errors to see original error details\napp.onError((err, c) => {\n console.error(\"Hono error:\", err);\n throw err;\n});\n\n// Create the speakers table if it doesn't exist\nasync function initializeDatabase() {\n console.log(\"Initializing database...\");\n try {\n await sqlite.execute(`\n CREATE TABLE IF NOT EXISTS val_town_hall_speakers (\n id INTEGER PRIMARY KEY AUTOINCREMENT,\n name TEXT NOT NULL,\n email TEXT NOT NULL,\n username TEXT NOT NULL,\n company TEXT,\n website TEXT,\n talk_description TEXT NOT NULL,\n created_at TEXT NOT NULL\n )\n `);\n console.log(\"Database initialized successfully\");\n } catch (error) {\n console.error(\"Database initialization error:\", error);\n throw error;\n }\n}\n\n// Initialize database on startup\ninitializeDatabase();\n\n// Serve static files\napp.get(\"/frontend/*\", c => {\n console.log(`Serving static file: ${c.req.path}`);\n return serveFile(c.req.path, import.meta.url);\n});\n\n// Serve the main page\napp.get(\"/\", async c => {\n console.log(\"Serving main page\");\n try {\n const html = await readFile(\"/frontend/index.html\", import.meta.url);\n console.log(\"Main page HTML loaded successfully\");\n return c.html(html);\n } catch (error) {\n console.error(\"Error loading main page:\", error);\n throw error;\n }\n});\n\n// Handle form submissions\napp.post(\"/submit\", async c => {\n console.log(\"Received form submission request\");\n try {\n const formData = await c.req.json();\n console.log(\"Parsed form data:\", formData);\n \n // Extract form fields\n const { name, email: userEmail, username, company, website, talkDescription } = formData;\n console.log(\"Extracted fields:\", { name, userEmail, username, company, website, talkDescriptionLength: talkDescription?.length });\n \n // Validate required fields\n if (!name || !userEmail || !username || !talkDescription) {\n console.log(\"Validation failed - missing required fields\");\n return c.json({ success: false, message: \"Missing required fields\" }, 400);\n }\n \n // Get current timestamp\n const createdAt = new Date().toISOString();\n console.log(\"Created timestamp:\", createdAt);\n \n // Insert into database\n console.log(\"Attempting to insert into database...\");\n try {\n await sqlite.execute(\n `INSERT INTO val_town_hall_speakers \n (name, email, username, company, website, talk_description, created_at) \n VALUES (?, ?, ?, ?, ?, ?, ?)`,\n [name, userEmail, username, company || null, website || null, talkDescription, createdAt]\n );\n console.log(\"Database insert successful\");\n } catch (dbError) {\n console.error(\"Database error:\", dbError);\n throw dbError;\n }\n \n // Send email notification\n console.log(\"Sending email notification...\");\n try {\n await email({\n subject: \"New Val Town Hall Speaker Application\",\n text: `\nNew speaker application received:\n\nName: ${name}\nEmail: ${userEmail}\nVal Town Username: ${username}\nCompany: ${company || \"Not provided\"}\nWebsite: ${website || \"Not provided\"}\nTalk Description:\n${talkDescription}\n\nSubmitted at: ${createdAt}\n `\n });\n console.log(\"Email notification sent successfully\");\n } catch (emailError) {\n console.error(\"Email sending error:\", emailError);\n // Continue even if email fails - we've already saved to database\n }\n \n console.log(\"Returning success response\");\n return c.json({ success: true });\n } catch (error) {\n console.error(\"Error processing submission:\", error);\n return c.json({ success: false, message: \"Server error\" }, 500);\n }\n});\n\n// Export the Hono app\nexport default app.fetch;",[],[241],"files",[150,167,177,187,198,208,215,222,231,239],"counts",{"_254":32,"_255":245,"_256":32,"_257":258},"pulls","branches","forks","envVars",1,"contents",[261,264,267,270],{"_104":168,"_95":169,"_152":170,"_154":153,"_155":138,"_156":171,"_158":22,"_106":262,"_100":32,"_160":173,"_162":174,"_163":22,"_164":-5,"_98":263},["D",1747144354732],[99,169],{"_104":178,"_95":179,"_152":180,"_154":153,"_155":138,"_156":181,"_158":22,"_106":265,"_100":183,"_160":173,"_162":184,"_163":22,"_164":-5,"_98":266},["D",1747146066941],[99,179],{"_104":188,"_95":189,"_152":190,"_154":153,"_155":138,"_156":191,"_158":22,"_106":268,"_100":193,"_160":194,"_162":195,"_163":22,"_164":-5,"_98":269},["D",1747146078186],[99,189],{"_104":199,"_95":200,"_152":201,"_154":153,"_155":138,"_156":202,"_158":22,"_106":271,"_100":157,"_160":173,"_162":204,"_163":22,"_164":-5,"_98":272},["D",1747146019518],[99,200],{"_104":151,"_95":99,"_152":153,"_154":-5,"_155":138,"_156":157,"_158":22,"_106":274,"_100":32,"_160":161,"_162":-5,"_163":22,"_164":-5,"_98":275},["D",1747143885092],[99],"upstreamProject","upstreamBranch","emptyEnvVars","isNew","flags",[],"routes/_app.x.$handle.$name.branch.$branch.version.$version.code.$",{"_93":94,"_95":96,"_97":43,"_100":101,"_98":99,"_102":284,"_148":289,"_250":320,"_173":321,"_259":323,"_332":-5,"_333":22,"_334":-5,"_335":-5,"_336":-5,"_337":338},{"_104":105,"_95":96,"_106":285,"_108":-5,"_109":22,"_110":111,"_112":-5,"_113":-5,"_14":114,"_115":-5,"_116":22,"_117":-5,"_118":32,"_16":119,"_120":121,"_122":121,"_123":124,"_125":124,"_126":124,"_127":121,"_128":121,"_23":286,"_132":287,"_135":288,"_147":22},["D",1747143312277],{"_93":94,"_130":131},{"_93":94,"_134":131},{"_100":137,"_95":43,"_104":138,"_139":105,"_140":-5,"_141":-5,"_142":-5,"_143":-5,"_144":-5,"_145":96,"_146":94},[290,305,314,317],{"_104":151,"_95":99,"_152":153,"_154":-5,"_155":138,"_156":157,"_158":22,"_106":159,"_100":32,"_160":161,"_162":-5,"_163":22,"_164":-5,"_165":291,"_98":304},[292,295,298,301],{"_104":168,"_95":169,"_152":170,"_154":153,"_155":138,"_156":171,"_158":22,"_106":172,"_100":32,"_160":173,"_162":174,"_163":22,"_164":-5,"_165":293,"_98":294},[],[99,169],{"_104":178,"_95":179,"_152":180,"_154":153,"_155":138,"_156":181,"_158":22,"_106":182,"_100":183,"_160":173,"_162":184,"_163":22,"_164":-5,"_165":296,"_98":297},[],[99,179],{"_104":188,"_95":189,"_152":190,"_154":153,"_155":138,"_156":191,"_158":22,"_106":192,"_100":193,"_160":194,"_162":195,"_163":22,"_164":-5,"_165":299,"_98":300},[],[99,189],{"_104":199,"_95":200,"_152":201,"_154":153,"_155":138,"_156":202,"_158":22,"_106":203,"_100":157,"_160":173,"_162":204,"_163":22,"_164":-5,"_165":302,"_98":303},[],[99,200],[99],{"_104":209,"_95":210,"_152":211,"_154":-5,"_155":138,"_156":212,"_158":22,"_106":213,"_100":32,"_160":161,"_162":-5,"_163":22,"_164":-5,"_165":306,"_98":313},[307,310],{"_104":216,"_95":179,"_152":217,"_154":211,"_155":138,"_156":212,"_158":22,"_106":218,"_100":32,"_160":173,"_162":219,"_163":22,"_164":-5,"_165":308,"_98":309},[],[210,179],{"_104":223,"_95":224,"_152":225,"_154":211,"_155":138,"_156":101,"_158":22,"_106":226,"_100":32,"_160":194,"_162":227,"_163":22,"_164":-5,"_165":311,"_98":312},[],[210,224],[210],{"_104":232,"_95":233,"_152":234,"_154":-5,"_155":138,"_156":193,"_158":22,"_106":235,"_100":32,"_160":173,"_162":236,"_163":22,"_164":-5,"_165":315,"_98":316},[],[233],{"_104":240,"_95":241,"_152":242,"_154":-5,"_155":138,"_156":243,"_158":22,"_106":244,"_100":245,"_160":246,"_162":247,"_163":22,"_164":96,"_165":318,"_98":319},[],[241],[290,292,295,298,301,305,307,310,314,317],{"_104":151,"_95":99,"_152":153,"_154":-5,"_155":138,"_156":157,"_158":22,"_106":274,"_100":32,"_160":161,"_162":-5,"_163":22,"_164":-5,"_98":322},[99],[324,326,328,330],{"_104":168,"_95":169,"_152":170,"_154":153,"_155":138,"_156":171,"_158":22,"_106":262,"_100":32,"_160":173,"_162":174,"_163":22,"_164":-5,"_98":325},[99,169],{"_104":178,"_95":179,"_152":180,"_154":153,"_155":138,"_156":181,"_158":22,"_106":265,"_100":183,"_160":173,"_162":184,"_163":22,"_164":-5,"_98":327},[99,179],{"_104":188,"_95":189,"_152":190,"_154":153,"_155":138,"_156":191,"_158":22,"_106":268,"_100":193,"_160":194,"_162":195,"_163":22,"_164":-5,"_98":329},[99,189],{"_104":199,"_95":200,"_152":201,"_154":153,"_155":138,"_156":202,"_158":22,"_106":271,"_100":157,"_160":173,"_162":204,"_163":22,"_164":-5,"_98":331},[99,200],"upstream","showCompareCallout","pull","ahead","behind","templates",[],"actionData","errors"]