Youths For Change Initiative - Terms and Conditions

Membership Constitution

Members must actively participate in environmental conservation efforts
Respect the organization's core values of sustainability and community development
Attend mandatory quarterly meetings and training sessions
Maintain ethical conduct and represent the organization positively
Contribute to community projects and initiatives

\n \n

Membership Obligations

Pay annual membership fee of 500 Kenyan Shillings
Commit to at least 10 hours of community service annually
Promote environmental awareness in your community

\n \n

Code of Conduct

Members are expected to:

Promote environmental sustainability
Respect diversity and inclusivity
Act with integrity and transparency

\n \n

\n );\n\n // Rest of the code remains the same as in the previous implementation\n const sections = {\n home: (\n

Youths For Change Initiative

Empowering Communities Through Sustainability

\n \n \n

\n ),\n programs: (\n

Our Environmental Initiatives

🌍 Waste Recycling

Transforming waste management through community-driven recycling programs and education.

🌱 Community Cleanup

Organizing local garbage collection drives to create cleaner, healthier neighborhoods.

♻️ Sustainability Workshops

Empowering youth with knowledge about environmental conservation and sustainable practices.

🌿 Green Leadership

Developing young environmental leaders committed to creating positive ecological change.

\n ),\n 'get-involved': (\n

Become a Member

Membership Registration

\n {submissionStatus &&

{submissionStatus}

}\n

\n Username\n \n

\n Phone Number\n \n

\n Membership Fee (KSh)\n \n

\n Select Initiative\n \n \n \n \n \n \n \n

\n \n \n I have read and accept the \n setShowTerms(true)} \n className=\"terms-link\"\n > Terms and Conditions\n \n

\n \n \n I agree to follow the Organization's Constitution\n \n

\n \n

\n ),\n 'chat': (\n

Community Chat

\n {chatMessages.map((msg, index) => (\n

\n {msg.username}\n

{msg.message}

\n {new Date(msg.timestamp).toLocaleString()}\n {msg.activityType && (\n {msg.activityType}\n )}\n

\n ))}\n

\n )\n };\n\n return (\n

\n \n {showTerms && }\n

\n {sections[activeSection]}\n

\n \n

\n );\n}\n\nfunction client() {\n createRoot(document.getElementById(\"root\")).render();\n}\nif (typeof document !== \"undefined\") { client(); }\n\nexport default async function server(request: Request): Promise {\n const { sqlite } = await import(\"https://esm.town/v/stevekrouse/sqlite\");\n const KEY = new URL(import.meta.url).pathname.split(\"/\").at(-1);\n\n // Handle chat message submission\n if (request.method === 'POST' && new URL(request.url).pathname === '/submit-chat-message') {\n try {\n // Ensure chat messages table exists\n await sqlite.execute(`\n CREATE TABLE IF NOT EXISTS ${KEY}_chat_messages (\n id INTEGER PRIMARY KEY AUTOINCREMENT,\n username TEXT NOT NULL,\n message TEXT NOT NULL,\n activity_type TEXT,\n timestamp DATETIME DEFAULT CURRENT_TIMESTAMP\n )\n `);\n\n const messageData = await request.json();\n \n // Insert chat message\n await sqlite.execute(`\n INSERT INTO ${KEY}_chat_messages \n (username, message, activity_type) \n VALUES (?, ?, ?)\n `, [\n messageData.username, \n messageData.message, \n messageData.activityType || 'general'\n ]);\n\n return new Response(JSON.stringify({ success: true }), {\n status: 200,\n headers: { 'Content-Type': 'application/json' }\n });\n } catch (error) {\n return new Response(JSON.stringify({ \n success: false, \n error: error.message \n }), {\n status: 500,\n headers: { 'Content-Type': 'application/json' }\n });\n }\n }\n\n // Handle volunteer submission\n if (request.method === 'POST' && new URL(request.url).pathname === '/submit-volunteer') {\n try {\n // Ensure members table exists\n await sqlite.execute(`\n CREATE TABLE IF NOT EXISTS ${KEY}_members (\n id INTEGER PRIMARY KEY AUTOINCREMENT,\n username TEXT NOT NULL,\n phone_number TEXT NOT NULL,\n selected_initiative TEXT,\n membership_fee REAL NOT NULL,\n terms_accepted BOOLEAN NOT NULL,\n constitution_accepted BOOLEAN NOT NULL,\n registration_date DATETIME DEFAULT CURRENT_TIMESTAMP\n )\n `);\n\n const memberData = await request.json();\n \n // Insert member data\n await sqlite.execute(`\n INSERT INTO ${KEY}_members \n (username, phone_number, selected_initiative, membership_fee, terms_accepted, constitution_accepted) \n VALUES (?, ?, ?, ?, ?, ?)\n `, [\n memberData.username, \n memberData.phoneNumber, \n memberData.selectedInitiative,\n parseFloat(memberData.membershipFee),\n memberData.acceptTerms,\n memberData.acceptConstitution\n ]);\n\n return new Response(JSON.stringify({ success: true }), {\n status: 200,\n headers: { 'Content-Type': 'application/json' }\n });\n } catch (error) {\n return new Response(JSON.stringify({ \n success: false, \n error: error.message \n }), {\n status: 500,\n headers: { 'Content-Type': 'application/json' }\n });\n }\n }\n\n // Handle fetching chat messages\n if (request.method === 'GET' && new URL(request.url).pathname === '/get-chat-messages') {\n try {\n // Fetch last 50 messages, most recent first\n const result = await sqlite.execute(`\n SELECT * FROM ${KEY}_chat_messages \n ORDER BY timestamp DESC \n LIMIT 50\n `);\n\n return new Response(JSON.stringify(result.rows.reverse()), {\n status: 200,\n headers: { 'Content-Type': 'application/json' }\n });\n } catch (error) {\n return new Response(JSON.stringify({ \n success: false, \n error: error.message \n }), {\n status: 500,\n headers: { 'Content-Type': 'application/json' }\n });\n }\n }\n\n // Existing server response for initial page load\n return new Response(`\n \n \n Youths For Change Initiative\n \n \n \n \n \n

\n \n \n \n \n `, {\n headers: { \"content-type\": \"text/html\" }\n });\n}\n\nconst css = `\n/* Previous CSS remains unchanged */\nbody {\n font-family: 'Arial', sans-serif;\n margin: 0;\n line-height: 1.6;\n color: #333;\n background-color: #e8f5e9;\n}\n\n/* Rest of the CSS remains the same as in the previous implementation */\n`;","createdAt",["D",1739943260057],"version",8,"currentUserHasLiked","likeCount","forkCount","referenceCount","dependencyCount",1,"commentCount","prCount","mergedPr",{"_129":130,"_131":132},"handle","Gikiri121","profileImageUrl","https://img.clerk.com/eyJ0eXBlIjoicHJveHkiLCJzcmMiOiJodHRwczovL2ltYWdlcy5jbGVyay5kZXYvb2F1dGhfZ2l0aHViL2ltZ18ydEN6Z3phOUZpVkE1dVlHOWJpZFZqRDd2ZlgifQ","forkedVal","interval","slug","Gikiri121/Youths4chnangeintv","description","@jsxImportSource https://esm.sh/react@18.2.0","versions",[141,144,148,152,156,160,164,167,170],{"_117":118,"_142":-5,"_115":143,"_112":110},"prId",["D",1739943260057],{"_117":145,"_142":-5,"_115":146,"_112":147},7,["D",1739943200275],"0754fadc-ee83-11ef-94f9-e6cdfca9ef9f",{"_117":149,"_142":-5,"_115":150,"_112":151},6,["D",1739943124710],"da4aec5e-ee82-11ef-91b2-e6cdfca9ef9f",{"_117":153,"_142":-5,"_115":154,"_112":155},5,["D",1739942899392],"54030b90-ee82-11ef-b726-e6cdfca9ef9f",{"_117":157,"_142":-5,"_115":158,"_112":159},4,["D",1739942657850],"c4057172-ee81-11ef-8d63-e6cdfca9ef9f",{"_117":161,"_142":-5,"_115":162,"_112":163},3,["D",1739942622263],"aecefda0-ee81-11ef-977e-e6cdfca9ef9f",{"_117":90,"_142":-5,"_115":165,"_112":166},["D",1739941543773],"2bfbf47a-ee7f-11ef-b751-e6cdfca9ef9f",{"_117":124,"_142":-5,"_115":168,"_112":169},["D",1739872699865],"e1cffa4a-edde-11ef-9be5-e6cdfca9ef9f",{"_117":31,"_142":-5,"_115":171,"_112":172},["D",1739871941927],"1e0cb16c-eddd-11ef-86cf-e6cdfca9ef9f","recentThread","breadcrumbs","comments",[],"isOwner","routes/_app.v.$handle.$name.versions.$(version)",{"_93":180,"_181":182,"_94":183},"single","redirect","/v/Gikiri121/Youths4chnangeintv/versions",{"_112":166,"_113":184,"_117":90,"_115":185,"_186":99,"_100":101,"_107":108,"_129":130,"_11":96,"_187":-5,"_188":-5,"_189":-5,"_177":26,"_135":136},"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React, { useState } from \"https://esm.sh/react@18.2.0\";\nimport { createRoot } from \"https://esm.sh/react-dom@18.2.0/client\";\n\nfunction App() {\n const [activeSection, setActiveSection] = useState('home');\n const [showTerms, setShowTerms] = useState(false);\n const [volunteerForm, setVolunteerForm] = useState({\n username: '',\n phoneNumber: '',\n selectedInitiative: '',\n membershipFee: '',\n acceptTerms: false,\n acceptConstitution: false\n });\n const [submissionStatus, setSubmissionStatus] = useState('');\n\n const handleInputChange = (e) => {\n const { name, value, type, checked } = e.target;\n setVolunteerForm(prev => ({\n ...prev,\n [name]: type === 'checkbox' ? checked : value\n }));\n };\n\n const handleVolunteerSubmit = async (e) => {\n e.preventDefault();\n \n // Enhanced validation\n if (!volunteerForm.username || \n !volunteerForm.phoneNumber || \n !volunteerForm.membershipFee || \n !volunteerForm.acceptTerms || \n !volunteerForm.acceptConstitution) {\n setSubmissionStatus('Please complete all membership requirements');\n return;\n }\n\n // Validate membership fee\n const fee = parseFloat(volunteerForm.membershipFee);\n if (isNaN(fee) || fee < 500) {\n setSubmissionStatus('Membership fee must be at least 500 Kenyan Shillings');\n return;\n }\n\n try {\n const response = await fetch('/submit-volunteer', {\n method: 'POST',\n headers: {\n 'Content-Type': 'application/json',\n },\n body: JSON.stringify(volunteerForm)\n });\n\n if (response.ok) {\n setSubmissionStatus('Congratulations! You are now a member of Youths For Change Initiative');\n setVolunteerForm({\n username: '',\n phoneNumber: '',\n selectedInitiative: '',\n membershipFee: '',\n acceptTerms: false,\n acceptConstitution: false\n });\n } else {\n setSubmissionStatus('Membership registration failed. Please try again.');\n }\n } catch (error) {\n setSubmissionStatus('An error occurred. Please try again.');\n }\n };\n\n const TermsModal = () => (\n

Youths For Change Initiative - Terms and Conditions

Membership Constitution

Members must actively participate in environmental conservation efforts
Respect the organization's core values of sustainability and community development
Attend mandatory quarterly meetings and training sessions
Maintain ethical conduct and represent the organization positively
Contribute to community projects and initiatives

\n \n

Membership Obligations

Pay annual membership fee of 500 Kenyan Shillings
Commit to at least 10 hours of community service annually
Promote environmental awareness in your community

\n \n

Code of Conduct

Members are expected to:

Promote environmental sustainability
Respect diversity and inclusivity
Act with integrity and transparency

\n \n

\n );\n\n const sections = {\n home: (\n

Youths For Change Initiative

Empowering Communities Through Sustainability

\n \n \n

\n ),\n programs: (\n

Our Environmental Initiatives

🌍 Waste Recycling

Transforming waste management through community-driven recycling programs and education.

🌱 Community Cleanup

Organizing local garbage collection drives to create cleaner, healthier neighborhoods.

♻️ Sustainability Workshops

Empowering youth with knowledge about environmental conservation and sustainable practices.

🌿 Green Leadership

Developing young environmental leaders committed to creating positive ecological change.

\n ),\n 'get-involved': (\n

Become a Member

\n {showTerms && }\n

Membership Registration

\n {submissionStatus &&

{submissionStatus}

}\n

\n Username\n \n

\n Phone Number\n \n

\n Membership Fee (KSh)\n \n

\n Select Initiative\n \n \n \n \n \n \n \n

\n \n \n I have read and accept the \n setShowTerms(true)} \n className=\"terms-link\"\n > Terms and Conditions\n \n

\n \n \n I agree to follow the Organization's Constitution\n \n

\n \n

\n )\n };\n\n return (\n

\n \n

\n {sections[activeSection]}\n

\n \n

\n );\n}\n\nfunction client() {\n createRoot(document.getElementById(\"root\")).render();\n}\nif (typeof document !== \"undefined\") { client(); }\n\nexport default async function server(request: Request): Promise {\n if (request.method === 'POST' && new URL(request.url).pathname === '/submit-volunteer') {\n try {\n const { sqlite } = await import(\"https://esm.town/v/stevekrouse/sqlite\");\n const KEY = new URL(import.meta.url).pathname.split(\"/\").at(-1);\n \n // Updated table to include membership requirements\n await sqlite.execute(`\n CREATE TABLE IF NOT EXISTS ${KEY}_members (\n id INTEGER PRIMARY KEY AUTOINCREMENT,\n username TEXT NOT NULL,\n phone_number TEXT NOT NULL,\n selected_initiative TEXT,\n membership_fee REAL NOT NULL,\n terms_accepted BOOLEAN NOT NULL,\n constitution_accepted BOOLEAN NOT NULL,\n registration_date DATETIME DEFAULT CURRENT_TIMESTAMP\n )\n `);\n\n const memberData = await request.json();\n \n // Insert member data with new fields\n await sqlite.execute(`\n INSERT INTO ${KEY}_members \n (username, phone_number, selected_initiative, membership_fee, terms_accepted, constitution_accepted) \n VALUES (?, ?, ?, ?, ?, ?)\n `, [\n memberData.username, \n memberData.phoneNumber, \n memberData.selectedInitiative,\n parseFloat(memberData.membershipFee),\n memberData.acceptTerms,\n memberData.acceptConstitution\n ]);\n\n return new Response(JSON.stringify({ success: true }), {\n status: 200,\n headers: { 'Content-Type': 'application/json' }\n });\n } catch (error) {\n return new Response(JSON.stringify({ \n success: false, \n error: error.message \n }), {\n status: 500,\n headers: { 'Content-Type': 'application/json' }\n });\n }\n }\n\n return new Response(`\n \n \n Youths For Change Initiative\n \n \n \n \n \n

\n \n \n \n \n `, {\n headers: { \"content-type\": \"text/html\" }\n });\n}\n\nconst css = `\nbody {\n font-family: 'Arial', sans-serif;\n margin: 0;\n line-height: 1.6;\n color: #333;\n background-color: #e8f5e9;\n}\n\n.app {\n display: flex;\n flex-direction: column;\n min-height: 100vh;\n}\n\nnav {\n display: flex;\n justify-content: space-between;\n align-items: center;\n padding: 1rem 5%;\n background-color: #2e7d32;\n color: white;\n}\n\n.logo {\n font-size: 1.5rem;\n font-weight: bold;\n}\n\n.nav-links button {\n background: none;\n border: none;\n color: white;\n margin-left: 15px;\n cursor: pointer;\n transition: color 0.3s ease;\n}\n\n.nav-links button:hover {\n color: #81c784;\n}\n\nmain {\n flex-grow: 1;\n padding: 2rem 5%;\n}\n\n.hero {\n text-align: center;\n background-color: #4caf50;\n color: white;\n padding: 4rem 0;\n}\n\n.hero h1 {\n font-size: 2.5rem;\n margin-bottom: 1rem;\n}\n\n.cta-buttons button {\n margin: 0 10px;\n padding: 10px 20px;\n background-color: white;\n color: #2e7d32;\n border: none;\n border-radius: 5px;\n cursor: pointer;\n}\n\n.program-grid, .involvement-options {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));\n gap: 20px;\n}\n\n.program-card, .involvement-card {\n background: white;\n padding: 20px;\n border-radius: 8px;\n box-shadow: 0 4px 6px rgba(0,0,0,0.1);\n text-align: center;\n}\n\n.program-card h3 {\n font-size: 1.5em;\n}\n\n.volunteer-form {\n max-width: 500px;\n margin: 0 auto;\n background: white;\n padding: 30px;\n border-radius: 8px;\n box-shadow: 0 4px 6px rgba(0,0,0,0.1);\n}\n\n.form-group {\n margin-bottom: 15px;\n}\n\n.form-group label {\n display: block;\n margin-bottom: 5px;\n}\n\n.form-group input, \n.form-group select {\n width: 100%;\n padding: 10px;\n border: 1px solid #ddd;\n border-radius: 4px;\n}\n\n.checkbox-group {\n display: flex;\n align-items: center;\n}\n\n.checkbox-group input[type=\"checkbox\"] {\n width: auto;\n margin-right: 10px;\n}\n\n.terms-link {\n color: #2e7d32;\n cursor: pointer;\n text-decoration: underline;\n margin-left: 5px;\n}\n\n.terms-modal {\n position: fixed;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n background: rgba(0,0,0,0.5);\n display: flex;\n justify-content: center;\n align-items: center;\n z-index: 1000;\n}\n\n.terms-content {\n background: white;\n padding: 30px;\n border-radius: 8px;\n width: 80%;\n max-width: 600px;\n max-height: 70%;\n overflow-y: auto;\n}\n\n.scrollable-terms {\n max-height: 400px;\n overflow-y: auto;\n}\n\n.submit-button {\n width: 100%;\n background-color: #4caf50;\n color: white;\n border: none;\n padding: 12px 20px;\n border-radius: 5px;\n cursor: pointer;\n transition: background-color 0.3s ease;\n}\n\n.submit-button:hover {\n background-color: #45a049;\n}\n\n.status-message {\n color: #4caf50;\n text-align: center;\n margin-bottom: 15px;\n}\n\nfooter {\n background-color: #2e7d32;\n color: white;\n text-align: center;\n padding: 1rem;\n}\n\nfooter a {\n color: #81c784;\n text-decoration: none;\n margin-left: 5px;\n}\n`;",["D",1739941543773],"valName","deletedAt","messageId","threadId","routes/_app","actionData","errors"]

Youths4chnangeintv

Version 2