# Field Notes

An original outdoor journal template by MRHTML. A wide forest photograph, muted green palette, alternating photo stories, working category filters, and three complete sample journal entries give writers a practical starting point for a nature or travel journal.

## Open it

Unzip the whole folder and open `index.html` in a modern browser. Keep `styles.css`, `script.js`, and `assets/` beside it. All photos are bundled WebP files. No install, build, API key, hosted font, or CDN is needed. The page makes no external requests while loading or filtering.

Use All notes, Forest, and Water to filter the journal. Filters preserve keyboard focus and announce the number of visible entries. Each story opens through a native `details`/`summary` control, usable with Enter or Space. Without JavaScript, the filters are hidden and all three stories remain readable. Direct links to a story reveal it when JavaScript is available. No browser storage is used.

## Customize it

1. Edit the brand, title, description, story titles, full entries, dates, and about text in `index.html`. The publication and prose are original fictional MRHTML examples. They do not describe verified expeditions or supply route or safety guidance.
2. Remove `<meta name="robots" content="noindex,follow">` from the HTML head when publishing a customized real site that you want indexed. It is present to keep the template demonstration out of search results. Add a canonical URL only when you know your actual public URL.
3. Edit the CSS color variables at the top of `styles.css`. `--forest`, `--paper`, and `--lime` establish the main palette. Keep readable text contrast over any replacement photo and retain focus and reduced-motion rules.
4. Replace the locally bundled photos in `assets/` with images you have rights to use. Keep their file names or change each matching `src`. Supply appropriate `alt` text and actual width/height values. Update `ASSETS.md` with the new source and license. The hero and first entry intentionally reuse one forest photograph.
5. Duplicate an `article.entry` to add a story. Choose a unique article ID and `details` ID. Set `data-category="forest"` or `data-category="water"`. To add a new category, add a matching `button` with `data-filter` and `aria-pressed="false"` in `.filters`; the script reads those values automatically.
6. Keep heading levels, article summaries, meaningful link labels, and the live status message. The active category uses `aria-pressed`; it is a filter group, not a tab interface.
7. Replace the fictional editorial notes with your own content. The packing section is an incomplete general starting list, not expert safety advice. Publish location-specific guidance only if you have verified it.

## Publishing and subscriptions

Upload the folder contents to a static host, preserving relative paths. Host-specific HTTPS, compression, and caching are your deployment choices. No deployment service is included.

There is no connected newsletter form, contact endpoint, analytics, database, or mailing list. The page states this plainly. Add a verified provider or endpoint, a privacy notice, and truthful success/error handling before collecting any reader details. No form will silently pretend to submit.

## Files and rights

- `index.html`: complete one-page journal and full sample stories.
- `styles.css`: responsive layout, picture treatment, filter styles, and reduced-motion rules.
- `script.js`: local filters and direct-link enhancement.
- `assets/*.webp`: optimized, locally bundled free Unsplash photography.
- `ASSETS.md`: individual image source, photographer, license, transformation, and checksums.
- `LICENSE`: MIT license for original MRHTML code, writing, and inline geometric artwork.

Third-party photographs remain under the Unsplash License; they are not relicensed under MIT. Read `ASSETS.md` before reusing them separately. No Unsplash Plus image is included. No photographer or platform endorsement is implied.

The visible footer credit says `Designed by MRHTML`, links to `https://mrhtml.com/`, and uses `rel="nofollow"`. It is an honest creator credit, not a search ranking promise or an extra license restriction. The MIT license does not require a followed backlink.