mirror of
https://github.com/morluto/rea
synced 2026-10-27 06:33:32 -04:00
Ysopwnable
5047373006
Long guides and case studies now have a small `↑ Top` link at the bottom right. It appears after scrolling, returns smoothly to the page header, and moves keyboard focus back to navigation. Reduced-motion users return immediately; the native `#top` link also works without JavaScript. The link is shared by all 11 styled website pages. The README and style guide document it, and the evidence notes retain the original browser-example digest alongside its later navigation addition. Validation: - Website preparation and verification: 12 HTML pages, 195 local references, SVG XML, the six-file ZIP and the sole manual Pages publisher. - Oxfmt, `git diff --check` and `npm run check:fast` with Node.js 24.18.0. - Focused browser checks at `/` and `/rea/`: 22 routes, 21 pointer returns, six keyboard returns, five viewport widths, smooth scrolling, reduced motion, focus return and the no-JavaScript anchor. - Existing site interactions: 24 routes, 68 copy buttons, 20 comparison steps, two CSV exports, two ZIP downloads and eight viewport widths from 320px to 1440px. Code excerpts are unchanged. - Desktop and mobile rendering reviewed. Downloadable Electron source and CSV export source/data are unchanged. Publication continues through the existing manual Pages workflow after merge.
40 lines
1.3 KiB
HTML
40 lines
1.3 KiB
HTML
<!doctype html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="utf-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
|
<title>Notes — REA browser example</title>
|
|
<link rel="icon" href="../../assets/favicon.svg" type="image/svg+xml" />
|
|
<link rel="stylesheet" href="../../assets/styles.css" />
|
|
<script src="export.js" defer></script>
|
|
<script src="../../assets/main.js" defer></script>
|
|
</head>
|
|
<body id="top">
|
|
<main class="container example-app">
|
|
<p class="breadcrumb">
|
|
<a href="../../guides/browser/">Browser observation guide</a> / Example
|
|
</p>
|
|
<p class="eyebrow">A small app to inspect</p>
|
|
<h1>Notes</h1>
|
|
<p class="lede">
|
|
Two notes. One CSV export. Observe what happens when you click.
|
|
</p>
|
|
<ul class="example-notes">
|
|
<li>First note</li>
|
|
<li>Follow the export</li>
|
|
</ul>
|
|
<button class="button" type="button" id="export">Export notes</button>
|
|
<p class="example-status" id="status" role="status" aria-live="polite">
|
|
Ready to export.
|
|
</p>
|
|
<p class="caption">
|
|
This example loads <code>notes.json</code> and creates a CSV in your
|
|
browser.
|
|
</p>
|
|
</main>
|
|
<a class="back-to-top" href="#top" aria-label="Back to top">
|
|
<span aria-hidden="true">↑</span> Top
|
|
</a>
|
|
</body>
|
|
</html>
|