HGR Sustainability Projects 🌍

Discover and Engage with Transformative Environmental Initiatives

\n\n

\n setFilter({ ...filter, category: e.target.value })}\n >\n \n {[...new Set(sustainabilityProjects.map(p => p.category))].map(category => (\n \n ))}\n \n\n setFilter({ ...filter, difficulty: e.target.value })}\n >\n \n {[...new Set(sustainabilityProjects.map(p => p.difficulty))].map(difficulty => (\n \n ))}\n \n

\n\n

\n {filteredProjects.map(project => (\n

{project.icon}

{project.name}

\n Category: {project.category}\n

\n Impact: {project.impact}\n

\n Difficulty: {project.difficulty}\n

\n Region: {project.region}\n

\n \n

\n ))}\n

\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 return new Response(\n `\n \n \n HGR Sustainability Platform\n \n \n \n \n

\n \n \n \n \n `,\n {\n headers: { \"content-type\": \"text/html\" },\n },\n );\n}\n\nconst css = `\nbody {\n font-family: 'Arial', sans-serif;\n background-color: #f4f7f6;\n margin: 0;\n padding: 0;\n color: #2c3e50;\n}\n\n.sustainability-platform {\n max-width: 1200px;\n margin: 0 auto;\n padding: 20px;\n}\n\nheader {\n text-align: center;\n background-color: #2ecc71;\n color: white;\n padding: 20px;\n border-radius: 8px;\n}\n\n.filters {\n display: flex;\n justify-content: center;\n gap: 20px;\n margin: 20px 0;\n}\n\nselect {\n padding: 10px;\n border-radius: 5px;\n border: 1px solid #27ae60;\n}\n\n.project-grid {\n display: grid;\n grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));\n gap: 20px;\n}\n\n.project-card {\n background-color: white;\n border-radius: 10px;\n padding: 20px;\n box-shadow: 0 4px 6px rgba(0,0,0,0.1);\n transition: transform 0.3s;\n}\n\n.project-card:hover {\n transform: scale(1.05);\n}\n\n.project-icon {\n font-size: 3em;\n text-align: center;\n}\n\nbutton {\n width: 100%;\n padding: 10px;\n background-color: #3498db;\n color: white;\n border: none;\n border-radius: 5px;\n cursor: pointer;\n}\n\nfooter {\n text-align: center;\n margin-top: 20px;\n padding: 10px;\n background-color: #ecf0f1;\n}\n`;","deleted","label",[99],"permalink","https://www.val.town/x/Abdul01/HGRSustainabilityPlatform/code/main.tsx","extension","actionData","errors"]