# Manual by MRHTML

A considered documentation template in graphite, violet, and near-white. A numbered contents rail, readable long-form chapters, original SVG workflow drawings, local section search, and code examples give a small product handbook a useful structure.

## Open it locally

Extract the complete folder, then open `index.html` in a modern browser. Keep `styles.css` and `script.js` beside it. No installation, build step, development server, package manager, account, network connection, external fonts, or third-party library is required.

Manual is a fictional product identity. The sample handbook documents this static kit itself; it does not imply a hosted product, working CLI, remote API, customer adoption, or a commercial release. The changelog is explicitly an example entry.

## Contents and files

- `index.html`: six complete documentation sections: introduction, quickstart, configuration, markup reference, troubleshooting, and sample changelog. The SVG illustrations are inline and editable.
- `styles.css`: theme variables, contents rail, reading layout, code blocks, disclosures, and responsive rules.
- `script.js`: local section search, focus-aware in-page navigation, current-chapter indication, mobile contents enhancement, and code copying.
- `ASSETS.md`: original material and font provenance.
- `LICENSE`: MIT license for the original code, artwork, and documentation.

## Customize the handbook

1. Replace the fictional Manual name, introduction, and headings in `index.html`. Write setup steps that your reader can actually follow. Search for `Manual`, `fictional`, and `example` to locate sample-specific copy.
2. Keep the chapter order intentional: explain the idea, show a first useful result, describe configuration, provide a reference, then document common failures. Add or remove sections to suit your project.
3. Give every chapter a unique lowercase `id` and matching contents link. `tabindex="-1"` lets enhanced in-page navigation move focus to the chapter. Update the visible chapter numbers and footer index when changing the sequence.
4. Add `data-search` and a concise `data-title` to each searchable section. The index is rebuilt on each load. Update the static search-hint copy if the number of sections changes; result counts are generated from the actual bounded index.
5. Edit the `:root` variables at the start of `styles.css` to change the paper, ink, violet accent, dark rail, and rail width. The typeface comes from installed system fonts. Test text contrast and keyboard focus after palette changes.
6. For another code example, copy a `.code-block` structure. Give its `code` element a unique ID and set the button's `data-copy` to that ID. Keep `hidden` on the button so a nonworking action is not shown without JavaScript. Escape markup in example text, including `<` as `&lt;`.
7. Rewrite the example changelog using verified changes to your own project. It contains no real dates, historic releases, adoption figures, testimonials, integrations, or promises.
8. Before publishing a customized site, replace the page title and description and remove `<meta name="robots" content="noindex,follow" />`. Add an accurate canonical URL if your actual site needs one. The included directive intentionally keeps the uncustomized preview out of search results.
9. Upload the whole folder to your chosen static host. Check paths, status responses, metadata, mobile layout, all links, and interactions on the live origin. Hosting is a separate step and is not included.

## Search contract and limits

Search reads only the current document. It indexes the first 24 elements bearing `data-search` and the first 12,000 text characters from each, plus a title capped at 160 characters. Queries are capped at 120 characters and split on whitespace. All terms must appear literally, ignoring letter case, in a section's indexed text. No regular expressions or HTML parsing are applied to user input.

The current page contains six sections. Results count matching sections, not occurrences or pages. Search never hides the underlying articles. A blank query closes the result panel; no matches produces explicit feedback. Input composition is respected. The slash key focuses search when you are not typing elsewhere. Arrow Down moves from the input to the first result; Tab follows normal link order; Escape closes the panel. Search does not correct spelling, index external pages, fetch anything, or store queries.

Search results are constructed with text nodes and local fragment links. If you grow beyond the documented bounds, split the handbook into smaller pages or add a separately reviewed search solution. Simply editing the visible count does not increase the index limits.

## Clipboard and navigation

Each copy button first attempts `navigator.clipboard.writeText`. Only a fulfilled browser operation produces the clipboard success message. If unavailable or rejected, a local textarea selection and `document.execCommand('copy')` are tried. This second method is treated as successful only when the browser returns `true`.

When neither method confirms success, an accessible, selected, read-only textarea remains visible with instructions for manual copying. The original code remains selectable throughout. A sandbox or browser policy may deny both automated methods. Nothing is sent or saved by the page. The browser reporting success is not an independent read-back verification of the system clipboard.

Enhanced internal links scroll and focus targets within the same document. They intentionally do not write browser history or change the URL fragment, which keeps navigation functional inside an opaque-origin iframe. Direct fragment URLs and ordinary in-page links still work in the standalone document without JavaScript. There are no forms, downloads, popups, or top-level-navigation requests in the template.

## Responsive and script-free behavior

The desktop layout uses a fixed, independently scrollable contents rail. At 850 CSS pixels and below, it becomes a native contents disclosure above the page. JavaScript starts that disclosure closed on small screens and closes it after navigation; without JavaScript it starts open. All articles, code examples, and native troubleshooting disclosures remain usable without scripts. Search and copy buttons appear only after their enhancement loads.

Code examples scroll horizontally within their own containers; the surrounding article should not overflow. The workflow illustration becomes vertical on phones. The creator credit is present in static HTML in both responsive layouts. Keyboard focus, a skip link, semantic landmarks, reduced-motion handling, and system fonts are included. Recheck accessibility after customization; the template is not an accessibility certification.

For a restricted embedded preview, `sandbox="allow-scripts"` is sufficient for the enhanced page. It does not require `allow-same-origin`, `allow-forms`, popups, storage, or network access. When embedding as `srcdoc`, inline the local stylesheet and script or provide deliberate resource paths; the standalone files use relative URLs. Script-free srcdoc fragment navigation can inherit the parent's URL, so use the standalone download for a full native-link experience when scripts are disabled in a srcdoc embed.

## License and creator credit

The original template code, documentation, and SVG artwork are MIT-licensed. Keep the copyright and license notice with redistributed copies. No third-party asset licenses or external dependencies are included.

A visible `Designed by MRHTML` link points to `https://mrhtml.com/` with `rel="nofollow"`. The MIT license does not require a website credit or a followed link. The external creator link is a navigation destination, not a runtime dependency.