Jamesford Meadows \u2014 Community & Volunteer Roster<\/title><br \/>\n\u00a0 <br \/>\n\u00a0 <script src=\"https:\/\/cdn.tailwindcss.com\"><\/script><br \/>\n\u00a0 <br \/>\n\u00a0 <link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\n\u00a0 <link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin>\n\u00a0 <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=Inter:wght@400;500;600&display=swap\" rel=\"stylesheet\">\n\u00a0<br \/>\n\u00a0 <script>\n\u00a0 \u00a0 tailwind.config = {\n\u00a0 \u00a0 \u00a0 theme: {\n\u00a0 \u00a0 \u00a0 \u00a0 extend: {\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 fontFamily: {\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 sans: ['Inter', 'sans-serif'],\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 heading: ['\"Plus Jakarta Sans\"', 'sans-serif'],\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 },\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 colors: {\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 forest: {\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 50: '#f2f9f5',\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 100: '#e1f2e8',\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 500: '#1b7a4b',\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 600: '#13623b',\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 700: '#0e4a2d',\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 800: '#0b3923',\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 900: '#072517',\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 },\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 amberAccent: {\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 400: '#fbbf24',\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 500: '#f59e0b',\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 600: '#d97706',\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 }\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 }\n\u00a0 \u00a0 \u00a0 \u00a0 }\n\u00a0 \u00a0 \u00a0 }\n\u00a0 \u00a0 }\n\u00a0 <\/script><\/p>\n<p>\u00a0 <\/p>\n<style>\n\u00a0 \u00a0 .custom-scroll::-webkit-scrollbar {\n\u00a0 \u00a0 \u00a0 width: 6px;\n\u00a0 \u00a0 }\n\u00a0 \u00a0 .custom-scroll::-webkit-scrollbar-thumb {\n\u00a0 \u00a0 \u00a0 background-color: #cbd5e1;\n\u00a0 \u00a0 \u00a0 border-radius: 9999px;\n\u00a0 \u00a0 }\n\u00a0 <\/style>\n<p><\/head><br \/>\n<body class=\"bg-slate-50 text-slate-800 font-sans antialiased min-h-screen pb-20\"><\/p>\n<p>\u00a0 <br \/>\n\u00a0 <\/p>\n<header class=\"bg-white\/95 backdrop-blur border-b border-slate-200 sticky top-0 z-30 shadow-sm\">\n\u00a0 \u00a0 <\/p>\n<div class=\"max-w-4xl mx-auto px-3.5 sm:px-6 h-14 sm:h-16 flex items-center justify-between gap-2\">\n\u00a0 \u00a0 \u00a0 <\/p>\n<div class=\"flex items-center space-x-2.5 min-w-0\">\n\u00a0 \u00a0 \u00a0 \u00a0 <\/p>\n<div class=\"w-8 h-8 sm:w-9 sm:h-9 rounded-xl bg-forest-700 text-white flex-shrink-0 flex items-center justify-center font-heading font-bold text-xs sm:text-sm shadow-md shadow-forest-700\/20\">\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 JM<br \/>\n\u00a0 \u00a0 \u00a0 \u00a0 <\/div>\n<p>\u00a0 \u00a0 \u00a0 \u00a0 <\/p>\n<div class=\"min-w-0\">\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <span class=\"font-heading font-bold text-slate-900 tracking-tight block text-xs sm:text-base leading-tight truncate\">Jamesford Meadows<\/span><br \/>\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <span class=\"text-[10px] sm:text-[11px] text-slate-500 font-medium tracking-wide uppercase truncate block\">Community & Volunteer Hub<\/span><br \/>\n\u00a0 \u00a0 \u00a0 \u00a0 <\/div>\n<p>\u00a0 \u00a0 \u00a0 <\/p><\/div>\n<p>\u00a0 \u00a0 \u00a0 <\/p>\n<div class=\"flex items-center gap-2\">\n\u00a0 \u00a0 \u00a0 \u00a0 <button type=\"button\" onclick=\"shareSurvey()\" class=\"inline-flex items-center gap-1.5 px-2.5 sm:px-3 py-1.5 rounded-lg text-xs font-semibold bg-emerald-50 text-emerald-800 hover:bg-emerald-100 border border-emerald-200\/80 transition active:scale-95\"><br \/>\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <svg class=\"w-3.5 h-3.5 text-emerald-700\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M8.684 13.342C8.886 12.938 9 12.482 9 12c0-.482-.114-.938-.316-1.342m0 2.684a3 3 0 110-2.684m0 2.684l6.632 3.316m-6.632-6l6.632-3.316m0 0a3 3 0 105.367-2.684 3 3 0 00-5.367 2.684zm0 9.316a3 3 0 105.368 2.684 3 3 0 00-5.368-2.684z\"><\/path><\/svg><br \/>\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <span class=\"hidden xs:inline\">Share<\/span><br \/>\n\u00a0 \u00a0 \u00a0 \u00a0 <\/button><br \/>\n\u00a0 \u00a0 \u00a0 \u00a0 <span class=\"inline-flex items-center px-2 sm:px-2.5 py-1 rounded-full text-[10px] sm:text-xs font-medium bg-slate-100 text-slate-700 border border-slate-200\"><br \/>\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <span class=\"w-1.5 h-1.5 rounded-full bg-emerald-500 mr-1 sm:mr-1.5 animate-pulse\"><\/span><br \/>\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 2026 Roster<br \/>\n\u00a0 \u00a0 \u00a0 \u00a0 <\/span><br \/>\n\u00a0 \u00a0 \u00a0 <\/div>\n<p>\u00a0 \u00a0 <\/p><\/div>\n<p>\u00a0 <\/header>\n<p>\u00a0 <br \/>\n\u00a0 <\/p>\n<div class=\"bg-gradient-to-b from-forest-900 via-forest-800 to-slate-900 text-white pt-10 pb-16 px-4 sm:px-6 relative overflow-hidden\">\n\u00a0 \u00a0 <\/p>\n<div class=\"absolute inset-0 opacity-10 bg-[radial-gradient(#ffffff_1px,transparent_1px)] [background-size:16px_16px]\"><\/div>\n<p>\u00a0 \u00a0 <\/p>\n<div class=\"max-w-3xl mx-auto relative z-10 text-center\">\n\u00a0 \u00a0 \u00a0 <\/p>\n<div class=\"inline-flex items-center gap-2 px-3 py-1 rounded-full bg-white\/10 backdrop-blur-sm border border-white\/15 text-xs font-medium text-emerald-200 mb-3.5\">\n\u00a0 \u00a0 \u00a0 \u00a0 \u2728 Powered by Neighbors, for Neighbors<br \/>\n\u00a0 \u00a0 \u00a0 <\/div>\n<p>\u00a0 \u00a0 \u00a0 <\/p>\n<h1 class=\"text-2xl sm:text-4xl md:text-5xl font-heading font-extrabold tracking-tight leading-tight text-balance\">\n\u00a0 \u00a0 \u00a0 \u00a0 Building Something Real, Together.<br \/>\n\u00a0 \u00a0 \u00a0 <\/h1>\n<p>\u00a0 \u00a0 \u00a0 <\/p>\n<p class=\"mt-3.5 text-slate-300 text-sm sm:text-base leading-relaxed max-w-2xl mx-auto font-light\">\n\u00a0 \u00a0 \u00a0 \u00a0 Community doesn’t happen by chance\u2014it happens by intent. Tell us what gatherings you want to see, and let us know who in your home wants to lend a hand or earn student volunteer hours.<br \/>\n\u00a0 \u00a0 \u00a0 <\/p>\n<p>\u00a0 \u00a0 \u00a0 <\/p>\n<div class=\"mt-5 flex flex-wrap items-center justify-center gap-3 sm:gap-4 text-xs sm:text-sm text-slate-300\">\n\u00a0 \u00a0 \u00a0 \u00a0 <span class=\"flex items-center gap-1.5\"><br \/>\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <svg class=\"w-4 h-4 text-amberAccent-400\" fill=\"currentColor\" viewBox=\"0 0 20 20\"><path fill-rule=\"evenodd\" d=\"M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z\" clip-rule=\"evenodd\"><\/path><\/svg><br \/>\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 2-Minute Survey<br \/>\n\u00a0 \u00a0 \u00a0 \u00a0 <\/span><br \/>\n\u00a0 \u00a0 \u00a0 \u00a0 <span class=\"flex items-center gap-1.5\"><br \/>\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <svg class=\"w-4 h-4 text-amberAccent-400\" fill=\"currentColor\" viewBox=\"0 0 20 20\"><path fill-rule=\"evenodd\" d=\"M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z\" clip-rule=\"evenodd\"><\/path><\/svg><br \/>\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 GCS x2VOL & Club Hours<br \/>\n\u00a0 \u00a0 \u00a0 \u00a0 <\/span><br \/>\n\u00a0 \u00a0 \u00a0 <\/div>\n<p>\u00a0 \u00a0 <\/p><\/div>\n<p>\u00a0 <\/p><\/div>\n<p>\u00a0 <br \/>\n\u00a0 <main class=\"max-w-3xl mx-auto px-4 sm:px-6 -mt-8 relative z-20\"><br \/>\n\u00a0 \u00a0 <\/p>\n<form id=\"communityForm\" onsubmit=\"handleFormSubmit(event)\" class=\"space-y-6 sm:space-y-8\">\n<p>\u00a0 \u00a0 \u00a0 <br \/>\n\u00a0 \u00a0 \u00a0 <\/p>\n<section class=\"bg-white rounded-2xl p-5 sm:p-7 shadow-sm border border-slate-200\/80\">\n\u00a0 \u00a0 \u00a0 \u00a0 <\/p>\n<div class=\"flex items-center gap-3 border-b border-slate-100 pb-3.5 mb-4\">\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <\/p>\n<div class=\"w-8 h-8 rounded-lg bg-emerald-50 text-forest-600 flex items-center justify-center font-bold text-sm\">\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 1<br \/>\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <\/div>\n<p>\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <\/p>\n<div>\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <\/p>\n<h2 class=\"text-base sm:text-lg font-heading font-bold text-slate-900\">Household & Primary Contact<\/h2>\n<p>\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <\/p>\n<p class=\"text-xs text-slate-500\">Main contact for event notices and neighborhood activity coordination<\/p>\n<p>\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <\/p><\/div>\n<p>\u00a0 \u00a0 \u00a0 \u00a0 <\/p><\/div>\n<p>\u00a0 \u00a0 \u00a0 \u00a0 <\/p>\n<div class=\"grid grid-cols-1 sm:grid-cols-2 gap-4\">\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <\/p>\n<div class=\"sm:col-span-2\">\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <label class=\"block text-xs font-semibold text-slate-700 uppercase tracking-wider mb-1\">Primary Contact Name *<\/label><br \/>\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <input type=\"text\" id=\"primaryName\" required placeholder=\"e.g., Sarah Vance or Michael Miller\" class=\"w-full px-3.5 py-3 rounded-xl border border-slate-300 focus:outline-none focus:ring-2 focus:ring-forest-600 text-base sm:text-sm\"><br \/>\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <\/div>\n<p>\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <\/p>\n<div class=\"sm:col-span-2\">\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <label class=\"block text-xs font-semibold text-slate-700 uppercase tracking-wider mb-1\">Jamesford Meadows Street Address *<\/label><br \/>\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <\/p>\n<div class=\"relative\">\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <input type=\"text\" id=\"streetAddress\" required placeholder=\"e.g., 2704 Red Gate Ct or 6210 Akela Trl\" list=\"streetList\" class=\"w-full px-3.5 py-3 rounded-xl border border-slate-300 focus:outline-none focus:ring-2 focus:ring-forest-600 text-base sm:text-sm\"><br \/>\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <datalist id=\"streetList\"><br \/>\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0<option value=\"Jamesford Drive\"><\/option>\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0<option value=\"Akela Trail\"><\/option>\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0<option value=\"Red Gate Court\"><\/option>\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0<option value=\"Setter Court\"><\/option>\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0<option value=\"Worchester Place\"><\/option>\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0<option value=\"Weston Place\"><\/option>\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0<option value=\"Rider Court\"><\/option>\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0<option value=\"Chesterfield Court\"><\/option>\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0<option value=\"Saint Andrews Court\"><\/option>\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0<option value=\"Kittery Court\"><\/option>\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0<option value=\"Cliveden Court\"><\/option>\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0<option value=\"Hackney Way\"><\/option>\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <\/datalist><br \/>\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <\/div>\n<p>\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <\/p>\n<p class=\"text-[11px] text-slate-400 mt-1\">Select or type your street. Jamestown, NC 27282.<\/p>\n<p>\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <\/p><\/div>\n<p>\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <\/p>\n<div>\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <label class=\"block text-xs font-semibold text-slate-700 uppercase tracking-wider mb-1\">Primary Email *<\/label><br \/>\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <input type=\"email\" id=\"primaryEmail\" required placeholder=\"your.name@gmail.com\" class=\"w-full px-3.5 py-3 rounded-xl border border-slate-300 focus:outline-none focus:ring-2 focus:ring-forest-600 text-base sm:text-sm\"><br \/>\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <\/div>\n<p>\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <\/p>\n<div>\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <label class=\"block text-xs font-semibold text-slate-700 uppercase tracking-wider mb-1\">Cell Phone Number *<\/label><br \/>\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <input type=\"tel\" id=\"primaryPhone\" required placeholder=\"(336) 555-0199\" class=\"w-full px-3.5 py-3 rounded-xl border border-slate-300 focus:outline-none focus:ring-2 focus:ring-forest-600 text-base sm:text-sm\"><br \/>\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <\/div>\n<p>\u00a0 \u00a0 \u00a0 \u00a0 <\/p><\/div>\n<p>\u00a0 \u00a0 \u00a0 <\/section>\n<p>\u00a0 \u00a0 \u00a0 <br \/>\n\u00a0 \u00a0 \u00a0 <\/p>\n<section class=\"bg-white rounded-2xl p-5 sm:p-7 shadow-sm border border-slate-200\/80\">\n\u00a0 \u00a0 \u00a0 \u00a0 <\/p>\n<div class=\"flex items-center gap-3 border-b border-slate-100 pb-3.5 mb-4\">\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <\/p>\n<div class=\"w-8 h-8 rounded-lg bg-emerald-50 text-forest-600 flex items-center justify-center font-bold text-sm\">\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 2<br \/>\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <\/div>\n<p>\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <\/p>\n<div>\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <\/p>\n<h2 class=\"text-base sm:text-lg font-heading font-bold text-slate-900\">What Gatherings Would Your Household Attend?<\/h2>\n<p>\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <\/p>\n<p class=\"text-xs text-slate-500\">Pick what you\u2019d like to see hosted at our clubhouse, lawn, and courts<\/p>\n<p>\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <\/p><\/div>\n<p>\u00a0 \u00a0 \u00a0 \u00a0 <\/p><\/div>\n<p>\u00a0 \u00a0 \u00a0 \u00a0 <\/p>\n<div class=\"grid grid-cols-1 sm:grid-cols-2 gap-2.5\">\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <label class=\"flex items-start gap-3 p-3.5 rounded-xl border border-slate-200 hover:border-emerald-500 hover:bg-emerald-50\/25 cursor-pointer transition select-none\"><br \/>\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <input type=\"checkbox\" name=\"communityEvents\" value=\"The Jamesford Jam (Live Acoustic Music)\" class=\"mt-0.5 w-4 h-4 rounded text-forest-600 focus:ring-forest-500\"><br \/>\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <\/p>\n<div>\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <span class=\"text-sm font-semibold text-slate-800 block\">\ud83c\udfb8 The Jamesford Jam<\/span><br \/>\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <span class=\"text-xs text-slate-500\">Casual clubhouse acoustic nights with neighbors<\/span><br \/>\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <\/div>\n<p>\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <\/label><\/p>\n<p>\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <label class=\"flex items-start gap-3 p-3.5 rounded-xl border border-slate-200 hover:border-emerald-500 hover:bg-emerald-50\/25 cursor-pointer transition select-none\"><br \/>\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <input type=\"checkbox\" name=\"communityEvents\" value=\"Canvas & Corks (Clubhouse Painting Night)\" class=\"mt-0.5 w-4 h-4 rounded text-forest-600 focus:ring-forest-500\"><br \/>\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <\/p>\n<div>\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <span class=\"text-sm font-semibold text-slate-800 block\">\ud83c\udfa8 Canvas & Corks<\/span><br \/>\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <span class=\"text-xs text-slate-500\">Casual clubhouse painting & BYOB craft workshop<\/span><br \/>\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <\/div>\n<p>\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <\/label><\/p>\n<p>\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <label class=\"flex items-start gap-3 p-3.5 rounded-xl border border-slate-200 hover:border-emerald-500 hover:bg-emerald-50\/25 cursor-pointer transition select-none\"><br \/>\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <input type=\"checkbox\" name=\"communityEvents\" value=\"Pick-Up Tennis & Pickleball Socials\" class=\"mt-0.5 w-4 h-4 rounded text-forest-600 focus:ring-forest-500\"><br \/>\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <\/p>\n<div>\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <span class=\"text-sm font-semibold text-slate-800 block\">\ud83c\udfbe Pick-Up Tennis & Pickleball<\/span><br \/>\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <span class=\"text-xs text-slate-500\">Drop-in doubles, beginner drills & court socials<\/span><br \/>\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <\/div>\n<p>\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <\/label><\/p>\n<p>\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <label class=\"flex items-start gap-3 p-3.5 rounded-xl border border-slate-200 hover:border-emerald-500 hover:bg-emerald-50\/25 cursor-pointer transition select-none\"><br \/>\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <input type=\"checkbox\" name=\"communityEvents\" value=\"Food Truck & Clubhouse Lawn Hangouts\" class=\"mt-0.5 w-4 h-4 rounded text-forest-600 focus:ring-forest-500\"><br \/>\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <\/p>\n<div>\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <span class=\"text-sm font-semibold text-slate-800 block\">\ud83c\udf54 Food Truck & Lawn Hangouts<\/span><br \/>\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <span class=\"text-xs text-slate-500\">Dinner on the grass, easy weeknight neighborhood fun<\/span><br \/>\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <\/div>\n<p>\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <\/label><\/p>\n<p>\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <label class=\"flex items-start gap-3 p-3.5 rounded-xl border border-slate-200 hover:border-emerald-500 hover:bg-emerald-50\/25 cursor-pointer transition select-none\"><br \/>\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <input type=\"checkbox\" name=\"communityEvents\" value=\"Outdoor Lawn Movie Nights\" class=\"mt-0.5 w-4 h-4 rounded text-forest-600 focus:ring-forest-500\"><br \/>\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <\/p>\n<div>\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <span class=\"text-sm font-semibold text-slate-800 block\">\ud83c\udf7f Lawn Movie Nights<\/span><br \/>\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <span class=\"text-xs text-slate-500\">Blankets, projector screen, popcorn & family films<\/span><br \/>\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <\/div>\n<p>\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <\/label><\/p>\n<p>\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <label class=\"flex items-start gap-3 p-3.5 rounded-xl border border-slate-200 hover:border-emerald-500 hover:bg-emerald-50\/25 cursor-pointer transition select-none\"><br \/>\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <input type=\"checkbox\" name=\"communityEvents\" value=\"Holiday Luminaries\" class=\"mt-0.5 w-4 h-4 rounded text-forest-600 focus:ring-forest-500\" checked><br \/>\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <\/p>\n<div>\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <span class=\"text-sm font-semibold text-slate-800 block\">\u2728 Holiday Luminaries<\/span><br \/>\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <span class=\"text-xs text-slate-500\">Annual neighborhood luminary night across our streets<\/span><br \/>\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <\/div>\n<p>\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <\/label><\/p>\n<p>\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <label class=\"flex items-start gap-3 p-3.5 rounded-xl border border-slate-200 hover:border-emerald-500 hover:bg-emerald-50\/25 cursor-pointer transition select-none\"><br \/>\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <input type=\"checkbox\" name=\"communityEvents\" value=\"Sunset Yoga & Wellness by the Pond\" class=\"mt-0.5 w-4 h-4 rounded text-forest-600 focus:ring-forest-500\"><br \/>\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <\/p>\n<div>\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <span class=\"text-sm font-semibold text-slate-800 block\">\ud83e\uddd8 Sunset Yoga & Stretch<\/span><br \/>\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <span class=\"text-xs text-slate-500\">Casual outdoor stretch & wellness by the pond<\/span><br \/>\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <\/div>\n<p>\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <\/label><\/p>\n<p>\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <label class=\"flex items-start gap-3 p-3.5 rounded-xl border border-slate-200 hover:border-emerald-500 hover:bg-emerald-50\/25 cursor-pointer transition select-none\"><br \/>\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <input type=\"checkbox\" name=\"communityEvents\" value=\"Youth & Family Pond Fishing Derby\" class=\"mt-0.5 w-4 h-4 rounded text-forest-600 focus:ring-forest-500\"><br \/>\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <\/p>\n<div>\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <span class=\"text-sm font-semibold text-slate-800 block\">\ud83c\udfa3 Family Pond Fishing Derby<\/span><br \/>\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <span class=\"text-xs text-slate-500\">Catch-and-release fun with prizes for the kids<\/span><br \/>\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <\/div>\n<p>\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <\/label><br \/>\n\u00a0 \u00a0 \u00a0 \u00a0 <\/div>\n<p>\u00a0 \u00a0 \u00a0 <\/section>\n<p>\u00a0 \u00a0 \u00a0 <br \/>\n\u00a0 \u00a0 \u00a0 <\/p>\n<section class=\"bg-white rounded-2xl p-5 sm:p-7 shadow-sm border border-slate-200\/80\">\n\u00a0 \u00a0 \u00a0 \u00a0 <\/p>\n<div class=\"border-b border-slate-100 pb-3.5 mb-4\">\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <\/p>\n<div class=\"flex items-start gap-3\">\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <\/p>\n<div class=\"w-8 h-8 rounded-lg bg-emerald-50 text-forest-600 flex-shrink-0 flex items-center justify-center font-bold text-sm mt-0.5\">\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 3<br \/>\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <\/div>\n<p>\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <\/p>\n<div class=\"min-w-0 flex-1\">\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <\/p>\n<div class=\"flex items-center justify-between gap-2 flex-wrap\">\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <\/p>\n<h2 class=\"text-base sm:text-lg font-heading font-bold text-slate-900 leading-tight\">Who Wants to Help Out?<\/h2>\n<p>\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <span id=\"helperCountBadge\" class=\"text-xs font-semibold px-2.5 py-0.5 bg-emerald-50 text-emerald-800 rounded-full border border-emerald-200 flex-shrink-0\"><br \/>\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 1 Volunteer<br \/>\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <\/span><br \/>\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <\/div>\n<p>\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <\/p>\n<p class=\"text-xs text-slate-500 mt-1 leading-relaxed\">Not a census! Only list people in your home who want to lend a hand, co-lead, or earn student service hours.<\/p>\n<p>\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <\/p><\/div>\n<p>\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <\/p><\/div>\n<p>\u00a0 \u00a0 \u00a0 \u00a0 <\/p><\/div>\n<p>\u00a0 \u00a0 \u00a0 \u00a0 <br \/>\n\u00a0 \u00a0 \u00a0 \u00a0 <\/p>\n<div id=\"helpersContainer\" class=\"space-y-4\">\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <br \/>\n\u00a0 \u00a0 \u00a0 \u00a0 <\/div>\n<p>\u00a0 \u00a0 \u00a0 \u00a0 <br \/>\n\u00a0 \u00a0 \u00a0 \u00a0 <\/p>\n<div class=\"mt-5 pt-4 border-t border-dashed border-slate-200\">\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <\/p>\n<p class=\"text-xs font-semibold text-slate-600 uppercase tracking-wider mb-2 text-center sm:text-left\">+ Add Another Person in Household Helping Out:<\/p>\n<p>\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <\/p>\n<div class=\"grid grid-cols-2 gap-3\">\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <button type=\"button\" onclick=\"addHelperCard('Adult')\" class=\"py-3 px-3 rounded-xl border-2 border-emerald-600\/30 bg-emerald-50\/60 hover:bg-emerald-100\/80 text-emerald-900 font-heading font-bold text-xs sm:text-sm flex items-center justify-center gap-2 transition active:scale-95\"><br \/>\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <span class=\"text-base\">\ud83d\udc64<\/span><br \/>\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <span>+ Another Adult<\/span><br \/>\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <\/button><br \/>\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <button type=\"button\" onclick=\"addHelperCard('Teen')\" class=\"py-3 px-3 rounded-xl border-2 border-amber-500\/30 bg-amber-50\/70 hover:bg-amber-100\/80 text-amber-900 font-heading font-bold text-xs sm:text-sm flex items-center justify-center gap-2 transition active:scale-95\"><br \/>\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <span class=\"text-base\">\ud83c\udf93<\/span><br \/>\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <span>+ Teen (School Hours)<\/span><br \/>\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <\/button><br \/>\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <\/div>\n<p>\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <\/p>\n<p class=\"text-[11px] text-slate-400 text-center sm:text-left mt-2 leading-tight\">Younger kids are always welcome to help alongside an adult during events!<\/p>\n<p>\u00a0 \u00a0 \u00a0 \u00a0 <\/p><\/div>\n<p>\u00a0 \u00a0 \u00a0 <\/section>\n<p>\u00a0 \u00a0 \u00a0 <br \/>\n\u00a0 \u00a0 \u00a0 <\/p>\n<section class=\"bg-white rounded-2xl p-5 sm:p-7 shadow-sm border border-slate-200\/80\">\n\u00a0 \u00a0 \u00a0 \u00a0 <\/p>\n<div class=\"flex items-center gap-3 border-b border-slate-100 pb-3.5 mb-4\">\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <\/p>\n<div class=\"w-8 h-8 rounded-lg bg-emerald-50 text-forest-600 flex items-center justify-center font-bold text-sm\">\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 4<br \/>\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <\/div>\n<p>\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <\/p>\n<div>\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <\/p>\n<h2 class=\"text-base sm:text-lg font-heading font-bold text-slate-900\">Gear or Equipment You Can Lend (Optional)<\/h2>\n<p>\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <\/p>\n<p class=\"text-xs text-slate-500\">Knowing what we have across our streets makes big community gatherings easier and saves money<\/p>\n<p>\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <\/p><\/div>\n<p>\u00a0 \u00a0 \u00a0 \u00a0 <\/p><\/div>\n<p>\u00a0 \u00a0 \u00a0 \u00a0 <\/p>\n<div>\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <label class=\"block text-xs font-semibold text-slate-700 uppercase tracking-wider mb-1.5\">Equipment On Hand:<\/label><br \/>\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <input type=\"text\" id=\"specialGear\" placeholder=\"e.g., Pickup truck, utility trailer, 10x10 canopy, folding tables, cornhole boards, sound speaker, projector\" class=\"w-full px-3.5 py-3 rounded-xl border border-slate-300 focus:outline-none focus:ring-2 focus:ring-forest-600 text-base sm:text-sm\"><br \/>\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <\/p>\n<p class=\"text-[11px] text-slate-400 mt-1\">Leave blank if you don’t have equipment to lend.<\/p>\n<p>\u00a0 \u00a0 \u00a0 \u00a0 <\/p><\/div>\n<p>\u00a0 \u00a0 \u00a0 <\/section>\n<p>\u00a0 \u00a0 \u00a0 <br \/>\n\u00a0 \u00a0 \u00a0 <\/p>\n<section class=\"bg-white rounded-2xl p-5 sm:p-7 shadow-sm border border-slate-200\/80\">\n\u00a0 \u00a0 \u00a0 \u00a0 <\/p>\n<div class=\"flex items-center gap-3 border-b border-slate-100 pb-3.5 mb-4\">\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <\/p>\n<div class=\"w-8 h-8 rounded-lg bg-emerald-50 text-forest-600 flex items-center justify-center font-bold text-sm\">\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 5<br \/>\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <\/div>\n<p>\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <\/p>\n<div>\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <\/p>\n<h2 class=\"text-base sm:text-lg font-heading font-bold text-slate-900\">Ideas, Suggestions & Notes<\/h2>\n<p>\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <\/p>\n<p class=\"text-xs text-slate-500\">Have an idea for a gathering or something cool we should try in Jamesford Meadows?<\/p>\n<p>\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <\/p><\/div>\n<p>\u00a0 \u00a0 \u00a0 \u00a0 <\/p><\/div>\n<p>\u00a0 \u00a0 \u00a0 \u00a0 <\/p>\n<div>\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <label class=\"block text-xs font-semibold text-slate-700 uppercase tracking-wider mb-1.5\">Your Thoughts or Event Ideas:<\/label><br \/>\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <textarea id=\"generalNotes\" rows=\"3\" placeholder=\"Tell us what you'd love to see happen, any thoughts on timing, or special skills you'd like to share...\" class=\"w-full px-3.5 py-3 rounded-xl border border-slate-300 focus:outline-none focus:ring-2 focus:ring-forest-600 text-base sm:text-sm resize-y\"><\/textarea><br \/>\n\u00a0 \u00a0 \u00a0 \u00a0 <\/div>\n<p>\u00a0 \u00a0 \u00a0 <\/section>\n<p>\u00a0 \u00a0 \u00a0 <br \/>\n\u00a0 \u00a0 \u00a0 <\/p>\n<div class=\"bg-slate-100 rounded-2xl p-4 sm:p-5 border border-slate-200 flex flex-col sm:flex-row items-center justify-between gap-4\">\n\u00a0 \u00a0 \u00a0 \u00a0 <\/p>\n<div>\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <\/p>\n<h4 class=\"font-heading font-bold text-slate-900 text-sm text-center sm:text-left\">Ready to Submit?<\/h4>\n<p>\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <\/p>\n<p class=\"text-xs text-slate-500 text-center sm:text-left mt-0.5\">We’ll organize teams and confirm with the primary contact before any event schedules go out.<\/p>\n<p>\u00a0 \u00a0 \u00a0 \u00a0 <\/p><\/div>\n<p>\u00a0 \u00a0 \u00a0 \u00a0 <button type=\"submit\" id=\"submitBtn\" class=\"w-full sm:w-auto px-7 py-3.5 bg-forest-700 hover:bg-forest-800 active:scale-98 text-white font-heading font-bold text-sm rounded-xl shadow-lg shadow-forest-800\/20 transition flex items-center justify-center gap-2\"><br \/>\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <span id=\"submitBtnText\">Submit Survey & Roster<\/span><br \/>\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <svg id=\"submitBtnIcon\" class=\"w-4 h-4\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M14 5l7 7m0 0l-7 7m7-7H3\"><\/path><\/svg><br \/>\n\u00a0 \u00a0 \u00a0 \u00a0 <\/button><br \/>\n\u00a0 \u00a0 \u00a0 <\/div>\n<p>\u00a0 \u00a0 <\/p><\/form>\n<p>\u00a0 <\/main><\/p>\n<p>\u00a0 <br \/>\n\u00a0 <\/p>\n<div id=\"successModal\" class=\"fixed inset-0 bg-slate-900\/60 backdrop-blur-sm z-50 flex items-center justify-center p-4 hidden\">\n\u00a0 \u00a0 <\/p>\n<div class=\"bg-white rounded-3xl max-w-lg w-full p-5 sm:p-7 shadow-2xl border border-slate-100 transform transition-all\">\n\u00a0 \u00a0 \u00a0 <\/p>\n<div class=\"w-12 h-12 rounded-2xl bg-emerald-100 text-emerald-700 flex items-center justify-center mx-auto mb-4 shadow-inner\">\n\u00a0 \u00a0 \u00a0 \u00a0 <svg class=\"w-7 h-7\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2.5\" d=\"M5 13l4 4L19 7\"><\/path><\/svg><br \/>\n\u00a0 \u00a0 \u00a0 <\/div>\n<p>\u00a0 \u00a0 \u00a0 <\/p>\n<h3 class=\"text-xl sm:text-2xl font-heading font-extrabold text-slate-900 text-center\">You’re in the Roster!<\/h3>\n<p>\u00a0 \u00a0 \u00a0 <\/p>\n<p class=\"text-slate-600 text-center text-xs sm:text-sm mt-1.5 leading-relaxed\">\n\u00a0 \u00a0 \u00a0 \u00a0 Thank you for helping activate Jamesford Meadows. Your responses have been saved:<br \/>\n\u00a0 \u00a0 \u00a0 <\/p>\n<p>\u00a0 \u00a0 \u00a0 <\/p>\n<div id=\"modalSummary\" class=\"mt-4 p-3.5 bg-slate-50 rounded-2xl border border-slate-200 text-xs text-slate-700 space-y-2 max-h-56 overflow-y-auto custom-scroll font-mono\">\n\u00a0 \u00a0 \u00a0 \u00a0 <br \/>\n\u00a0 \u00a0 \u00a0 <\/div>\n<p>\u00a0 \u00a0 \u00a0 <\/p>\n<div class=\"mt-5 flex flex-col sm:flex-row gap-2.5\">\n\u00a0 \u00a0 \u00a0 \u00a0 <button type=\"button\" onclick=\"copyDataToClipboard()\" id=\"copyDataBtn\" class=\"flex-1 py-2.5 px-4 rounded-xl border border-slate-300 text-slate-700 font-semibold text-xs hover:bg-slate-50 transition flex items-center justify-center gap-1.5\"><br \/>\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <svg class=\"w-4 h-4 text-slate-500\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M8 5H6a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2v-1M8 5a2 2 0 002 2h2a2 2 0 002-2M8 5a2 2 0 012-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3\"><\/path><\/svg><br \/>\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 Copy Roster Data<br \/>\n\u00a0 \u00a0 \u00a0 \u00a0 <\/button><br \/>\n\u00a0 \u00a0 \u00a0 \u00a0 <button type=\"button\" onclick=\"closeSuccessModal()\" class=\"flex-1 py-2.5 px-4 rounded-xl bg-forest-700 hover:bg-forest-800 text-white font-semibold text-xs transition\"><br \/>\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 Done<br \/>\n\u00a0 \u00a0 \u00a0 \u00a0 <\/button><br \/>\n\u00a0 \u00a0 \u00a0 <\/div>\n<p>\u00a0 \u00a0 <\/p><\/div>\n<p>\u00a0 <\/p><\/div>\n<p>\u00a0 <br \/>\n\u00a0 <\/p>\n<div id=\"toast\" class=\"fixed bottom-6 right-6 z-50 bg-slate-900 text-white text-xs font-semibold px-4 py-3 rounded-xl shadow-xl flex items-center gap-2 transform translate-y-16 opacity-0 transition-all duration-300\">\n\u00a0 \u00a0 <span id=\"toastMessage\">Notification<\/span><br \/>\n\u00a0 <\/div>\n<p>\u00a0 <br \/>\n\u00a0 <script>\n\u00a0 \u00a0 \/\/ CHANGE THIS to your real email to receive submissions directly in your inbox:\n\u00a0 \u00a0 const TARGET_EMAIL = \"your-email@example.com\";<\/p>\n<p>\u00a0 \u00a0 \/\/ Action tasks available to volunteers (streamlined, no duplicates)\n\u00a0 \u00a0 const volunteerTasks = [\n\u00a0 \u00a0 \u00a0 { id: 'luminaries', label: 'Holiday Luminary Staging & Route Crew', desc: 'Help prep kits\/sandbags at the clubhouse or deliver along cul-de-sac routes' },\n\u00a0 \u00a0 \u00a0 { id: 'setup', label: 'Heavy Lifting & Site Setup', desc: 'Canopies, folding tables, sound cords, and event strike-down' },\n\u00a0 \u00a0 \u00a0 { id: 'hospitality', label: 'Hospitality, Greeter & Refreshments', desc: 'Welcome neighbors at door, manage check-in, water stations, or popcorn machine' },\n\u00a0 \u00a0 \u00a0 { id: 'games', label: 'Lawn Games & Youth Activities', desc: 'Organize cornhole, spikeball, chalk art, or fishing derby safety' },\n\u00a0 \u00a0 \u00a0 { id: 'media', label: 'Photos, Quick Video & Reels', desc: 'Take candid phone clips\/photos at events or make quick recap reels for service hours' },\n\u00a0 \u00a0 \u00a0 { id: 'workshop', label: 'Host a Workshop \/ Skill Share', desc: 'Lead a fun gathering (painting, acoustic guitar, yoga\/fitness, gardening, etc.)' }\n\u00a0 \u00a0 ];<\/p>\n<p>\u00a0 \u00a0 \/\/ High school service-learning programs\n\u00a0 \u00a0 const servicePrograms = [\n\u00a0 \u00a0 \u00a0 'GCS Service-Learning (x2VOL)',\n\u00a0 \u00a0 \u00a0 'National Honor Society (NHS)',\n\u00a0 \u00a0 \u00a0 'Beta Club',\n\u00a0 \u00a0 \u00a0 'Scouts (Eagle\/Gold)',\n\u00a0 \u00a0 \u00a0 'Private\/Charter School Log',\n\u00a0 \u00a0 \u00a0 'College Application'\n\u00a0 \u00a0 ];<\/p>\n<p>\u00a0 \u00a0 \/\/ Helper state (Adults and Teens only)\n\u00a0 \u00a0 let helpers = [\n\u00a0 \u00a0 \u00a0 {\n\u00a0 \u00a0 \u00a0 \u00a0 id: 1,\n\u00a0 \u00a0 \u00a0 \u00a0 isPrimary: true,\n\u00a0 \u00a0 \u00a0 \u00a0 name: '',\n\u00a0 \u00a0 \u00a0 \u00a0 role: 'Adult',\n\u00a0 \u00a0 \u00a0 \u00a0 email: '',\n\u00a0 \u00a0 \u00a0 \u00a0 phone: '',\n\u00a0 \u00a0 \u00a0 \u00a0 tasks: ['Holiday Luminary Staging & Route Crew'],\n\u00a0 \u00a0 \u00a0 \u00a0 needsHours: false,\n\u00a0 \u00a0 \u00a0 \u00a0 schoolName: '',\n\u00a0 \u00a0 \u00a0 \u00a0 gradYear: '',\n\u00a0 \u00a0 \u00a0 \u00a0 programs: [],\n\u00a0 \u00a0 \u00a0 \u00a0 teenCell: ''\n\u00a0 \u00a0 \u00a0 }\n\u00a0 \u00a0 ];<\/p>\n<p>\u00a0 \u00a0 let helperCounter = 1;<\/p>\n<p>\u00a0 \u00a0 \/\/ Attach listeners on load\n\u00a0 \u00a0 window.addEventListener('DOMContentLoaded', () => {\n\u00a0 \u00a0 \u00a0 const primaryInput = document.getElementById('primaryName');\n\u00a0 \u00a0 \u00a0 if (primaryInput) {\n\u00a0 \u00a0 \u00a0 \u00a0 primaryInput.addEventListener('input', (e) => {\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 if (helpers[0] && helpers[0].isPrimary) {\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 helpers[0].name = e.target.value;\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 const heading = document.getElementById(`helperHeading-${helpers[0].id}`);\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 if (heading) {\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 heading.textContent = e.target.value.trim() ? `${e.target.value} (Primary Contact)` : 'Primary Contact (You)';\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 }\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 }\n\u00a0 \u00a0 \u00a0 \u00a0 });\n\u00a0 \u00a0 \u00a0 }\n\u00a0 \u00a0 \u00a0 renderHelpers();\n\u00a0 \u00a0 });<\/p>\n<p>\u00a0 \u00a0 \/\/ Render helper cards\n\u00a0 \u00a0 function renderHelpers() {\n\u00a0 \u00a0 \u00a0 const container = document.getElementById('helpersContainer');\n\u00a0 \u00a0 \u00a0 const badge = document.getElementById('helperCountBadge');\n\u00a0 \u00a0 \u00a0 if (!container) return;<\/p>\n<p>\u00a0 \u00a0 \u00a0 container.innerHTML = '';\n\u00a0 \u00a0 \u00a0 badge.textContent = `${helpers.length} ${helpers.length === 1 ? 'Volunteer' : 'Volunteers'}`;<\/p>\n<p>\u00a0 \u00a0 \u00a0 helpers.forEach((helper, index) => {\n\u00a0 \u00a0 \u00a0 \u00a0 const isAdult = helper.role === 'Adult';\n\u00a0 \u00a0 \u00a0 \u00a0 const isTeen = helper.role === 'Teen';<\/p>\n<p>\u00a0 \u00a0 \u00a0 \u00a0 const card = document.createElement('div');\n\u00a0 \u00a0 \u00a0 \u00a0 card.className = 'p-4 sm:p-5 rounded-2xl bg-slate-50 border border-slate-200\/90 relative transition-all';\n\u00a0 \u00a0 \u00a0 \u00a0 card.id = `helperCard-${helper.id}`;<\/p>\n<p>\u00a0 \u00a0 \u00a0 \u00a0 \/\/ Task checkboxes\n\u00a0 \u00a0 \u00a0 \u00a0 const tasksHtml = volunteerTasks.map(t => {\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 const checked = helper.tasks.includes(t.label) ? 'checked' : '';\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 return `\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <label class=\"flex items-start gap-2.5 p-3 bg-white rounded-xl border border-slate-200 hover:border-emerald-500 hover:bg-emerald-50\/20 cursor-pointer select-none transition\">\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <input type=\"checkbox\" onchange=\"toggleHelperTask(${helper.id}, '${t.label}')\" ${checked} class=\"mt-0.5 flex-shrink-0 rounded text-forest-600 focus:ring-forest-500 w-4 h-4\">\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <\/p>\n<div class=\"text-left min-w-0\">\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <span class=\"text-xs font-bold text-slate-800 block\">${t.label}<\/span>\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <span class=\"text-[11px] text-slate-500 leading-tight block mt-0.5\">${t.desc}<\/span>\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <\/div>\n<p>\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <\/label>\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 `;\n\u00a0 \u00a0 \u00a0 \u00a0 }).join('');<\/p>\n<p>\u00a0 \u00a0 \u00a0 \u00a0 \/\/ Service programs for teens\n\u00a0 \u00a0 \u00a0 \u00a0 const programsHtml = servicePrograms.map(prog => {\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 const checked = helper.programs.includes(prog) ? 'checked' : '';\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 return `\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <label class=\"flex items-center gap-1.5 text-xs text-slate-700 cursor-pointer py-0.5\">\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <input type=\"checkbox\" onchange=\"toggleHelperProgram(${helper.id}, '${prog}')\" ${checked} class=\"rounded text-forest-600 focus:ring-forest-500 w-3.5 h-3.5 flex-shrink-0\">\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <span class=\"leading-tight\">${prog}<\/span>\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <\/label>\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 `;\n\u00a0 \u00a0 \u00a0 \u00a0 }).join('');<\/p>\n<p>\u00a0 \u00a0 \u00a0 \u00a0 card.innerHTML = `\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <\/p>\n<div class=\"flex items-start justify-between gap-2 mb-3 pb-2.5 border-b border-slate-200\/80\">\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <\/p>\n<div class=\"flex items-center gap-2 min-w-0 flex-wrap\">\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <span class=\"w-6 h-6 rounded-full bg-forest-700 text-white text-xs font-bold flex-shrink-0 flex items-center justify-center\">\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 ${index + 1}\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <\/span>\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <\/p>\n<h3 id=\"helperHeading-${helper.id}\" class=\"font-heading font-bold text-slate-800 text-sm leading-tight\">\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 ${helper.isPrimary ? (helper.name ? `${helper.name}` : 'Primary Contact (You)') : (helper.name || `Helper #${index + 1}`)}\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <\/h3>\n<p>\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <span class=\"text-[10px] font-bold uppercase tracking-wider px-2 py-0.5 rounded-md flex-shrink-0 ${\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 isAdult ? 'bg-emerald-100 text-emerald-800' : 'bg-amber-100 text-amber-800'\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 }\">${helper.role}<\/span>\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <\/div>\n<p>\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <\/p>\n<div class=\"flex-shrink-0\">\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 ${!helper.isPrimary ? `\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <button type=\"button\" onclick=\"removeHelperCard(${helper.id})\" class=\"text-xs text-rose-500 hover:text-rose-700 font-semibold flex items-center gap-1 py-0.5 px-1.5 rounded-md hover:bg-rose-50 transition\">\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <svg class=\"w-3.5 h-3.5\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16\"><\/path><\/svg>\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <span>Remove<\/span>\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <\/button>\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 ` : '<span class=\"text-[10px] font-semibold text-slate-500 bg-slate-200\/70 px-2 py-0.5 rounded-md block\">Primary<\/span>'}\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <\/div>\n<p>\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <\/p><\/div>\n<p>\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <\/p>\n<div class=\"mb-3\">\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <label class=\"block text-[11px] font-bold text-slate-600 uppercase tracking-wider mb-1.5\">Helper Type<\/label>\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <\/p>\n<div class=\"grid grid-cols-2 gap-2\">\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <button type=\"button\" onclick=\"setHelperRole(${helper.id}, 'Adult')\" class=\"py-2 px-3 rounded-xl text-xs font-heading font-bold border transition ${\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 isAdult ? 'bg-emerald-700 text-white border-emerald-700 shadow-sm' : 'bg-white text-slate-700 border-slate-300 hover:bg-slate-100'\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 }\">\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \ud83d\udc64 Adult\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <\/button>\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <button type=\"button\" onclick=\"setHelperRole(${helper.id}, 'Teen')\" class=\"py-2 px-3 rounded-xl text-xs font-heading font-bold border transition ${\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 isTeen ? 'bg-amber-600 text-white border-amber-600 shadow-sm' : 'bg-white text-slate-700 border-slate-300 hover:bg-slate-100'\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 }\">\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \ud83c\udf93 Teen (Ages 13\u201318)\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <\/button>\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <\/div>\n<p>\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <\/p><\/div>\n<p>\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 ${!helper.isPrimary ? `\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <\/p>\n<div class=\"mb-3\">\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <label class=\"block text-xs font-semibold text-slate-600 uppercase tracking-wider mb-1\">First Name \/ Nickname<\/label>\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <input type=\"text\" value=\"${helper.name || ''}\" oninput=\"updateHelperField(${helper.id}, 'name', this.value)\" placeholder=\"${\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 isAdult ? 'e.g., Dave, Maria' : 'e.g., Alex, Jordan'\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 }\" class=\"w-full px-3 py-2.5 bg-white rounded-xl border border-slate-300 focus:outline-none focus:ring-2 focus:ring-forest-600 text-base sm:text-sm\">\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <\/div>\n<p>\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 ` : ''}<\/p>\n<p>\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 ${isAdult && !helper.isPrimary ? `\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <\/p>\n<div class=\"grid grid-cols-1 sm:grid-cols-2 gap-2.5 mb-3 p-3 bg-white rounded-xl border border-slate-200\">\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <\/p>\n<div>\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <label class=\"block text-[11px] font-semibold text-slate-600 mb-0.5\">Direct Email (Optional)<\/label>\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <input type=\"email\" value=\"${helper.email || ''}\" oninput=\"updateHelperField(${helper.id}, 'email', this.value)\" placeholder=\"helper@example.com\" class=\"w-full px-2.5 py-2 bg-slate-50 rounded-lg border border-slate-300 text-sm\">\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <\/div>\n<p>\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <\/p>\n<div>\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <label class=\"block text-[11px] font-semibold text-slate-600 mb-0.5\">Direct Cell (Optional)<\/label>\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <input type=\"tel\" value=\"${helper.phone || ''}\" oninput=\"updateHelperField(${helper.id}, 'phone', this.value)\" placeholder=\"(336) 555-0199\" class=\"w-full px-2.5 py-2 bg-slate-50 rounded-lg border border-slate-300 text-sm\">\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <\/div>\n<p>\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <\/p><\/div>\n<p>\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 ` : ''}<\/p>\n<p>\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 ${isTeen ? `\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <\/p>\n<div class=\"mb-3.5 p-3.5 rounded-xl bg-amber-50\/70 border border-amber-200 space-y-3\">\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <\/p>\n<div class=\"flex items-center justify-between\">\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <\/p>\n<div class=\"flex items-center gap-1.5\">\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <span class=\"text-sm\">\ud83c\udf93<\/span>\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <span class=\"text-xs font-bold text-amber-950 uppercase tracking-wider\">High School Service Hours?<\/span>\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <\/div>\n<p>\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <label class=\"relative inline-flex items-center cursor-pointer\">\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <input type=\"checkbox\" onchange=\"updateHelperField(${helper.id}, 'needsHours', this.checked)\" ${helper.needsHours ? 'checked' : ''} class=\"sr-only peer\">\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <\/p>\n<div class=\"w-9 h-5 bg-slate-300 peer-focus:outline-none rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-slate-300 after:border after:rounded-full after:h-4 after:w-4 after:transition-all peer-checked:bg-amber-600\"><\/div>\n<p>\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <span class=\"ml-2 text-xs font-semibold text-amber-950\">${helper.needsHours ? 'Yes, needs hours' : 'No'}<\/span>\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <\/label>\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <\/div>\n<p>\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 ${helper.needsHours ? `\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <\/p>\n<div class=\"pt-2.5 border-t border-amber-200\/70 space-y-2.5\">\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <\/p>\n<div class=\"grid grid-cols-1 sm:grid-cols-2 gap-2.5\">\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <\/p>\n<div>\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <label class=\"block text-[11px] font-semibold text-slate-700 mb-0.5\">High School Attending<\/label>\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <input type=\"text\" value=\"${helper.schoolName || ''}\" oninput=\"updateHelperField(${helper.id}, 'schoolName', this.value)\" placeholder=\"e.g., SW Guilford, Ragsdale, HPCA, Phoenix\" class=\"w-full px-2.5 py-2 bg-white rounded-lg border border-amber-300 text-sm\">\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <\/div>\n<p>\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <\/p>\n<div>\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <label class=\"block text-[11px] font-semibold text-slate-700 mb-0.5\">Graduation Year \/ Grade<\/label>\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <input type=\"text\" value=\"${helper.gradYear || ''}\" oninput=\"updateHelperField(${helper.id}, 'gradYear', this.value)\" placeholder=\"e.g., 2027 \/ 10th Grade\" class=\"w-full px-2.5 py-2 bg-white rounded-lg border border-amber-300 text-sm\">\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <\/div>\n<p>\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <\/p><\/div>\n<p>\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <\/p>\n<div>\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <label class=\"block text-[11px] font-semibold text-slate-700 mb-1\">Program Requiring Sign-Off:<\/label>\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <\/p>\n<div class=\"grid grid-cols-2 gap-1.5\">\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 ${programsHtml}\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <\/div>\n<p>\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <\/p><\/div>\n<p>\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <\/p>\n<div>\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <label class=\"block text-[11px] font-semibold text-slate-700 mb-0.5\">Student Cell (Optional)<\/label>\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <\/p>\n<p class=\"text-[10px] text-slate-500 mb-1\">Parent is always CC'd on volunteer reminders.<\/p>\n<p>\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <input type=\"tel\" value=\"${helper.teenCell || ''}\" oninput=\"updateHelperField(${helper.id}, 'teenCell', this.value)\" placeholder=\"(336) 555-0199\" class=\"w-full px-2.5 py-2 bg-white rounded-lg border border-amber-300 text-sm\">\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <\/div>\n<p>\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <\/p><\/div>\n<p>\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 ` : `\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <\/p>\n<p class=\"text-[11px] text-amber-900\/80\">Toggle on if this student wants official sign-offs for Beta Club, NHS, or GCS x2VOL.<\/p>\n<p>\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 `}\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <\/p><\/div>\n<p>\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 ` : ''}<\/p>\n<p>\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <\/p>\n<div>\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <label class=\"block text-[11px] font-bold text-slate-600 uppercase tracking-wider mb-1.5\">What would ${helper.name || 'this person'} like to help out with?<\/label>\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <\/p>\n<div class=\"grid grid-cols-1 sm:grid-cols-2 gap-2\">\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 ${tasksHtml}\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <\/div>\n<p>\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <\/p><\/div>\n<p>\u00a0 \u00a0 \u00a0 \u00a0 `;<\/p>\n<p>\u00a0 \u00a0 \u00a0 \u00a0 container.appendChild(card);\n\u00a0 \u00a0 \u00a0 });\n\u00a0 \u00a0 }<\/p>\n<p>\u00a0 \u00a0 \/\/ Role switcher (Adult \/ Teen)\n\u00a0 \u00a0 function setHelperRole(id, newRole) {\n\u00a0 \u00a0 \u00a0 const helper = helpers.find(h => h.id === id);\n\u00a0 \u00a0 \u00a0 if (helper) {\n\u00a0 \u00a0 \u00a0 \u00a0 helper.role = newRole;\n\u00a0 \u00a0 \u00a0 \u00a0 if (newRole !== 'Teen') helper.needsHours = false;\n\u00a0 \u00a0 \u00a0 \u00a0 renderHelpers();\n\u00a0 \u00a0 \u00a0 }\n\u00a0 \u00a0 }<\/p>\n<p>\u00a0 \u00a0 \/\/ Add another volunteer card\n\u00a0 \u00a0 function addHelperCard(role = 'Adult') {\n\u00a0 \u00a0 \u00a0 helperCounter++;\n\u00a0 \u00a0 \u00a0 helpers.push({\n\u00a0 \u00a0 \u00a0 \u00a0 id: helperCounter,\n\u00a0 \u00a0 \u00a0 \u00a0 isPrimary: false,\n\u00a0 \u00a0 \u00a0 \u00a0 name: '',\n\u00a0 \u00a0 \u00a0 \u00a0 role: role,\n\u00a0 \u00a0 \u00a0 \u00a0 email: '',\n\u00a0 \u00a0 \u00a0 \u00a0 phone: '',\n\u00a0 \u00a0 \u00a0 \u00a0 tasks: ['Holiday Luminary Staging & Route Crew'],\n\u00a0 \u00a0 \u00a0 \u00a0 needsHours: false,\n\u00a0 \u00a0 \u00a0 \u00a0 schoolName: '',\n\u00a0 \u00a0 \u00a0 \u00a0 gradYear: '',\n\u00a0 \u00a0 \u00a0 \u00a0 programs: [],\n\u00a0 \u00a0 \u00a0 \u00a0 teenCell: ''\n\u00a0 \u00a0 \u00a0 });\n\u00a0 \u00a0 \u00a0 renderHelpers();\n\u00a0 \u00a0 \u00a0 showToast(`Added ${role} volunteer`);\n\u00a0 \u00a0 }<\/p>\n<p>\u00a0 \u00a0 \/\/ Remove a helper\n\u00a0 \u00a0 function removeHelperCard(id) {\n\u00a0 \u00a0 \u00a0 if (helpers.length <= 1) return;\n\u00a0 \u00a0 \u00a0 helpers = helpers.filter(h => h.id !== id);\n\u00a0 \u00a0 \u00a0 renderHelpers();\n\u00a0 \u00a0 \u00a0 showToast(\"Removed volunteer\");\n\u00a0 \u00a0 }<\/p>\n<p>\u00a0 \u00a0 \/\/ Update individual helper fields\n\u00a0 \u00a0 function updateHelperField(id, field, value) {\n\u00a0 \u00a0 \u00a0 const helper = helpers.find(h => h.id === id);\n\u00a0 \u00a0 \u00a0 if (helper) {\n\u00a0 \u00a0 \u00a0 \u00a0 helper[field] = value;\n\u00a0 \u00a0 \u00a0 \u00a0 if (field === 'needsHours') renderHelpers();\n\u00a0 \u00a0 \u00a0 }\n\u00a0 \u00a0 }<\/p>\n<p>\u00a0 \u00a0 \/\/ Toggle specific helper task\n\u00a0 \u00a0 function toggleHelperTask(id, taskLabel) {\n\u00a0 \u00a0 \u00a0 const helper = helpers.find(h => h.id === id);\n\u00a0 \u00a0 \u00a0 if (helper) {\n\u00a0 \u00a0 \u00a0 \u00a0 if (helper.tasks.includes(taskLabel)) {\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 helper.tasks = helper.tasks.filter(t => t !== taskLabel);\n\u00a0 \u00a0 \u00a0 \u00a0 } else {\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 helper.tasks.push(taskLabel);\n\u00a0 \u00a0 \u00a0 \u00a0 }\n\u00a0 \u00a0 \u00a0 }\n\u00a0 \u00a0 }<\/p>\n<p>\u00a0 \u00a0 \/\/ Toggle service program\n\u00a0 \u00a0 function toggleHelperProgram(id, program) {\n\u00a0 \u00a0 \u00a0 const helper = helpers.find(h => h.id === id);\n\u00a0 \u00a0 \u00a0 if (helper) {\n\u00a0 \u00a0 \u00a0 \u00a0 if (helper.programs.includes(program)) {\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 helper.programs = helper.programs.filter(p => p !== program);\n\u00a0 \u00a0 \u00a0 \u00a0 } else {\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 helper.programs.push(program);\n\u00a0 \u00a0 \u00a0 \u00a0 }\n\u00a0 \u00a0 \u00a0 }\n\u00a0 \u00a0 }<\/p>\n<p>\u00a0 \u00a0 \/\/ Form submission\n\u00a0 \u00a0 async function handleFormSubmit(e) {\n\u00a0 \u00a0 \u00a0 e.preventDefault();<\/p>\n<p>\u00a0 \u00a0 \u00a0 const submitBtn = document.getElementById('submitBtn');\n\u00a0 \u00a0 \u00a0 const submitBtnText = document.getElementById('submitBtnText');\n\u00a0 \u00a0 \u00a0 const submitBtnIcon = document.getElementById('submitBtnIcon');<\/p>\n<p>\u00a0 \u00a0 \u00a0 const primaryName = document.getElementById('primaryName').value;\n\u00a0 \u00a0 \u00a0 const streetAddress = document.getElementById('streetAddress').value;\n\u00a0 \u00a0 \u00a0 const primaryEmail = document.getElementById('primaryEmail').value;\n\u00a0 \u00a0 \u00a0 const primaryPhone = document.getElementById('primaryPhone').value;\n\u00a0 \u00a0 \u00a0 const specialGear = document.getElementById('specialGear').value;\n\u00a0 \u00a0 \u00a0 const generalNotes = document.getElementById('generalNotes').value;<\/p>\n<p>\u00a0 \u00a0 \u00a0 \/\/ Sync primary name to helper 1 if left empty\n\u00a0 \u00a0 \u00a0 if (helpers[0] && helpers[0].isPrimary && !helpers[0].name) {\n\u00a0 \u00a0 \u00a0 \u00a0 helpers[0].name = primaryName;\n\u00a0 \u00a0 \u00a0 }<\/p>\n<p>\u00a0 \u00a0 \u00a0 \/\/ Collect wishlist events\n\u00a0 \u00a0 \u00a0 const wishlistEvents = Array.from(document.querySelectorAll('input[name=\"communityEvents\"]:checked')).map(cb => cb.value);<\/p>\n<p>\u00a0 \u00a0 \u00a0 \/\/ Build structured helpers summary for human-readable email\n\u00a0 \u00a0 \u00a0 const helperListFormatted = helpers.map((h, i) => {\n\u00a0 \u00a0 \u00a0 \u00a0 const name = h.name || (h.isPrimary ? primaryName : `Helper #${i+1}`);\n\u00a0 \u00a0 \u00a0 \u00a0 const tasks = h.tasks.length ? h.tasks.join(', ') : 'No specific tasks chosen';\n\u00a0 \u00a0 \u00a0 \u00a0 const hours = h.role === 'Teen' && h.needsHours ? ` [NEEDS SCHOOL HOURS - School: ${h.schoolName || 'N\/A'}, Grade: ${h.gradYear || 'N\/A'}, Programs: ${h.programs.join(', ') || 'N\/A'}, Teen Cell: ${h.teenCell || 'N\/A'}]` : '';\n\u00a0 \u00a0 \u00a0 \u00a0 return `\u2022 ${name} (${h.role})${hours}\\n \u00a0 Tasks: ${tasks}`;\n\u00a0 \u00a0 \u00a0 }).join('\\n\\n');<\/p>\n<p>\u00a0 \u00a0 \u00a0 const payload = {\n\u00a0 \u00a0 \u00a0 \u00a0 _subject: `New Jamesford Meadows Survey: ${primaryName} (${streetAddress})`,\n\u00a0 \u00a0 \u00a0 \u00a0 PrimaryContactName: primaryName,\n\u00a0 \u00a0 \u00a0 \u00a0 StreetAddress: streetAddress,\n\u00a0 \u00a0 \u00a0 \u00a0 PrimaryEmail: primaryEmail,\n\u00a0 \u00a0 \u00a0 \u00a0 PrimaryPhone: primaryPhone,\n\u00a0 \u00a0 \u00a0 \u00a0 WishlistEvents: wishlistEvents.join(', ') || 'None selected',\n\u00a0 \u00a0 \u00a0 \u00a0 VolunteerRoster: helperListFormatted,\n\u00a0 \u00a0 \u00a0 \u00a0 GearToLend: specialGear || 'None listed',\n\u00a0 \u00a0 \u00a0 \u00a0 IdeasAndNotes: generalNotes || 'None',\n\u00a0 \u00a0 \u00a0 \u00a0 SubmittedAt: new Date().toLocaleString()\n\u00a0 \u00a0 \u00a0 };<\/p>\n<p>\u00a0 \u00a0 \u00a0 \/\/ Set loading state on button\n\u00a0 \u00a0 \u00a0 submitBtn.disabled = true;\n\u00a0 \u00a0 \u00a0 submitBtnText.textContent = \"Sending Roster...\";\n\u00a0 \u00a0 \u00a0 submitBtnIcon.classList.add('animate-spin');<\/p>\n<p>\u00a0 \u00a0 \u00a0 \/\/ Attempt sending to email via FormSubmit AJAX endpoint\n\u00a0 \u00a0 \u00a0 try {\n\u00a0 \u00a0 \u00a0 \u00a0 if (TARGET_EMAIL && TARGET_EMAIL !== \"your-email@example.com\") {\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 await fetch(`https:\/\/formsubmit.co\/ajax\/${TARGET_EMAIL}`, {\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 method: \"POST\",\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 headers: {\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \"Content-Type\": \"application\/json\",\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \"Accept\": \"application\/json\"\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 },\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 body: JSON.stringify(payload)\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 });\n\u00a0 \u00a0 \u00a0 \u00a0 }\n\u00a0 \u00a0 \u00a0 } catch (err) {\n\u00a0 \u00a0 \u00a0 \u00a0 console.warn(\"Could not reach email endpoint:\", err);\n\u00a0 \u00a0 \u00a0 } finally {\n\u00a0 \u00a0 \u00a0 \u00a0 submitBtn.disabled = false;\n\u00a0 \u00a0 \u00a0 \u00a0 submitBtnText.textContent = \"Submit Survey & Roster\";\n\u00a0 \u00a0 \u00a0 \u00a0 submitBtnIcon.classList.remove('animate-spin');\n\u00a0 \u00a0 \u00a0 }<\/p>\n<p>\u00a0 \u00a0 \u00a0 \/\/ Populate summary modal\n\u00a0 \u00a0 \u00a0 const modalSummary = document.getElementById('modalSummary');\n\u00a0 \u00a0 \u00a0 const helperSummaries = helpers.map(h => {\n\u00a0 \u00a0 \u00a0 \u00a0 const name = h.name || (h.isPrimary ? primaryName : 'Unnamed Helper');\n\u00a0 \u00a0 \u00a0 \u00a0 const tasks = h.tasks.length > 0 ? h.tasks.join(', ') : 'No specific tasks selected';\n\u00a0 \u00a0 \u00a0 \u00a0 const hoursTag = h.role === 'Teen' && h.needsHours ? ' [Needs Service Hours]' : '';\n\u00a0 \u00a0 \u00a0 \u00a0 return `<\/p>\n<div><strong>${escapeHtml(name)}<\/strong> (${h.role}${hoursTag}):<br \/><span class=\"text-slate-500\">${escapeHtml(tasks)}<\/span><\/div>\n<p>`;\n\u00a0 \u00a0 \u00a0 }).join('<\/p>\n<div class=\"border-t border-slate-200 my-1.5\"><\/div>\n<p>');<\/p>\n<p>\u00a0 \u00a0 \u00a0 modalSummary.innerHTML = `\n\u00a0 \u00a0 \u00a0 \u00a0 <\/p>\n<div class=\"font-bold text-slate-900 border-b pb-1\">HOUSEHOLD ROSTER SUBMISSION<\/div>\n<p>\u00a0 \u00a0 \u00a0 \u00a0 <\/p>\n<div><strong>Primary:<\/strong> ${escapeHtml(primaryName)} (${escapeHtml(primaryEmail)})<\/div>\n<p>\u00a0 \u00a0 \u00a0 \u00a0 <\/p>\n<div><strong>Street:<\/strong> ${escapeHtml(streetAddress)}<\/div>\n<p>\u00a0 \u00a0 \u00a0 \u00a0 <\/p>\n<div><strong>Events Interested in:<\/strong> ${wishlistEvents.length} selected<\/div>\n<p>\u00a0 \u00a0 \u00a0 \u00a0 <\/p>\n<div class=\"border-t border-slate-200 pt-1.5\"><strong>Volunteers Registered (${helpers.length}):<\/strong><\/div>\n<p>\u00a0 \u00a0 \u00a0 \u00a0 ${helperSummaries}\n\u00a0 \u00a0 \u00a0 \u00a0 ${specialGear ? `<\/p>\n<div class=\"border-t border-slate-200 pt-1.5\"><strong>Gear to Lend:<\/strong> ${escapeHtml(specialGear)}<\/div>\n<p>` : ''}\n\u00a0 \u00a0 \u00a0 \u00a0 ${generalNotes ? `<\/p>\n<div class=\"border-t border-slate-200 pt-1.5\"><strong>Ideas\/Notes:<\/strong> ${escapeHtml(generalNotes)}<\/div>\n<p>` : ''}\n\u00a0 \u00a0 \u00a0 `;<\/p>\n<p>\u00a0 \u00a0 \u00a0 window.lastSubmittedPayload = payload;\n\u00a0 \u00a0 \u00a0 document.getElementById('successModal').classList.remove('hidden');\n\u00a0 \u00a0 }<\/p>\n<p>\u00a0 \u00a0 function closeSuccessModal() {\n\u00a0 \u00a0 \u00a0 document.getElementById('successModal').classList.add('hidden');\n\u00a0 \u00a0 \u00a0 showToast(\"Thank you! Your volunteer roster was submitted.\");\n\u00a0 \u00a0 }<\/p>\n<p>\u00a0 \u00a0 function copyDataToClipboard() {\n\u00a0 \u00a0 \u00a0 if (!window.lastSubmittedPayload) return;\n\u00a0 \u00a0 \u00a0 const text = JSON.stringify(window.lastSubmittedPayload, null, 2);\n\u00a0 \u00a0 \u00a0 \n\u00a0 \u00a0 \u00a0 const tempInput = document.createElement(\"textarea\");\n\u00a0 \u00a0 \u00a0 tempInput.value = text;\n\u00a0 \u00a0 \u00a0 document.body.appendChild(tempInput);\n\u00a0 \u00a0 \u00a0 tempInput.select();\n\u00a0 \u00a0 \u00a0 document.execCommand(\"copy\");\n\u00a0 \u00a0 \u00a0 document.body.removeChild(tempInput);<\/p>\n<p>\u00a0 \u00a0 \u00a0 const btn = document.getElementById('copyDataBtn');\n\u00a0 \u00a0 \u00a0 const originalText = btn.innerHTML;\n\u00a0 \u00a0 \u00a0 btn.innerHTML = `\u2713 Copied Data!`;\n\u00a0 \u00a0 \u00a0 setTimeout(() => {\n\u00a0 \u00a0 \u00a0 \u00a0 btn.innerHTML = originalText;\n\u00a0 \u00a0 \u00a0 }, 2000);\n\u00a0 \u00a0 \u00a0 showToast(\"Roster data copied to clipboard!\");\n\u00a0 \u00a0 }<\/p>\n<p>\u00a0 \u00a0 function showToast(message) {\n\u00a0 \u00a0 \u00a0 const toast = document.getElementById('toast');\n\u00a0 \u00a0 \u00a0 const msg = document.getElementById('toastMessage');\n\u00a0 \u00a0 \u00a0 msg.textContent = message;\n\u00a0 \u00a0 \u00a0 toast.classList.remove('translate-y-16', 'opacity-0');\n\u00a0 \u00a0 \u00a0 setTimeout(() => {\n\u00a0 \u00a0 \u00a0 \u00a0 toast.classList.add('translate-y-16', 'opacity-0');\n\u00a0 \u00a0 \u00a0 }, 2800);\n\u00a0 \u00a0 }<\/p>\n<p>\u00a0 \u00a0 function shareSurvey() {\n\u00a0 \u00a0 \u00a0 const shareData = {\n\u00a0 \u00a0 \u00a0 \u00a0 title: 'Jamesford Meadows Community & Volunteer Survey',\n\u00a0 \u00a0 \u00a0 \u00a0 text: 'Help us plan gatherings and volunteer teams across Jamesford Meadows! Fill out the quick survey:',\n\u00a0 \u00a0 \u00a0 \u00a0 url: window.location.href\n\u00a0 \u00a0 \u00a0 };<\/p>\n<p>\u00a0 \u00a0 \u00a0 if (navigator.share) {\n\u00a0 \u00a0 \u00a0 \u00a0 navigator.share(shareData).catch(() => {});\n\u00a0 \u00a0 \u00a0 } else {\n\u00a0 \u00a0 \u00a0 \u00a0 const tempInput = document.createElement(\"textarea\");\n\u00a0 \u00a0 \u00a0 \u00a0 tempInput.value = `${shareData.text} ${window.location.href}`;\n\u00a0 \u00a0 \u00a0 \u00a0 document.body.appendChild(tempInput);\n\u00a0 \u00a0 \u00a0 \u00a0 tempInput.select();\n\u00a0 \u00a0 \u00a0 \u00a0 document.execCommand(\"copy\");\n\u00a0 \u00a0 \u00a0 \u00a0 document.body.removeChild(tempInput);\n\u00a0 \u00a0 \u00a0 \u00a0 showToast(\"Survey link copied to clipboard!\");\n\u00a0 \u00a0 \u00a0 }\n\u00a0 \u00a0 }<\/p>\n<p>\u00a0 \u00a0 function escapeHtml(text) {\n\u00a0 \u00a0 \u00a0 if (!text) return '';\n\u00a0 \u00a0 \u00a0 return text.replace(\/&\/g, \"&\").replace(\/<\/g, \"<\").replace(\/>\/g, \">\");\n\u00a0 \u00a0 }\n\u00a0 <\/script><br \/>\n<\/body><br \/>\n<\/html><\/p>\n<p>Help me set this form up in wordpress<\/p>\n","protected":false},"excerpt":{"rendered":"<p>\u00a0 \u00a0 \u00a0 Jamesford Meadows \u2014 Community & Volunteer Roster \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 JM \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 Jamesford Meadows \u00a0 \u00a0 \u00a0 \u00a0 […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"open","template":"page-no-title","meta":{"footnotes":""},"class_list":["post-2","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/jamesfordmeadows.com\/index.php?rest_route=\/wp\/v2\/pages\/2","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/jamesfordmeadows.com\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/jamesfordmeadows.com\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/jamesfordmeadows.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/jamesfordmeadows.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=2"}],"version-history":[{"count":2,"href":"https:\/\/jamesfordmeadows.com\/index.php?rest_route=\/wp\/v2\/pages\/2\/revisions"}],"predecessor-version":[{"id":11,"href":"https:\/\/jamesfordmeadows.com\/index.php?rest_route=\/wp\/v2\/pages\/2\/revisions\/11"}],"wp:attachment":[{"href":"https:\/\/jamesfordmeadows.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=2"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

{"id":2,"date":"2026-09-07T13:57:11","date_gmt":"2026-09-07T13:57:11","guid":{"rendered":"https:\/\/jamesfordmeadows.com\/?page_id=2"},"modified":"2026-09-07T15:46:11","modified_gmt":"2026-09-07T15:46:11","slug":"sample-page","status":"publish","type":"page","link":"https:\/\/jamesfordmeadows.com\/?page_id=2","title":{"rendered":"Sample Page"},"content":{"rendered":"

\n
\n
\n\u00a0
\n\u00a0
\n\u00a0 Jamesford Meadows \u2014 Community & Volunteer Roster<\/title><br \/>\n\u00a0 <br \/>\n\u00a0 <script src=\"https:\/\/cdn.tailwindcss.com\"><\/script><br \/>\n\u00a0 <br \/>\n\u00a0 <link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\n\u00a0 <link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin>\n\u00a0 <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=Inter:wght@400;500;600&display=swap\" rel=\"stylesheet\">\n\u00a0<br \/>\n\u00a0 <script>\n\u00a0 \u00a0 tailwind.config = {\n\u00a0 \u00a0 \u00a0 theme: {\n\u00a0 \u00a0 \u00a0 \u00a0 extend: {\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 fontFamily: {\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 sans: ['Inter', 'sans-serif'],\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 heading: ['\"Plus Jakarta Sans\"', 'sans-serif'],\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 },\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 colors: {\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 forest: {\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 50: '#f2f9f5',\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 100: '#e1f2e8',\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 500: '#1b7a4b',\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 600: '#13623b',\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 700: '#0e4a2d',\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 800: '#0b3923',\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 900: '#072517',\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 },\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 amberAccent: {\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 400: '#fbbf24',\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 500: '#f59e0b',\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 600: '#d97706',\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 }\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 }\n\u00a0 \u00a0 \u00a0 \u00a0 }\n\u00a0 \u00a0 \u00a0 }\n\u00a0 \u00a0 }\n\u00a0 <\/script><\/p>\n<p>\u00a0 <\/p>\n<style>\n\u00a0 \u00a0 .custom-scroll::-webkit-scrollbar {\n\u00a0 \u00a0 \u00a0 width: 6px;\n\u00a0 \u00a0 }\n\u00a0 \u00a0 .custom-scroll::-webkit-scrollbar-thumb {\n\u00a0 \u00a0 \u00a0 background-color: #cbd5e1;\n\u00a0 \u00a0 \u00a0 border-radius: 9999px;\n\u00a0 \u00a0 }\n\u00a0 <\/style>\n<p><\/head><br \/>\n<body class=\"bg-slate-50 text-slate-800 font-sans antialiased min-h-screen pb-20\"><\/p>\n<p>\u00a0 <br \/>\n\u00a0 <\/p>\n<header class=\"bg-white\/95 backdrop-blur border-b border-slate-200 sticky top-0 z-30 shadow-sm\">\n\u00a0 \u00a0 <\/p>\n<div class=\"max-w-4xl mx-auto px-3.5 sm:px-6 h-14 sm:h-16 flex items-center justify-between gap-2\">\n\u00a0 \u00a0 \u00a0 <\/p>\n<div class=\"flex items-center space-x-2.5 min-w-0\">\n\u00a0 \u00a0 \u00a0 \u00a0 <\/p>\n<div class=\"w-8 h-8 sm:w-9 sm:h-9 rounded-xl bg-forest-700 text-white flex-shrink-0 flex items-center justify-center font-heading font-bold text-xs sm:text-sm shadow-md shadow-forest-700\/20\">\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 JM<br \/>\n\u00a0 \u00a0 \u00a0 \u00a0 <\/div>\n<p>\u00a0 \u00a0 \u00a0 \u00a0 <\/p>\n<div class=\"min-w-0\">\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <span class=\"font-heading font-bold text-slate-900 tracking-tight block text-xs sm:text-base leading-tight truncate\">Jamesford Meadows<\/span><br \/>\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <span class=\"text-[10px] sm:text-[11px] text-slate-500 font-medium tracking-wide uppercase truncate block\">Community & Volunteer Hub<\/span><br \/>\n\u00a0 \u00a0 \u00a0 \u00a0 <\/div>\n<p>\u00a0 \u00a0 \u00a0 <\/p><\/div>\n<p>\u00a0 \u00a0 \u00a0 <\/p>\n<div class=\"flex items-center gap-2\">\n\u00a0 \u00a0 \u00a0 \u00a0 <button type=\"button\" onclick=\"shareSurvey()\" class=\"inline-flex items-center gap-1.5 px-2.5 sm:px-3 py-1.5 rounded-lg text-xs font-semibold bg-emerald-50 text-emerald-800 hover:bg-emerald-100 border border-emerald-200\/80 transition active:scale-95\"><br \/>\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <svg class=\"w-3.5 h-3.5 text-emerald-700\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M8.684 13.342C8.886 12.938 9 12.482 9 12c0-.482-.114-.938-.316-1.342m0 2.684a3 3 0 110-2.684m0 2.684l6.632 3.316m-6.632-6l6.632-3.316m0 0a3 3 0 105.367-2.684 3 3 0 00-5.367 2.684zm0 9.316a3 3 0 105.368 2.684 3 3 0 00-5.368-2.684z\"><\/path><\/svg><br \/>\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <span class=\"hidden xs:inline\">Share<\/span><br \/>\n\u00a0 \u00a0 \u00a0 \u00a0 <\/button><br \/>\n\u00a0 \u00a0 \u00a0 \u00a0 <span class=\"inline-flex items-center px-2 sm:px-2.5 py-1 rounded-full text-[10px] sm:text-xs font-medium bg-slate-100 text-slate-700 border border-slate-200\"><br \/>\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <span class=\"w-1.5 h-1.5 rounded-full bg-emerald-500 mr-1 sm:mr-1.5 animate-pulse\"><\/span><br \/>\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 2026 Roster<br \/>\n\u00a0 \u00a0 \u00a0 \u00a0 <\/span><br \/>\n\u00a0 \u00a0 \u00a0 <\/div>\n<p>\u00a0 \u00a0 <\/p><\/div>\n<p>\u00a0 <\/header>\n<p>\u00a0 <br \/>\n\u00a0 <\/p>\n<div class=\"bg-gradient-to-b from-forest-900 via-forest-800 to-slate-900 text-white pt-10 pb-16 px-4 sm:px-6 relative overflow-hidden\">\n\u00a0 \u00a0 <\/p>\n<div class=\"absolute inset-0 opacity-10 bg-[radial-gradient(#ffffff_1px,transparent_1px)] [background-size:16px_16px]\"><\/div>\n<p>\u00a0 \u00a0 <\/p>\n<div class=\"max-w-3xl mx-auto relative z-10 text-center\">\n\u00a0 \u00a0 \u00a0 <\/p>\n<div class=\"inline-flex items-center gap-2 px-3 py-1 rounded-full bg-white\/10 backdrop-blur-sm border border-white\/15 text-xs font-medium text-emerald-200 mb-3.5\">\n\u00a0 \u00a0 \u00a0 \u00a0 \u2728 Powered by Neighbors, for Neighbors<br \/>\n\u00a0 \u00a0 \u00a0 <\/div>\n<p>\u00a0 \u00a0 \u00a0 <\/p>\n<h1 class=\"text-2xl sm:text-4xl md:text-5xl font-heading font-extrabold tracking-tight leading-tight text-balance\">\n\u00a0 \u00a0 \u00a0 \u00a0 Building Something Real, Together.<br \/>\n\u00a0 \u00a0 \u00a0 <\/h1>\n<p>\u00a0 \u00a0 \u00a0 <\/p>\n<p class=\"mt-3.5 text-slate-300 text-sm sm:text-base leading-relaxed max-w-2xl mx-auto font-light\">\n\u00a0 \u00a0 \u00a0 \u00a0 Community doesn’t happen by chance\u2014it happens by intent. Tell us what gatherings you want to see, and let us know who in your home wants to lend a hand or earn student volunteer hours.<br \/>\n\u00a0 \u00a0 \u00a0 <\/p>\n<p>\u00a0 \u00a0 \u00a0 <\/p>\n<div class=\"mt-5 flex flex-wrap items-center justify-center gap-3 sm:gap-4 text-xs sm:text-sm text-slate-300\">\n\u00a0 \u00a0 \u00a0 \u00a0 <span class=\"flex items-center gap-1.5\"><br \/>\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <svg class=\"w-4 h-4 text-amberAccent-400\" fill=\"currentColor\" viewBox=\"0 0 20 20\"><path fill-rule=\"evenodd\" d=\"M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z\" clip-rule=\"evenodd\"><\/path><\/svg><br \/>\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 2-Minute Survey<br \/>\n\u00a0 \u00a0 \u00a0 \u00a0 <\/span><br \/>\n\u00a0 \u00a0 \u00a0 \u00a0 <span class=\"flex items-center gap-1.5\"><br \/>\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <svg class=\"w-4 h-4 text-amberAccent-400\" fill=\"currentColor\" viewBox=\"0 0 20 20\"><path fill-rule=\"evenodd\" d=\"M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z\" clip-rule=\"evenodd\"><\/path><\/svg><br \/>\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 GCS x2VOL & Club Hours<br \/>\n\u00a0 \u00a0 \u00a0 \u00a0 <\/span><br \/>\n\u00a0 \u00a0 \u00a0 <\/div>\n<p>\u00a0 \u00a0 <\/p><\/div>\n<p>\u00a0 <\/p><\/div>\n<p>\u00a0 <br \/>\n\u00a0 <main class=\"max-w-3xl mx-auto px-4 sm:px-6 -mt-8 relative z-20\"><br \/>\n\u00a0 \u00a0 <\/p>\n<form id=\"communityForm\" onsubmit=\"handleFormSubmit(event)\" class=\"space-y-6 sm:space-y-8\">\n<p>\u00a0 \u00a0 \u00a0 <br \/>\n\u00a0 \u00a0 \u00a0 <\/p>\n<section class=\"bg-white rounded-2xl p-5 sm:p-7 shadow-sm border border-slate-200\/80\">\n\u00a0 \u00a0 \u00a0 \u00a0 <\/p>\n<div class=\"flex items-center gap-3 border-b border-slate-100 pb-3.5 mb-4\">\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <\/p>\n<div class=\"w-8 h-8 rounded-lg bg-emerald-50 text-forest-600 flex items-center justify-center font-bold text-sm\">\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 1<br \/>\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <\/div>\n<p>\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <\/p>\n<div>\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <\/p>\n<h2 class=\"text-base sm:text-lg font-heading font-bold text-slate-900\">Household & Primary Contact<\/h2>\n<p>\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <\/p>\n<p class=\"text-xs text-slate-500\">Main contact for event notices and neighborhood activity coordination<\/p>\n<p>\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <\/p><\/div>\n<p>\u00a0 \u00a0 \u00a0 \u00a0 <\/p><\/div>\n<p>\u00a0 \u00a0 \u00a0 \u00a0 <\/p>\n<div class=\"grid grid-cols-1 sm:grid-cols-2 gap-4\">\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <\/p>\n<div class=\"sm:col-span-2\">\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <label class=\"block text-xs font-semibold text-slate-700 uppercase tracking-wider mb-1\">Primary Contact Name *<\/label><br \/>\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <input type=\"text\" id=\"primaryName\" required placeholder=\"e.g., Sarah Vance or Michael Miller\" class=\"w-full px-3.5 py-3 rounded-xl border border-slate-300 focus:outline-none focus:ring-2 focus:ring-forest-600 text-base sm:text-sm\"><br \/>\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <\/div>\n<p>\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <\/p>\n<div class=\"sm:col-span-2\">\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <label class=\"block text-xs font-semibold text-slate-700 uppercase tracking-wider mb-1\">Jamesford Meadows Street Address *<\/label><br \/>\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <\/p>\n<div class=\"relative\">\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <input type=\"text\" id=\"streetAddress\" required placeholder=\"e.g., 2704 Red Gate Ct or 6210 Akela Trl\" list=\"streetList\" class=\"w-full px-3.5 py-3 rounded-xl border border-slate-300 focus:outline-none focus:ring-2 focus:ring-forest-600 text-base sm:text-sm\"><br \/>\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <datalist id=\"streetList\"><br \/>\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0<option value=\"Jamesford Drive\"><\/option>\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0<option value=\"Akela Trail\"><\/option>\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0<option value=\"Red Gate Court\"><\/option>\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0<option value=\"Setter Court\"><\/option>\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0<option value=\"Worchester Place\"><\/option>\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0<option value=\"Weston Place\"><\/option>\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0<option value=\"Rider Court\"><\/option>\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0<option value=\"Chesterfield Court\"><\/option>\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0<option value=\"Saint Andrews Court\"><\/option>\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0<option value=\"Kittery Court\"><\/option>\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0<option value=\"Cliveden Court\"><\/option>\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0<option value=\"Hackney Way\"><\/option>\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <\/datalist><br \/>\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <\/div>\n<p>\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <\/p>\n<p class=\"text-[11px] text-slate-400 mt-1\">Select or type your street. Jamestown, NC 27282.<\/p>\n<p>\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <\/p><\/div>\n<p>\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <\/p>\n<div>\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <label class=\"block text-xs font-semibold text-slate-700 uppercase tracking-wider mb-1\">Primary Email *<\/label><br \/>\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <input type=\"email\" id=\"primaryEmail\" required placeholder=\"your.name@gmail.com\" class=\"w-full px-3.5 py-3 rounded-xl border border-slate-300 focus:outline-none focus:ring-2 focus:ring-forest-600 text-base sm:text-sm\"><br \/>\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <\/div>\n<p>\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <\/p>\n<div>\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <label class=\"block text-xs font-semibold text-slate-700 uppercase tracking-wider mb-1\">Cell Phone Number *<\/label><br \/>\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <input type=\"tel\" id=\"primaryPhone\" required placeholder=\"(336) 555-0199\" class=\"w-full px-3.5 py-3 rounded-xl border border-slate-300 focus:outline-none focus:ring-2 focus:ring-forest-600 text-base sm:text-sm\"><br \/>\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <\/div>\n<p>\u00a0 \u00a0 \u00a0 \u00a0 <\/p><\/div>\n<p>\u00a0 \u00a0 \u00a0 <\/section>\n<p>\u00a0 \u00a0 \u00a0 <br \/>\n\u00a0 \u00a0 \u00a0 <\/p>\n<section class=\"bg-white rounded-2xl p-5 sm:p-7 shadow-sm border border-slate-200\/80\">\n\u00a0 \u00a0 \u00a0 \u00a0 <\/p>\n<div class=\"flex items-center gap-3 border-b border-slate-100 pb-3.5 mb-4\">\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <\/p>\n<div class=\"w-8 h-8 rounded-lg bg-emerald-50 text-forest-600 flex items-center justify-center font-bold text-sm\">\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 2<br \/>\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <\/div>\n<p>\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <\/p>\n<div>\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <\/p>\n<h2 class=\"text-base sm:text-lg font-heading font-bold text-slate-900\">What Gatherings Would Your Household Attend?<\/h2>\n<p>\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <\/p>\n<p class=\"text-xs text-slate-500\">Pick what you\u2019d like to see hosted at our clubhouse, lawn, and courts<\/p>\n<p>\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <\/p><\/div>\n<p>\u00a0 \u00a0 \u00a0 \u00a0 <\/p><\/div>\n<p>\u00a0 \u00a0 \u00a0 \u00a0 <\/p>\n<div class=\"grid grid-cols-1 sm:grid-cols-2 gap-2.5\">\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <label class=\"flex items-start gap-3 p-3.5 rounded-xl border border-slate-200 hover:border-emerald-500 hover:bg-emerald-50\/25 cursor-pointer transition select-none\"><br \/>\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <input type=\"checkbox\" name=\"communityEvents\" value=\"The Jamesford Jam (Live Acoustic Music)\" class=\"mt-0.5 w-4 h-4 rounded text-forest-600 focus:ring-forest-500\"><br \/>\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <\/p>\n<div>\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <span class=\"text-sm font-semibold text-slate-800 block\">\ud83c\udfb8 The Jamesford Jam<\/span><br \/>\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <span class=\"text-xs text-slate-500\">Casual clubhouse acoustic nights with neighbors<\/span><br \/>\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <\/div>\n<p>\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <\/label><\/p>\n<p>\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <label class=\"flex items-start gap-3 p-3.5 rounded-xl border border-slate-200 hover:border-emerald-500 hover:bg-emerald-50\/25 cursor-pointer transition select-none\"><br \/>\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <input type=\"checkbox\" name=\"communityEvents\" value=\"Canvas & Corks (Clubhouse Painting Night)\" class=\"mt-0.5 w-4 h-4 rounded text-forest-600 focus:ring-forest-500\"><br \/>\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <\/p>\n<div>\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <span class=\"text-sm font-semibold text-slate-800 block\">\ud83c\udfa8 Canvas & Corks<\/span><br \/>\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <span class=\"text-xs text-slate-500\">Casual clubhouse painting & BYOB craft workshop<\/span><br \/>\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <\/div>\n<p>\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <\/label><\/p>\n<p>\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <label class=\"flex items-start gap-3 p-3.5 rounded-xl border border-slate-200 hover:border-emerald-500 hover:bg-emerald-50\/25 cursor-pointer transition select-none\"><br \/>\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <input type=\"checkbox\" name=\"communityEvents\" value=\"Pick-Up Tennis & Pickleball Socials\" class=\"mt-0.5 w-4 h-4 rounded text-forest-600 focus:ring-forest-500\"><br \/>\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <\/p>\n<div>\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <span class=\"text-sm font-semibold text-slate-800 block\">\ud83c\udfbe Pick-Up Tennis & Pickleball<\/span><br \/>\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <span class=\"text-xs text-slate-500\">Drop-in doubles, beginner drills & court socials<\/span><br \/>\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <\/div>\n<p>\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <\/label><\/p>\n<p>\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <label class=\"flex items-start gap-3 p-3.5 rounded-xl border border-slate-200 hover:border-emerald-500 hover:bg-emerald-50\/25 cursor-pointer transition select-none\"><br \/>\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <input type=\"checkbox\" name=\"communityEvents\" value=\"Food Truck & Clubhouse Lawn Hangouts\" class=\"mt-0.5 w-4 h-4 rounded text-forest-600 focus:ring-forest-500\"><br \/>\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <\/p>\n<div>\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <span class=\"text-sm font-semibold text-slate-800 block\">\ud83c\udf54 Food Truck & Lawn Hangouts<\/span><br \/>\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <span class=\"text-xs text-slate-500\">Dinner on the grass, easy weeknight neighborhood fun<\/span><br \/>\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <\/div>\n<p>\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <\/label><\/p>\n<p>\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <label class=\"flex items-start gap-3 p-3.5 rounded-xl border border-slate-200 hover:border-emerald-500 hover:bg-emerald-50\/25 cursor-pointer transition select-none\"><br \/>\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <input type=\"checkbox\" name=\"communityEvents\" value=\"Outdoor Lawn Movie Nights\" class=\"mt-0.5 w-4 h-4 rounded text-forest-600 focus:ring-forest-500\"><br \/>\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <\/p>\n<div>\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <span class=\"text-sm font-semibold text-slate-800 block\">\ud83c\udf7f Lawn Movie Nights<\/span><br \/>\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <span class=\"text-xs text-slate-500\">Blankets, projector screen, popcorn & family films<\/span><br \/>\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <\/div>\n<p>\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <\/label><\/p>\n<p>\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <label class=\"flex items-start gap-3 p-3.5 rounded-xl border border-slate-200 hover:border-emerald-500 hover:bg-emerald-50\/25 cursor-pointer transition select-none\"><br \/>\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <input type=\"checkbox\" name=\"communityEvents\" value=\"Holiday Luminaries\" class=\"mt-0.5 w-4 h-4 rounded text-forest-600 focus:ring-forest-500\" checked><br \/>\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <\/p>\n<div>\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <span class=\"text-sm font-semibold text-slate-800 block\">\u2728 Holiday Luminaries<\/span><br \/>\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <span class=\"text-xs text-slate-500\">Annual neighborhood luminary night across our streets<\/span><br \/>\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <\/div>\n<p>\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <\/label><\/p>\n<p>\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <label class=\"flex items-start gap-3 p-3.5 rounded-xl border border-slate-200 hover:border-emerald-500 hover:bg-emerald-50\/25 cursor-pointer transition select-none\"><br \/>\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <input type=\"checkbox\" name=\"communityEvents\" value=\"Sunset Yoga & Wellness by the Pond\" class=\"mt-0.5 w-4 h-4 rounded text-forest-600 focus:ring-forest-500\"><br \/>\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <\/p>\n<div>\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <span class=\"text-sm font-semibold text-slate-800 block\">\ud83e\uddd8 Sunset Yoga & Stretch<\/span><br \/>\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <span class=\"text-xs text-slate-500\">Casual outdoor stretch & wellness by the pond<\/span><br \/>\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <\/div>\n<p>\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <\/label><\/p>\n<p>\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <label class=\"flex items-start gap-3 p-3.5 rounded-xl border border-slate-200 hover:border-emerald-500 hover:bg-emerald-50\/25 cursor-pointer transition select-none\"><br \/>\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <input type=\"checkbox\" name=\"communityEvents\" value=\"Youth & Family Pond Fishing Derby\" class=\"mt-0.5 w-4 h-4 rounded text-forest-600 focus:ring-forest-500\"><br \/>\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <\/p>\n<div>\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <span class=\"text-sm font-semibold text-slate-800 block\">\ud83c\udfa3 Family Pond Fishing Derby<\/span><br \/>\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <span class=\"text-xs text-slate-500\">Catch-and-release fun with prizes for the kids<\/span><br \/>\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <\/div>\n<p>\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <\/label><br \/>\n\u00a0 \u00a0 \u00a0 \u00a0 <\/div>\n<p>\u00a0 \u00a0 \u00a0 <\/section>\n<p>\u00a0 \u00a0 \u00a0 <br \/>\n\u00a0 \u00a0 \u00a0 <\/p>\n<section class=\"bg-white rounded-2xl p-5 sm:p-7 shadow-sm border border-slate-200\/80\">\n\u00a0 \u00a0 \u00a0 \u00a0 <\/p>\n<div class=\"border-b border-slate-100 pb-3.5 mb-4\">\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <\/p>\n<div class=\"flex items-start gap-3\">\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <\/p>\n<div class=\"w-8 h-8 rounded-lg bg-emerald-50 text-forest-600 flex-shrink-0 flex items-center justify-center font-bold text-sm mt-0.5\">\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 3<br \/>\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <\/div>\n<p>\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <\/p>\n<div class=\"min-w-0 flex-1\">\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <\/p>\n<div class=\"flex items-center justify-between gap-2 flex-wrap\">\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <\/p>\n<h2 class=\"text-base sm:text-lg font-heading font-bold text-slate-900 leading-tight\">Who Wants to Help Out?<\/h2>\n<p>\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <span id=\"helperCountBadge\" class=\"text-xs font-semibold px-2.5 py-0.5 bg-emerald-50 text-emerald-800 rounded-full border border-emerald-200 flex-shrink-0\"><br \/>\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 1 Volunteer<br \/>\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <\/span><br \/>\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <\/div>\n<p>\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <\/p>\n<p class=\"text-xs text-slate-500 mt-1 leading-relaxed\">Not a census! Only list people in your home who want to lend a hand, co-lead, or earn student service hours.<\/p>\n<p>\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <\/p><\/div>\n<p>\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <\/p><\/div>\n<p>\u00a0 \u00a0 \u00a0 \u00a0 <\/p><\/div>\n<p>\u00a0 \u00a0 \u00a0 \u00a0 <br \/>\n\u00a0 \u00a0 \u00a0 \u00a0 <\/p>\n<div id=\"helpersContainer\" class=\"space-y-4\">\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <br \/>\n\u00a0 \u00a0 \u00a0 \u00a0 <\/div>\n<p>\u00a0 \u00a0 \u00a0 \u00a0 <br \/>\n\u00a0 \u00a0 \u00a0 \u00a0 <\/p>\n<div class=\"mt-5 pt-4 border-t border-dashed border-slate-200\">\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <\/p>\n<p class=\"text-xs font-semibold text-slate-600 uppercase tracking-wider mb-2 text-center sm:text-left\">+ Add Another Person in Household Helping Out:<\/p>\n<p>\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <\/p>\n<div class=\"grid grid-cols-2 gap-3\">\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <button type=\"button\" onclick=\"addHelperCard('Adult')\" class=\"py-3 px-3 rounded-xl border-2 border-emerald-600\/30 bg-emerald-50\/60 hover:bg-emerald-100\/80 text-emerald-900 font-heading font-bold text-xs sm:text-sm flex items-center justify-center gap-2 transition active:scale-95\"><br \/>\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <span class=\"text-base\">\ud83d\udc64<\/span><br \/>\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <span>+ Another Adult<\/span><br \/>\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <\/button><br \/>\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <button type=\"button\" onclick=\"addHelperCard('Teen')\" class=\"py-3 px-3 rounded-xl border-2 border-amber-500\/30 bg-amber-50\/70 hover:bg-amber-100\/80 text-amber-900 font-heading font-bold text-xs sm:text-sm flex items-center justify-center gap-2 transition active:scale-95\"><br \/>\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <span class=\"text-base\">\ud83c\udf93<\/span><br \/>\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <span>+ Teen (School Hours)<\/span><br \/>\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <\/button><br \/>\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <\/div>\n<p>\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <\/p>\n<p class=\"text-[11px] text-slate-400 text-center sm:text-left mt-2 leading-tight\">Younger kids are always welcome to help alongside an adult during events!<\/p>\n<p>\u00a0 \u00a0 \u00a0 \u00a0 <\/p><\/div>\n<p>\u00a0 \u00a0 \u00a0 <\/section>\n<p>\u00a0 \u00a0 \u00a0 <br \/>\n\u00a0 \u00a0 \u00a0 <\/p>\n<section class=\"bg-white rounded-2xl p-5 sm:p-7 shadow-sm border border-slate-200\/80\">\n\u00a0 \u00a0 \u00a0 \u00a0 <\/p>\n<div class=\"flex items-center gap-3 border-b border-slate-100 pb-3.5 mb-4\">\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <\/p>\n<div class=\"w-8 h-8 rounded-lg bg-emerald-50 text-forest-600 flex items-center justify-center font-bold text-sm\">\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 4<br \/>\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <\/div>\n<p>\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <\/p>\n<div>\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <\/p>\n<h2 class=\"text-base sm:text-lg font-heading font-bold text-slate-900\">Gear or Equipment You Can Lend (Optional)<\/h2>\n<p>\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <\/p>\n<p class=\"text-xs text-slate-500\">Knowing what we have across our streets makes big community gatherings easier and saves money<\/p>\n<p>\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <\/p><\/div>\n<p>\u00a0 \u00a0 \u00a0 \u00a0 <\/p><\/div>\n<p>\u00a0 \u00a0 \u00a0 \u00a0 <\/p>\n<div>\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <label class=\"block text-xs font-semibold text-slate-700 uppercase tracking-wider mb-1.5\">Equipment On Hand:<\/label><br \/>\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <input type=\"text\" id=\"specialGear\" placeholder=\"e.g., Pickup truck, utility trailer, 10x10 canopy, folding tables, cornhole boards, sound speaker, projector\" class=\"w-full px-3.5 py-3 rounded-xl border border-slate-300 focus:outline-none focus:ring-2 focus:ring-forest-600 text-base sm:text-sm\"><br \/>\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <\/p>\n<p class=\"text-[11px] text-slate-400 mt-1\">Leave blank if you don’t have equipment to lend.<\/p>\n<p>\u00a0 \u00a0 \u00a0 \u00a0 <\/p><\/div>\n<p>\u00a0 \u00a0 \u00a0 <\/section>\n<p>\u00a0 \u00a0 \u00a0 <br \/>\n\u00a0 \u00a0 \u00a0 <\/p>\n<section class=\"bg-white rounded-2xl p-5 sm:p-7 shadow-sm border border-slate-200\/80\">\n\u00a0 \u00a0 \u00a0 \u00a0 <\/p>\n<div class=\"flex items-center gap-3 border-b border-slate-100 pb-3.5 mb-4\">\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <\/p>\n<div class=\"w-8 h-8 rounded-lg bg-emerald-50 text-forest-600 flex items-center justify-center font-bold text-sm\">\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 5<br \/>\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <\/div>\n<p>\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <\/p>\n<div>\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <\/p>\n<h2 class=\"text-base sm:text-lg font-heading font-bold text-slate-900\">Ideas, Suggestions & Notes<\/h2>\n<p>\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <\/p>\n<p class=\"text-xs text-slate-500\">Have an idea for a gathering or something cool we should try in Jamesford Meadows?<\/p>\n<p>\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <\/p><\/div>\n<p>\u00a0 \u00a0 \u00a0 \u00a0 <\/p><\/div>\n<p>\u00a0 \u00a0 \u00a0 \u00a0 <\/p>\n<div>\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <label class=\"block text-xs font-semibold text-slate-700 uppercase tracking-wider mb-1.5\">Your Thoughts or Event Ideas:<\/label><br \/>\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <textarea id=\"generalNotes\" rows=\"3\" placeholder=\"Tell us what you'd love to see happen, any thoughts on timing, or special skills you'd like to share...\" class=\"w-full px-3.5 py-3 rounded-xl border border-slate-300 focus:outline-none focus:ring-2 focus:ring-forest-600 text-base sm:text-sm resize-y\"><\/textarea><br \/>\n\u00a0 \u00a0 \u00a0 \u00a0 <\/div>\n<p>\u00a0 \u00a0 \u00a0 <\/section>\n<p>\u00a0 \u00a0 \u00a0 <br \/>\n\u00a0 \u00a0 \u00a0 <\/p>\n<div class=\"bg-slate-100 rounded-2xl p-4 sm:p-5 border border-slate-200 flex flex-col sm:flex-row items-center justify-between gap-4\">\n\u00a0 \u00a0 \u00a0 \u00a0 <\/p>\n<div>\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <\/p>\n<h4 class=\"font-heading font-bold text-slate-900 text-sm text-center sm:text-left\">Ready to Submit?<\/h4>\n<p>\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <\/p>\n<p class=\"text-xs text-slate-500 text-center sm:text-left mt-0.5\">We’ll organize teams and confirm with the primary contact before any event schedules go out.<\/p>\n<p>\u00a0 \u00a0 \u00a0 \u00a0 <\/p><\/div>\n<p>\u00a0 \u00a0 \u00a0 \u00a0 <button type=\"submit\" id=\"submitBtn\" class=\"w-full sm:w-auto px-7 py-3.5 bg-forest-700 hover:bg-forest-800 active:scale-98 text-white font-heading font-bold text-sm rounded-xl shadow-lg shadow-forest-800\/20 transition flex items-center justify-center gap-2\"><br \/>\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <span id=\"submitBtnText\">Submit Survey & Roster<\/span><br \/>\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <svg id=\"submitBtnIcon\" class=\"w-4 h-4\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M14 5l7 7m0 0l-7 7m7-7H3\"><\/path><\/svg><br \/>\n\u00a0 \u00a0 \u00a0 \u00a0 <\/button><br \/>\n\u00a0 \u00a0 \u00a0 <\/div>\n<p>\u00a0 \u00a0 <\/p><\/form>\n<p>\u00a0 <\/main><\/p>\n<p>\u00a0 <br \/>\n\u00a0 <\/p>\n<div id=\"successModal\" class=\"fixed inset-0 bg-slate-900\/60 backdrop-blur-sm z-50 flex items-center justify-center p-4 hidden\">\n\u00a0 \u00a0 <\/p>\n<div class=\"bg-white rounded-3xl max-w-lg w-full p-5 sm:p-7 shadow-2xl border border-slate-100 transform transition-all\">\n\u00a0 \u00a0 \u00a0 <\/p>\n<div class=\"w-12 h-12 rounded-2xl bg-emerald-100 text-emerald-700 flex items-center justify-center mx-auto mb-4 shadow-inner\">\n\u00a0 \u00a0 \u00a0 \u00a0 <svg class=\"w-7 h-7\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2.5\" d=\"M5 13l4 4L19 7\"><\/path><\/svg><br \/>\n\u00a0 \u00a0 \u00a0 <\/div>\n<p>\u00a0 \u00a0 \u00a0 <\/p>\n<h3 class=\"text-xl sm:text-2xl font-heading font-extrabold text-slate-900 text-center\">You’re in the Roster!<\/h3>\n<p>\u00a0 \u00a0 \u00a0 <\/p>\n<p class=\"text-slate-600 text-center text-xs sm:text-sm mt-1.5 leading-relaxed\">\n\u00a0 \u00a0 \u00a0 \u00a0 Thank you for helping activate Jamesford Meadows. Your responses have been saved:<br \/>\n\u00a0 \u00a0 \u00a0 <\/p>\n<p>\u00a0 \u00a0 \u00a0 <\/p>\n<div id=\"modalSummary\" class=\"mt-4 p-3.5 bg-slate-50 rounded-2xl border border-slate-200 text-xs text-slate-700 space-y-2 max-h-56 overflow-y-auto custom-scroll font-mono\">\n\u00a0 \u00a0 \u00a0 \u00a0 <br \/>\n\u00a0 \u00a0 \u00a0 <\/div>\n<p>\u00a0 \u00a0 \u00a0 <\/p>\n<div class=\"mt-5 flex flex-col sm:flex-row gap-2.5\">\n\u00a0 \u00a0 \u00a0 \u00a0 <button type=\"button\" onclick=\"copyDataToClipboard()\" id=\"copyDataBtn\" class=\"flex-1 py-2.5 px-4 rounded-xl border border-slate-300 text-slate-700 font-semibold text-xs hover:bg-slate-50 transition flex items-center justify-center gap-1.5\"><br \/>\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <svg class=\"w-4 h-4 text-slate-500\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M8 5H6a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2v-1M8 5a2 2 0 002 2h2a2 2 0 002-2M8 5a2 2 0 012-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3\"><\/path><\/svg><br \/>\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 Copy Roster Data<br \/>\n\u00a0 \u00a0 \u00a0 \u00a0 <\/button><br \/>\n\u00a0 \u00a0 \u00a0 \u00a0 <button type=\"button\" onclick=\"closeSuccessModal()\" class=\"flex-1 py-2.5 px-4 rounded-xl bg-forest-700 hover:bg-forest-800 text-white font-semibold text-xs transition\"><br \/>\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 Done<br \/>\n\u00a0 \u00a0 \u00a0 \u00a0 <\/button><br \/>\n\u00a0 \u00a0 \u00a0 <\/div>\n<p>\u00a0 \u00a0 <\/p><\/div>\n<p>\u00a0 <\/p><\/div>\n<p>\u00a0 <br \/>\n\u00a0 <\/p>\n<div id=\"toast\" class=\"fixed bottom-6 right-6 z-50 bg-slate-900 text-white text-xs font-semibold px-4 py-3 rounded-xl shadow-xl flex items-center gap-2 transform translate-y-16 opacity-0 transition-all duration-300\">\n\u00a0 \u00a0 <span id=\"toastMessage\">Notification<\/span><br \/>\n\u00a0 <\/div>\n<p>\u00a0 <br \/>\n\u00a0 <script>\n\u00a0 \u00a0 \/\/ CHANGE THIS to your real email to receive submissions directly in your inbox:\n\u00a0 \u00a0 const TARGET_EMAIL = \"your-email@example.com\";<\/p>\n<p>\u00a0 \u00a0 \/\/ Action tasks available to volunteers (streamlined, no duplicates)\n\u00a0 \u00a0 const volunteerTasks = [\n\u00a0 \u00a0 \u00a0 { id: 'luminaries', label: 'Holiday Luminary Staging & Route Crew', desc: 'Help prep kits\/sandbags at the clubhouse or deliver along cul-de-sac routes' },\n\u00a0 \u00a0 \u00a0 { id: 'setup', label: 'Heavy Lifting & Site Setup', desc: 'Canopies, folding tables, sound cords, and event strike-down' },\n\u00a0 \u00a0 \u00a0 { id: 'hospitality', label: 'Hospitality, Greeter & Refreshments', desc: 'Welcome neighbors at door, manage check-in, water stations, or popcorn machine' },\n\u00a0 \u00a0 \u00a0 { id: 'games', label: 'Lawn Games & Youth Activities', desc: 'Organize cornhole, spikeball, chalk art, or fishing derby safety' },\n\u00a0 \u00a0 \u00a0 { id: 'media', label: 'Photos, Quick Video & Reels', desc: 'Take candid phone clips\/photos at events or make quick recap reels for service hours' },\n\u00a0 \u00a0 \u00a0 { id: 'workshop', label: 'Host a Workshop \/ Skill Share', desc: 'Lead a fun gathering (painting, acoustic guitar, yoga\/fitness, gardening, etc.)' }\n\u00a0 \u00a0 ];<\/p>\n<p>\u00a0 \u00a0 \/\/ High school service-learning programs\n\u00a0 \u00a0 const servicePrograms = [\n\u00a0 \u00a0 \u00a0 'GCS Service-Learning (x2VOL)',\n\u00a0 \u00a0 \u00a0 'National Honor Society (NHS)',\n\u00a0 \u00a0 \u00a0 'Beta Club',\n\u00a0 \u00a0 \u00a0 'Scouts (Eagle\/Gold)',\n\u00a0 \u00a0 \u00a0 'Private\/Charter School Log',\n\u00a0 \u00a0 \u00a0 'College Application'\n\u00a0 \u00a0 ];<\/p>\n<p>\u00a0 \u00a0 \/\/ Helper state (Adults and Teens only)\n\u00a0 \u00a0 let helpers = [\n\u00a0 \u00a0 \u00a0 {\n\u00a0 \u00a0 \u00a0 \u00a0 id: 1,\n\u00a0 \u00a0 \u00a0 \u00a0 isPrimary: true,\n\u00a0 \u00a0 \u00a0 \u00a0 name: '',\n\u00a0 \u00a0 \u00a0 \u00a0 role: 'Adult',\n\u00a0 \u00a0 \u00a0 \u00a0 email: '',\n\u00a0 \u00a0 \u00a0 \u00a0 phone: '',\n\u00a0 \u00a0 \u00a0 \u00a0 tasks: ['Holiday Luminary Staging & Route Crew'],\n\u00a0 \u00a0 \u00a0 \u00a0 needsHours: false,\n\u00a0 \u00a0 \u00a0 \u00a0 schoolName: '',\n\u00a0 \u00a0 \u00a0 \u00a0 gradYear: '',\n\u00a0 \u00a0 \u00a0 \u00a0 programs: [],\n\u00a0 \u00a0 \u00a0 \u00a0 teenCell: ''\n\u00a0 \u00a0 \u00a0 }\n\u00a0 \u00a0 ];<\/p>\n<p>\u00a0 \u00a0 let helperCounter = 1;<\/p>\n<p>\u00a0 \u00a0 \/\/ Attach listeners on load\n\u00a0 \u00a0 window.addEventListener('DOMContentLoaded', () => {\n\u00a0 \u00a0 \u00a0 const primaryInput = document.getElementById('primaryName');\n\u00a0 \u00a0 \u00a0 if (primaryInput) {\n\u00a0 \u00a0 \u00a0 \u00a0 primaryInput.addEventListener('input', (e) => {\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 if (helpers[0] && helpers[0].isPrimary) {\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 helpers[0].name = e.target.value;\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 const heading = document.getElementById(`helperHeading-${helpers[0].id}`);\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 if (heading) {\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 heading.textContent = e.target.value.trim() ? `${e.target.value} (Primary Contact)` : 'Primary Contact (You)';\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 }\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 }\n\u00a0 \u00a0 \u00a0 \u00a0 });\n\u00a0 \u00a0 \u00a0 }\n\u00a0 \u00a0 \u00a0 renderHelpers();\n\u00a0 \u00a0 });<\/p>\n<p>\u00a0 \u00a0 \/\/ Render helper cards\n\u00a0 \u00a0 function renderHelpers() {\n\u00a0 \u00a0 \u00a0 const container = document.getElementById('helpersContainer');\n\u00a0 \u00a0 \u00a0 const badge = document.getElementById('helperCountBadge');\n\u00a0 \u00a0 \u00a0 if (!container) return;<\/p>\n<p>\u00a0 \u00a0 \u00a0 container.innerHTML = '';\n\u00a0 \u00a0 \u00a0 badge.textContent = `${helpers.length} ${helpers.length === 1 ? 'Volunteer' : 'Volunteers'}`;<\/p>\n<p>\u00a0 \u00a0 \u00a0 helpers.forEach((helper, index) => {\n\u00a0 \u00a0 \u00a0 \u00a0 const isAdult = helper.role === 'Adult';\n\u00a0 \u00a0 \u00a0 \u00a0 const isTeen = helper.role === 'Teen';<\/p>\n<p>\u00a0 \u00a0 \u00a0 \u00a0 const card = document.createElement('div');\n\u00a0 \u00a0 \u00a0 \u00a0 card.className = 'p-4 sm:p-5 rounded-2xl bg-slate-50 border border-slate-200\/90 relative transition-all';\n\u00a0 \u00a0 \u00a0 \u00a0 card.id = `helperCard-${helper.id}`;<\/p>\n<p>\u00a0 \u00a0 \u00a0 \u00a0 \/\/ Task checkboxes\n\u00a0 \u00a0 \u00a0 \u00a0 const tasksHtml = volunteerTasks.map(t => {\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 const checked = helper.tasks.includes(t.label) ? 'checked' : '';\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 return `\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <label class=\"flex items-start gap-2.5 p-3 bg-white rounded-xl border border-slate-200 hover:border-emerald-500 hover:bg-emerald-50\/20 cursor-pointer select-none transition\">\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <input type=\"checkbox\" onchange=\"toggleHelperTask(${helper.id}, '${t.label}')\" ${checked} class=\"mt-0.5 flex-shrink-0 rounded text-forest-600 focus:ring-forest-500 w-4 h-4\">\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <\/p>\n<div class=\"text-left min-w-0\">\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <span class=\"text-xs font-bold text-slate-800 block\">${t.label}<\/span>\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <span class=\"text-[11px] text-slate-500 leading-tight block mt-0.5\">${t.desc}<\/span>\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <\/div>\n<p>\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <\/label>\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 `;\n\u00a0 \u00a0 \u00a0 \u00a0 }).join('');<\/p>\n<p>\u00a0 \u00a0 \u00a0 \u00a0 \/\/ Service programs for teens\n\u00a0 \u00a0 \u00a0 \u00a0 const programsHtml = servicePrograms.map(prog => {\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 const checked = helper.programs.includes(prog) ? 'checked' : '';\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 return `\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <label class=\"flex items-center gap-1.5 text-xs text-slate-700 cursor-pointer py-0.5\">\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <input type=\"checkbox\" onchange=\"toggleHelperProgram(${helper.id}, '${prog}')\" ${checked} class=\"rounded text-forest-600 focus:ring-forest-500 w-3.5 h-3.5 flex-shrink-0\">\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <span class=\"leading-tight\">${prog}<\/span>\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <\/label>\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 `;\n\u00a0 \u00a0 \u00a0 \u00a0 }).join('');<\/p>\n<p>\u00a0 \u00a0 \u00a0 \u00a0 card.innerHTML = `\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <\/p>\n<div class=\"flex items-start justify-between gap-2 mb-3 pb-2.5 border-b border-slate-200\/80\">\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <\/p>\n<div class=\"flex items-center gap-2 min-w-0 flex-wrap\">\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <span class=\"w-6 h-6 rounded-full bg-forest-700 text-white text-xs font-bold flex-shrink-0 flex items-center justify-center\">\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 ${index + 1}\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <\/span>\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <\/p>\n<h3 id=\"helperHeading-${helper.id}\" class=\"font-heading font-bold text-slate-800 text-sm leading-tight\">\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 ${helper.isPrimary ? (helper.name ? `${helper.name}` : 'Primary Contact (You)') : (helper.name || `Helper #${index + 1}`)}\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <\/h3>\n<p>\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <span class=\"text-[10px] font-bold uppercase tracking-wider px-2 py-0.5 rounded-md flex-shrink-0 ${\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 isAdult ? 'bg-emerald-100 text-emerald-800' : 'bg-amber-100 text-amber-800'\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 }\">${helper.role}<\/span>\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <\/div>\n<p>\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <\/p>\n<div class=\"flex-shrink-0\">\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 ${!helper.isPrimary ? `\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <button type=\"button\" onclick=\"removeHelperCard(${helper.id})\" class=\"text-xs text-rose-500 hover:text-rose-700 font-semibold flex items-center gap-1 py-0.5 px-1.5 rounded-md hover:bg-rose-50 transition\">\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <svg class=\"w-3.5 h-3.5\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16\"><\/path><\/svg>\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <span>Remove<\/span>\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <\/button>\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 ` : '<span class=\"text-[10px] font-semibold text-slate-500 bg-slate-200\/70 px-2 py-0.5 rounded-md block\">Primary<\/span>'}\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <\/div>\n<p>\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <\/p><\/div>\n<p>\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <\/p>\n<div class=\"mb-3\">\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <label class=\"block text-[11px] font-bold text-slate-600 uppercase tracking-wider mb-1.5\">Helper Type<\/label>\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <\/p>\n<div class=\"grid grid-cols-2 gap-2\">\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <button type=\"button\" onclick=\"setHelperRole(${helper.id}, 'Adult')\" class=\"py-2 px-3 rounded-xl text-xs font-heading font-bold border transition ${\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 isAdult ? 'bg-emerald-700 text-white border-emerald-700 shadow-sm' : 'bg-white text-slate-700 border-slate-300 hover:bg-slate-100'\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 }\">\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \ud83d\udc64 Adult\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <\/button>\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <button type=\"button\" onclick=\"setHelperRole(${helper.id}, 'Teen')\" class=\"py-2 px-3 rounded-xl text-xs font-heading font-bold border transition ${\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 isTeen ? 'bg-amber-600 text-white border-amber-600 shadow-sm' : 'bg-white text-slate-700 border-slate-300 hover:bg-slate-100'\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 }\">\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \ud83c\udf93 Teen (Ages 13\u201318)\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <\/button>\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <\/div>\n<p>\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <\/p><\/div>\n<p>\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 ${!helper.isPrimary ? `\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <\/p>\n<div class=\"mb-3\">\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <label class=\"block text-xs font-semibold text-slate-600 uppercase tracking-wider mb-1\">First Name \/ Nickname<\/label>\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <input type=\"text\" value=\"${helper.name || ''}\" oninput=\"updateHelperField(${helper.id}, 'name', this.value)\" placeholder=\"${\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 isAdult ? 'e.g., Dave, Maria' : 'e.g., Alex, Jordan'\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 }\" class=\"w-full px-3 py-2.5 bg-white rounded-xl border border-slate-300 focus:outline-none focus:ring-2 focus:ring-forest-600 text-base sm:text-sm\">\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <\/div>\n<p>\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 ` : ''}<\/p>\n<p>\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 ${isAdult && !helper.isPrimary ? `\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <\/p>\n<div class=\"grid grid-cols-1 sm:grid-cols-2 gap-2.5 mb-3 p-3 bg-white rounded-xl border border-slate-200\">\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <\/p>\n<div>\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <label class=\"block text-[11px] font-semibold text-slate-600 mb-0.5\">Direct Email (Optional)<\/label>\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <input type=\"email\" value=\"${helper.email || ''}\" oninput=\"updateHelperField(${helper.id}, 'email', this.value)\" placeholder=\"helper@example.com\" class=\"w-full px-2.5 py-2 bg-slate-50 rounded-lg border border-slate-300 text-sm\">\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <\/div>\n<p>\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <\/p>\n<div>\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <label class=\"block text-[11px] font-semibold text-slate-600 mb-0.5\">Direct Cell (Optional)<\/label>\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <input type=\"tel\" value=\"${helper.phone || ''}\" oninput=\"updateHelperField(${helper.id}, 'phone', this.value)\" placeholder=\"(336) 555-0199\" class=\"w-full px-2.5 py-2 bg-slate-50 rounded-lg border border-slate-300 text-sm\">\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <\/div>\n<p>\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <\/p><\/div>\n<p>\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 ` : ''}<\/p>\n<p>\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 ${isTeen ? `\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <\/p>\n<div class=\"mb-3.5 p-3.5 rounded-xl bg-amber-50\/70 border border-amber-200 space-y-3\">\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <\/p>\n<div class=\"flex items-center justify-between\">\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <\/p>\n<div class=\"flex items-center gap-1.5\">\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <span class=\"text-sm\">\ud83c\udf93<\/span>\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <span class=\"text-xs font-bold text-amber-950 uppercase tracking-wider\">High School Service Hours?<\/span>\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <\/div>\n<p>\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <label class=\"relative inline-flex items-center cursor-pointer\">\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <input type=\"checkbox\" onchange=\"updateHelperField(${helper.id}, 'needsHours', this.checked)\" ${helper.needsHours ? 'checked' : ''} class=\"sr-only peer\">\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <\/p>\n<div class=\"w-9 h-5 bg-slate-300 peer-focus:outline-none rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-slate-300 after:border after:rounded-full after:h-4 after:w-4 after:transition-all peer-checked:bg-amber-600\"><\/div>\n<p>\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <span class=\"ml-2 text-xs font-semibold text-amber-950\">${helper.needsHours ? 'Yes, needs hours' : 'No'}<\/span>\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <\/label>\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <\/div>\n<p>\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 ${helper.needsHours ? `\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <\/p>\n<div class=\"pt-2.5 border-t border-amber-200\/70 space-y-2.5\">\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <\/p>\n<div class=\"grid grid-cols-1 sm:grid-cols-2 gap-2.5\">\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <\/p>\n<div>\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <label class=\"block text-[11px] font-semibold text-slate-700 mb-0.5\">High School Attending<\/label>\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <input type=\"text\" value=\"${helper.schoolName || ''}\" oninput=\"updateHelperField(${helper.id}, 'schoolName', this.value)\" placeholder=\"e.g., SW Guilford, Ragsdale, HPCA, Phoenix\" class=\"w-full px-2.5 py-2 bg-white rounded-lg border border-amber-300 text-sm\">\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <\/div>\n<p>\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <\/p>\n<div>\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <label class=\"block text-[11px] font-semibold text-slate-700 mb-0.5\">Graduation Year \/ Grade<\/label>\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <input type=\"text\" value=\"${helper.gradYear || ''}\" oninput=\"updateHelperField(${helper.id}, 'gradYear', this.value)\" placeholder=\"e.g., 2027 \/ 10th Grade\" class=\"w-full px-2.5 py-2 bg-white rounded-lg border border-amber-300 text-sm\">\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <\/div>\n<p>\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <\/p><\/div>\n<p>\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <\/p>\n<div>\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <label class=\"block text-[11px] font-semibold text-slate-700 mb-1\">Program Requiring Sign-Off:<\/label>\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <\/p>\n<div class=\"grid grid-cols-2 gap-1.5\">\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 ${programsHtml}\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <\/div>\n<p>\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <\/p><\/div>\n<p>\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <\/p>\n<div>\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <label class=\"block text-[11px] font-semibold text-slate-700 mb-0.5\">Student Cell (Optional)<\/label>\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <\/p>\n<p class=\"text-[10px] text-slate-500 mb-1\">Parent is always CC'd on volunteer reminders.<\/p>\n<p>\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <input type=\"tel\" value=\"${helper.teenCell || ''}\" oninput=\"updateHelperField(${helper.id}, 'teenCell', this.value)\" placeholder=\"(336) 555-0199\" class=\"w-full px-2.5 py-2 bg-white rounded-lg border border-amber-300 text-sm\">\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <\/div>\n<p>\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <\/p><\/div>\n<p>\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 ` : `\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <\/p>\n<p class=\"text-[11px] text-amber-900\/80\">Toggle on if this student wants official sign-offs for Beta Club, NHS, or GCS x2VOL.<\/p>\n<p>\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 `}\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <\/p><\/div>\n<p>\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 ` : ''}<\/p>\n<p>\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <\/p>\n<div>\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <label class=\"block text-[11px] font-bold text-slate-600 uppercase tracking-wider mb-1.5\">What would ${helper.name || 'this person'} like to help out with?<\/label>\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <\/p>\n<div class=\"grid grid-cols-1 sm:grid-cols-2 gap-2\">\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 ${tasksHtml}\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <\/div>\n<p>\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <\/p><\/div>\n<p>\u00a0 \u00a0 \u00a0 \u00a0 `;<\/p>\n<p>\u00a0 \u00a0 \u00a0 \u00a0 container.appendChild(card);\n\u00a0 \u00a0 \u00a0 });\n\u00a0 \u00a0 }<\/p>\n<p>\u00a0 \u00a0 \/\/ Role switcher (Adult \/ Teen)\n\u00a0 \u00a0 function setHelperRole(id, newRole) {\n\u00a0 \u00a0 \u00a0 const helper = helpers.find(h => h.id === id);\n\u00a0 \u00a0 \u00a0 if (helper) {\n\u00a0 \u00a0 \u00a0 \u00a0 helper.role = newRole;\n\u00a0 \u00a0 \u00a0 \u00a0 if (newRole !== 'Teen') helper.needsHours = false;\n\u00a0 \u00a0 \u00a0 \u00a0 renderHelpers();\n\u00a0 \u00a0 \u00a0 }\n\u00a0 \u00a0 }<\/p>\n<p>\u00a0 \u00a0 \/\/ Add another volunteer card\n\u00a0 \u00a0 function addHelperCard(role = 'Adult') {\n\u00a0 \u00a0 \u00a0 helperCounter++;\n\u00a0 \u00a0 \u00a0 helpers.push({\n\u00a0 \u00a0 \u00a0 \u00a0 id: helperCounter,\n\u00a0 \u00a0 \u00a0 \u00a0 isPrimary: false,\n\u00a0 \u00a0 \u00a0 \u00a0 name: '',\n\u00a0 \u00a0 \u00a0 \u00a0 role: role,\n\u00a0 \u00a0 \u00a0 \u00a0 email: '',\n\u00a0 \u00a0 \u00a0 \u00a0 phone: '',\n\u00a0 \u00a0 \u00a0 \u00a0 tasks: ['Holiday Luminary Staging & Route Crew'],\n\u00a0 \u00a0 \u00a0 \u00a0 needsHours: false,\n\u00a0 \u00a0 \u00a0 \u00a0 schoolName: '',\n\u00a0 \u00a0 \u00a0 \u00a0 gradYear: '',\n\u00a0 \u00a0 \u00a0 \u00a0 programs: [],\n\u00a0 \u00a0 \u00a0 \u00a0 teenCell: ''\n\u00a0 \u00a0 \u00a0 });\n\u00a0 \u00a0 \u00a0 renderHelpers();\n\u00a0 \u00a0 \u00a0 showToast(`Added ${role} volunteer`);\n\u00a0 \u00a0 }<\/p>\n<p>\u00a0 \u00a0 \/\/ Remove a helper\n\u00a0 \u00a0 function removeHelperCard(id) {\n\u00a0 \u00a0 \u00a0 if (helpers.length <= 1) return;\n\u00a0 \u00a0 \u00a0 helpers = helpers.filter(h => h.id !== id);\n\u00a0 \u00a0 \u00a0 renderHelpers();\n\u00a0 \u00a0 \u00a0 showToast(\"Removed volunteer\");\n\u00a0 \u00a0 }<\/p>\n<p>\u00a0 \u00a0 \/\/ Update individual helper fields\n\u00a0 \u00a0 function updateHelperField(id, field, value) {\n\u00a0 \u00a0 \u00a0 const helper = helpers.find(h => h.id === id);\n\u00a0 \u00a0 \u00a0 if (helper) {\n\u00a0 \u00a0 \u00a0 \u00a0 helper[field] = value;\n\u00a0 \u00a0 \u00a0 \u00a0 if (field === 'needsHours') renderHelpers();\n\u00a0 \u00a0 \u00a0 }\n\u00a0 \u00a0 }<\/p>\n<p>\u00a0 \u00a0 \/\/ Toggle specific helper task\n\u00a0 \u00a0 function toggleHelperTask(id, taskLabel) {\n\u00a0 \u00a0 \u00a0 const helper = helpers.find(h => h.id === id);\n\u00a0 \u00a0 \u00a0 if (helper) {\n\u00a0 \u00a0 \u00a0 \u00a0 if (helper.tasks.includes(taskLabel)) {\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 helper.tasks = helper.tasks.filter(t => t !== taskLabel);\n\u00a0 \u00a0 \u00a0 \u00a0 } else {\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 helper.tasks.push(taskLabel);\n\u00a0 \u00a0 \u00a0 \u00a0 }\n\u00a0 \u00a0 \u00a0 }\n\u00a0 \u00a0 }<\/p>\n<p>\u00a0 \u00a0 \/\/ Toggle service program\n\u00a0 \u00a0 function toggleHelperProgram(id, program) {\n\u00a0 \u00a0 \u00a0 const helper = helpers.find(h => h.id === id);\n\u00a0 \u00a0 \u00a0 if (helper) {\n\u00a0 \u00a0 \u00a0 \u00a0 if (helper.programs.includes(program)) {\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 helper.programs = helper.programs.filter(p => p !== program);\n\u00a0 \u00a0 \u00a0 \u00a0 } else {\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 helper.programs.push(program);\n\u00a0 \u00a0 \u00a0 \u00a0 }\n\u00a0 \u00a0 \u00a0 }\n\u00a0 \u00a0 }<\/p>\n<p>\u00a0 \u00a0 \/\/ Form submission\n\u00a0 \u00a0 async function handleFormSubmit(e) {\n\u00a0 \u00a0 \u00a0 e.preventDefault();<\/p>\n<p>\u00a0 \u00a0 \u00a0 const submitBtn = document.getElementById('submitBtn');\n\u00a0 \u00a0 \u00a0 const submitBtnText = document.getElementById('submitBtnText');\n\u00a0 \u00a0 \u00a0 const submitBtnIcon = document.getElementById('submitBtnIcon');<\/p>\n<p>\u00a0 \u00a0 \u00a0 const primaryName = document.getElementById('primaryName').value;\n\u00a0 \u00a0 \u00a0 const streetAddress = document.getElementById('streetAddress').value;\n\u00a0 \u00a0 \u00a0 const primaryEmail = document.getElementById('primaryEmail').value;\n\u00a0 \u00a0 \u00a0 const primaryPhone = document.getElementById('primaryPhone').value;\n\u00a0 \u00a0 \u00a0 const specialGear = document.getElementById('specialGear').value;\n\u00a0 \u00a0 \u00a0 const generalNotes = document.getElementById('generalNotes').value;<\/p>\n<p>\u00a0 \u00a0 \u00a0 \/\/ Sync primary name to helper 1 if left empty\n\u00a0 \u00a0 \u00a0 if (helpers[0] && helpers[0].isPrimary && !helpers[0].name) {\n\u00a0 \u00a0 \u00a0 \u00a0 helpers[0].name = primaryName;\n\u00a0 \u00a0 \u00a0 }<\/p>\n<p>\u00a0 \u00a0 \u00a0 \/\/ Collect wishlist events\n\u00a0 \u00a0 \u00a0 const wishlistEvents = Array.from(document.querySelectorAll('input[name=\"communityEvents\"]:checked')).map(cb => cb.value);<\/p>\n<p>\u00a0 \u00a0 \u00a0 \/\/ Build structured helpers summary for human-readable email\n\u00a0 \u00a0 \u00a0 const helperListFormatted = helpers.map((h, i) => {\n\u00a0 \u00a0 \u00a0 \u00a0 const name = h.name || (h.isPrimary ? primaryName : `Helper #${i+1}`);\n\u00a0 \u00a0 \u00a0 \u00a0 const tasks = h.tasks.length ? h.tasks.join(', ') : 'No specific tasks chosen';\n\u00a0 \u00a0 \u00a0 \u00a0 const hours = h.role === 'Teen' && h.needsHours ? ` [NEEDS SCHOOL HOURS - School: ${h.schoolName || 'N\/A'}, Grade: ${h.gradYear || 'N\/A'}, Programs: ${h.programs.join(', ') || 'N\/A'}, Teen Cell: ${h.teenCell || 'N\/A'}]` : '';\n\u00a0 \u00a0 \u00a0 \u00a0 return `\u2022 ${name} (${h.role})${hours}\\n \u00a0 Tasks: ${tasks}`;\n\u00a0 \u00a0 \u00a0 }).join('\\n\\n');<\/p>\n<p>\u00a0 \u00a0 \u00a0 const payload = {\n\u00a0 \u00a0 \u00a0 \u00a0 _subject: `New Jamesford Meadows Survey: ${primaryName} (${streetAddress})`,\n\u00a0 \u00a0 \u00a0 \u00a0 PrimaryContactName: primaryName,\n\u00a0 \u00a0 \u00a0 \u00a0 StreetAddress: streetAddress,\n\u00a0 \u00a0 \u00a0 \u00a0 PrimaryEmail: primaryEmail,\n\u00a0 \u00a0 \u00a0 \u00a0 PrimaryPhone: primaryPhone,\n\u00a0 \u00a0 \u00a0 \u00a0 WishlistEvents: wishlistEvents.join(', ') || 'None selected',\n\u00a0 \u00a0 \u00a0 \u00a0 VolunteerRoster: helperListFormatted,\n\u00a0 \u00a0 \u00a0 \u00a0 GearToLend: specialGear || 'None listed',\n\u00a0 \u00a0 \u00a0 \u00a0 IdeasAndNotes: generalNotes || 'None',\n\u00a0 \u00a0 \u00a0 \u00a0 SubmittedAt: new Date().toLocaleString()\n\u00a0 \u00a0 \u00a0 };<\/p>\n<p>\u00a0 \u00a0 \u00a0 \/\/ Set loading state on button\n\u00a0 \u00a0 \u00a0 submitBtn.disabled = true;\n\u00a0 \u00a0 \u00a0 submitBtnText.textContent = \"Sending Roster...\";\n\u00a0 \u00a0 \u00a0 submitBtnIcon.classList.add('animate-spin');<\/p>\n<p>\u00a0 \u00a0 \u00a0 \/\/ Attempt sending to email via FormSubmit AJAX endpoint\n\u00a0 \u00a0 \u00a0 try {\n\u00a0 \u00a0 \u00a0 \u00a0 if (TARGET_EMAIL && TARGET_EMAIL !== \"your-email@example.com\") {\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 await fetch(`https:\/\/formsubmit.co\/ajax\/${TARGET_EMAIL}`, {\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 method: \"POST\",\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 headers: {\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \"Content-Type\": \"application\/json\",\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \"Accept\": \"application\/json\"\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 },\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 body: JSON.stringify(payload)\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 });\n\u00a0 \u00a0 \u00a0 \u00a0 }\n\u00a0 \u00a0 \u00a0 } catch (err) {\n\u00a0 \u00a0 \u00a0 \u00a0 console.warn(\"Could not reach email endpoint:\", err);\n\u00a0 \u00a0 \u00a0 } finally {\n\u00a0 \u00a0 \u00a0 \u00a0 submitBtn.disabled = false;\n\u00a0 \u00a0 \u00a0 \u00a0 submitBtnText.textContent = \"Submit Survey & Roster\";\n\u00a0 \u00a0 \u00a0 \u00a0 submitBtnIcon.classList.remove('animate-spin');\n\u00a0 \u00a0 \u00a0 }<\/p>\n<p>\u00a0 \u00a0 \u00a0 \/\/ Populate summary modal\n\u00a0 \u00a0 \u00a0 const modalSummary = document.getElementById('modalSummary');\n\u00a0 \u00a0 \u00a0 const helperSummaries = helpers.map(h => {\n\u00a0 \u00a0 \u00a0 \u00a0 const name = h.name || (h.isPrimary ? primaryName : 'Unnamed Helper');\n\u00a0 \u00a0 \u00a0 \u00a0 const tasks = h.tasks.length > 0 ? h.tasks.join(', ') : 'No specific tasks selected';\n\u00a0 \u00a0 \u00a0 \u00a0 const hoursTag = h.role === 'Teen' && h.needsHours ? ' [Needs Service Hours]' : '';\n\u00a0 \u00a0 \u00a0 \u00a0 return `<\/p>\n<div><strong>${escapeHtml(name)}<\/strong> (${h.role}${hoursTag}):<br \/><span class=\"text-slate-500\">${escapeHtml(tasks)}<\/span><\/div>\n<p>`;\n\u00a0 \u00a0 \u00a0 }).join('<\/p>\n<div class=\"border-t border-slate-200 my-1.5\"><\/div>\n<p>');<\/p>\n<p>\u00a0 \u00a0 \u00a0 modalSummary.innerHTML = `\n\u00a0 \u00a0 \u00a0 \u00a0 <\/p>\n<div class=\"font-bold text-slate-900 border-b pb-1\">HOUSEHOLD ROSTER SUBMISSION<\/div>\n<p>\u00a0 \u00a0 \u00a0 \u00a0 <\/p>\n<div><strong>Primary:<\/strong> ${escapeHtml(primaryName)} (${escapeHtml(primaryEmail)})<\/div>\n<p>\u00a0 \u00a0 \u00a0 \u00a0 <\/p>\n<div><strong>Street:<\/strong> ${escapeHtml(streetAddress)}<\/div>\n<p>\u00a0 \u00a0 \u00a0 \u00a0 <\/p>\n<div><strong>Events Interested in:<\/strong> ${wishlistEvents.length} selected<\/div>\n<p>\u00a0 \u00a0 \u00a0 \u00a0 <\/p>\n<div class=\"border-t border-slate-200 pt-1.5\"><strong>Volunteers Registered (${helpers.length}):<\/strong><\/div>\n<p>\u00a0 \u00a0 \u00a0 \u00a0 ${helperSummaries}\n\u00a0 \u00a0 \u00a0 \u00a0 ${specialGear ? `<\/p>\n<div class=\"border-t border-slate-200 pt-1.5\"><strong>Gear to Lend:<\/strong> ${escapeHtml(specialGear)}<\/div>\n<p>` : ''}\n\u00a0 \u00a0 \u00a0 \u00a0 ${generalNotes ? `<\/p>\n<div class=\"border-t border-slate-200 pt-1.5\"><strong>Ideas\/Notes:<\/strong> ${escapeHtml(generalNotes)}<\/div>\n<p>` : ''}\n\u00a0 \u00a0 \u00a0 `;<\/p>\n<p>\u00a0 \u00a0 \u00a0 window.lastSubmittedPayload = payload;\n\u00a0 \u00a0 \u00a0 document.getElementById('successModal').classList.remove('hidden');\n\u00a0 \u00a0 }<\/p>\n<p>\u00a0 \u00a0 function closeSuccessModal() {\n\u00a0 \u00a0 \u00a0 document.getElementById('successModal').classList.add('hidden');\n\u00a0 \u00a0 \u00a0 showToast(\"Thank you! Your volunteer roster was submitted.\");\n\u00a0 \u00a0 }<\/p>\n<p>\u00a0 \u00a0 function copyDataToClipboard() {\n\u00a0 \u00a0 \u00a0 if (!window.lastSubmittedPayload) return;\n\u00a0 \u00a0 \u00a0 const text = JSON.stringify(window.lastSubmittedPayload, null, 2);\n\u00a0 \u00a0 \u00a0 \n\u00a0 \u00a0 \u00a0 const tempInput = document.createElement(\"textarea\");\n\u00a0 \u00a0 \u00a0 tempInput.value = text;\n\u00a0 \u00a0 \u00a0 document.body.appendChild(tempInput);\n\u00a0 \u00a0 \u00a0 tempInput.select();\n\u00a0 \u00a0 \u00a0 document.execCommand(\"copy\");\n\u00a0 \u00a0 \u00a0 document.body.removeChild(tempInput);<\/p>\n<p>\u00a0 \u00a0 \u00a0 const btn = document.getElementById('copyDataBtn');\n\u00a0 \u00a0 \u00a0 const originalText = btn.innerHTML;\n\u00a0 \u00a0 \u00a0 btn.innerHTML = `\u2713 Copied Data!`;\n\u00a0 \u00a0 \u00a0 setTimeout(() => {\n\u00a0 \u00a0 \u00a0 \u00a0 btn.innerHTML = originalText;\n\u00a0 \u00a0 \u00a0 }, 2000);\n\u00a0 \u00a0 \u00a0 showToast(\"Roster data copied to clipboard!\");\n\u00a0 \u00a0 }<\/p>\n<p>\u00a0 \u00a0 function showToast(message) {\n\u00a0 \u00a0 \u00a0 const toast = document.getElementById('toast');\n\u00a0 \u00a0 \u00a0 const msg = document.getElementById('toastMessage');\n\u00a0 \u00a0 \u00a0 msg.textContent = message;\n\u00a0 \u00a0 \u00a0 toast.classList.remove('translate-y-16', 'opacity-0');\n\u00a0 \u00a0 \u00a0 setTimeout(() => {\n\u00a0 \u00a0 \u00a0 \u00a0 toast.classList.add('translate-y-16', 'opacity-0');\n\u00a0 \u00a0 \u00a0 }, 2800);\n\u00a0 \u00a0 }<\/p>\n<p>\u00a0 \u00a0 function shareSurvey() {\n\u00a0 \u00a0 \u00a0 const shareData = {\n\u00a0 \u00a0 \u00a0 \u00a0 title: 'Jamesford Meadows Community & Volunteer Survey',\n\u00a0 \u00a0 \u00a0 \u00a0 text: 'Help us plan gatherings and volunteer teams across Jamesford Meadows! Fill out the quick survey:',\n\u00a0 \u00a0 \u00a0 \u00a0 url: window.location.href\n\u00a0 \u00a0 \u00a0 };<\/p>\n<p>\u00a0 \u00a0 \u00a0 if (navigator.share) {\n\u00a0 \u00a0 \u00a0 \u00a0 navigator.share(shareData).catch(() => {});\n\u00a0 \u00a0 \u00a0 } else {\n\u00a0 \u00a0 \u00a0 \u00a0 const tempInput = document.createElement(\"textarea\");\n\u00a0 \u00a0 \u00a0 \u00a0 tempInput.value = `${shareData.text} ${window.location.href}`;\n\u00a0 \u00a0 \u00a0 \u00a0 document.body.appendChild(tempInput);\n\u00a0 \u00a0 \u00a0 \u00a0 tempInput.select();\n\u00a0 \u00a0 \u00a0 \u00a0 document.execCommand(\"copy\");\n\u00a0 \u00a0 \u00a0 \u00a0 document.body.removeChild(tempInput);\n\u00a0 \u00a0 \u00a0 \u00a0 showToast(\"Survey link copied to clipboard!\");\n\u00a0 \u00a0 \u00a0 }\n\u00a0 \u00a0 }<\/p>\n<p>\u00a0 \u00a0 function escapeHtml(text) {\n\u00a0 \u00a0 \u00a0 if (!text) return '';\n\u00a0 \u00a0 \u00a0 return text.replace(\/&\/g, \"&\").replace(\/<\/g, \"<\").replace(\/>\/g, \">\");\n\u00a0 \u00a0 }\n\u00a0 <\/script><br \/>\n<\/body><br \/>\n<\/html><\/p>\n<p>Help me set this form up in wordpress<\/p>\n","protected":false},"excerpt":{"rendered":"<p>\u00a0 \u00a0 \u00a0 Jamesford Meadows \u2014 Community & Volunteer Roster \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 JM \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 Jamesford Meadows \u00a0 \u00a0 \u00a0 \u00a0 […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"open","template":"page-no-title","meta":{"footnotes":""},"class_list":["post-2","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/jamesfordmeadows.com\/index.php?rest_route=\/wp\/v2\/pages\/2","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/jamesfordmeadows.com\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/jamesfordmeadows.com\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/jamesfordmeadows.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/jamesfordmeadows.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=2"}],"version-history":[{"count":2,"href":"https:\/\/jamesfordmeadows.com\/index.php?rest_route=\/wp\/v2\/pages\/2\/revisions"}],"predecessor-version":[{"id":11,"href":"https:\/\/jamesfordmeadows.com\/index.php?rest_route=\/wp\/v2\/pages\/2\/revisions\/11"}],"wp:attachment":[{"href":"https:\/\/jamesfordmeadows.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=2"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}