# Goodwork An original fictional community-initiative template by MRHTML. Mustard and forest colors, editorial serif typography, contextual adult gardening photography, and original program illustrations make the practical work easy to explore. ## Sections and customization - Replace the imagined introduction with a specific account of your actual organization or initiative. - Adapt the three program concepts: a garden, repair table, and skill-sharing sessions. Their native disclosures explain practical setup considerations. - Replace the four example opportunity articles with confirmed roles. Keep program tags matched to the filter buttons. - Publish accurate legal structure, responsible people, decision processes, reporting, contact, and complaints information in the governance section. - Configure giving only after verifying the organization's actual status, destination, required disclosures, and any tax statements. ## Functional opportunity filter `[data-program-filter]` buttons choose `all`, `garden`, `repair`, or `learning`, matching `.opportunity[data-program]`. Two sample opportunities are in Garden, one in Repair, and one in Learning. `[data-count]` announces the visible count and handles singular/plural wording. Native program and role disclosures provide complete local details without a fake application button. All opportunities remain visible without JavaScript. Filter controls only appear after initialization. Native disclosures, governance notes, and local navigation remain functional. ## Optional one-page photo motion The opening garden photo includes a restrained CSS scroll-driven parallax effect. On supported desktop browsers at least 900 pixels wide, with a fine hover-capable pointer and no reduced-motion preference, the image moves from -14 to +14 pixels inside a fixed, clipped frame. A constant 1.1 scale keeps the frame filled. The nearby text, caption, and page layout do not move or wait for animation. The effect uses a named view timeline on `.story-photo`; the image follows that timeline through `animation-timeline` and `animation-range`. It needs no JavaScript, scroll listener, dependency, or extra iframe permission. Regular page scrolling remains native. It is static with reduced motion, coarse pointers, touch-capable devices, narrower layouts, and unsupported browsers. All content and opportunity filters remain independent of the effect. Remove the final optional-motion CSS block to keep every viewport static. Implementation was checked against current MDN documentation on 2026-10-03: [animation-timeline](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/animation-timeline), [view-timeline-name](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/view-timeline-name), [animation-range](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/animation-range), and [prefers-reduced-motion](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/At-rules/@media/prefers-reduced-motion). Browser support is limited, so the motion is a progressive enhancement rather than a content requirement. ## Giving, participation, and governance boundaries Goodwork has no legal identity, registered charity status, directors, staff, live programs, or active recruitment behind the demo. No beneficiary story, achieved impact number, donation total, testimonial, or tax-deductibility claim is invented. It collects no donations, applications, payment details, messages, or personal information. The giving section is configure-only information. Add a verified destination for your real organization only when its legal and operational details are established. Do not repurpose fictional sample copy as an assertion of achieved work or charitable status. The local photograph illustrates adults in a garden. Subjects are not identified as Goodwork volunteers or beneficiaries. No release clearance is asserted; read `ASSETS.md` before using people or property imagery for your own project. ## Open the package Open `index.html` directly in a current browser. Keep `styles.css`, `script.js`, and `assets/` alongside it. No installation, build, account, font download, or network request is required. Relative paths work from `file://` or a basic static host. Edit the original text in `index.html`, colors and responsive rules in `styles.css`, and local interactions in `script.js`. All buttons have explicit types. Interactive filters stay hidden until their script initializes; native disclosure content is available without JavaScript. There is no tracking, browser storage, data submission, or hidden service integration. ## Publish your own real site The demo includes ``. Remove the noindex directive when you publish your customized real site. First replace the title, description, fictional copy, sample details, and imagery as appropriate. Add a canonical URL only after you know the final public address. No structured-data claims or search-ranking guarantees are included. The visible `Designed by MRHTML` footer link uses `rel="nofollow"`. This is creator credit, not a mandatory backlink condition. Retain the copyright and permission notice required by the MIT license when distributing copies or substantial portions of the original code. ## Keyboard, motion, and previews Native links, buttons, selects, inputs, and disclosures provide keyboard interaction. Focus styles and a skip link are included. Motion is limited to small CSS changes and is disabled when reduced motion is requested. Test your edited content at narrow widths and with a keyboard; the template does not claim blanket accessibility certification. For an embedded preview, set the iframe `src` to the template's `index.html` and use `sandbox="allow-scripts"`. No `allow-same-origin` or `allow-forms` permission is needed. Relative CSS, images, and classic JavaScript load as a normal page. Raw `srcdoc` needs separate asset URL handling and is not the intended package entry point. ## License Original code, text, and vector artwork are MIT licensed; see `LICENSE`. Photographs, where present, use the separate terms recorded in `ASSETS.md`. System fonts are referenced rather than bundled. No real people pictured are presented as named staff, customers, endorsers, volunteers, or beneficiaries of the fictional project.