Update the README and site presentation (#3)

* docs: use a real screenshot for the README preview

The file I kept in the last cleanup was not a screenshot at all: it was a generated placeholder card reading 'Service website for local businesses' in a slate blue that is not even in this site's palette. It is now an actual capture of the live homepage.

* docs: rewrite the README in plain English

Dropped the double-spaced hyphens left over from an earlier find and replace, and cut the listy summary and the reflective what-I-learned paragraph. It now leads with what the service actually is, admits the site is the easy part and the wording was the work, and carries the two gotchas that have actually caught me out: Netlify Forms does nothing on a local serve, and reaching the thanks page does not mean an email went anywhere.

* fix: simplify backgrounds and protect the enquiry flow

---------

Co-authored-by: Jamie Parr <JamieP-205@users.noreply.github.com>

Author: JamieP-205

README.md

@@ -2,85 +2,52 @@
 
 [![CI](https://github.com/JamieP-205/local-web-fix/actions/workflows/ci.yml/badge.svg)](https://github.com/JamieP-205/local-web-fix/actions/workflows/ci.yml)
 
-## Live site
+Live at [localwebfix.co.uk](https://localwebfix.co.uk/).
 
-The service is live at [localwebfix.co.uk](https://localwebfix.co.uk/). Enquiries are delivered via Netlify Forms and followed up manually.
+A small service site. Local businesses send me a link to their website, Google listing or Facebook page, and I check whether a customer can actually find the basics: opening hours, the menu, a phone number that works on a phone, a booking link that is not dead.
 
-## Status
-
-**Live service website**  -  this project is in production and used to accept enquiries from real clients.
-
-## Summary
-
-Local Web Fix is a focused service website offering practical website and online-information improvements for UK local businesses. Many small businesses already have a site, Google profile, menu, booking link or social page but customers still struggle to find basic information. This site positions my service around those specific problems: opening hours, contact routes, mobile clarity, menus, prices, services and inconsistent public details. It avoids fake testimonials, ranking promises or agency-style marketing and instead explains my scope and process clearly.
-
-## Preview
-
-![The Local Web Fix homepage on desktop and mobile](assets/local-web-fix-preview.png)
+![The Local Web Fix homepage](assets/local-web-fix-preview.png)
 
 ## Why I built it
 
-I wanted to help local businesses fix the most important issues on their existing web presence without selling a full redesign they may not need. By offering targeted audits, clear handover templates and honest pricing, I can practise both technical and communication skills while studying.
-
-## What I built
-
-- A mobile-first service website with light and dark themes and a persistent theme preference
-- A Netlify Forms enquiry flow with required-field validation and a honeypot field to deter bots
-- Clear pricing, scope, access-safety and privacy information on dedicated pages
-- An unlisted payment page used only after a job scope is agreed
-- A fictional example audit that is clearly labelled as an example
-- Operating templates for audits, proposals, handovers and releases in `docs/`
-- A custom 404 page, sitemap, robots file, web manifest and social preview image
+Most small businesses do not need a rebuild. They need the details customers rely on to be correct and easy to find. This is my attempt to offer that smaller practical service while I build experience alongside university.
 
-## Business thinking
+## The code is deliberately simple
 
-This project forced me to think beyond code. I wrote copy that sets client expectations, created a pricing model that reflects the value of small fixes, established a safe process for accessing client sites without requesting passwords and built templates for audits and proposals. I also learned to keep the service honest: by making it clear I am a student and that I do not guarantee search-engine rankings or oversell my capacity, I build trust instead of hype.
+It is HTML, CSS and a theme toggle. The work went into the wording:
 
-## Key files
+- **Pricing is on the page.** Free check, then £50, £100 or £150 with what each includes. No "contact us for a quote".
+- **The scope page says what I will not do.** No SEO campaigns, no payment systems, no plugin surgery. If another provider manages the site, I hand over notes rather than trying to take over.
+- **No passwords, ever.** The first check uses public links only. If a fix needs access later, it goes through proper collaborator or manager permissions. I am a student, and I should not be holding the logins to somebody's livelihood.
+- **The example check is labelled fictional**, because it is. It stays that way until a real business is happy for me to publish theirs.
 
-- `index.html`  -  homepage and enquiry form
-- `privacy.html`  -  privacy information
-- `scope.html`  -  service boundaries and terms
-- `pay.html`  -  unlisted scope-confirmed payment links
-- `theme.js`  -  persisted light/dark theme preference
-- `docs/`  -  reusable operating templates and release notes
-- `tools/check-site.js`  -  site and link validation script used in CI
+## Files
 
-## Technical approach
+- `index.html` the whole pitch, and the enquiry form
+- `scope.html` what is and is not included
+- `privacy.html` what happens to what people send me
+- `pay.html` payment links, unlisted and `noindex`, only sent once a scope is agreed
+- `theme.js` light/dark toggle, saved in localStorage
+- `docs/` templates I use for the actual work: audits, proposals, handovers
+- `tools/check-site.js` the checks CI runs
 
-The project uses semantic HTML, CSS and a small vanilla JavaScript theme controller. There is no client-side framework because the site does not need one. The enquiry form is handled by Netlify Forms, which stores submissions and sends email notifications. The form never asks for passwords or account credentials. If later work needs access, the process uses limited collaborator or manager permissions where the platform supports them.
-
-## Local development
+## Running it
 
 ```bash
 npm install
 npm test
 npx serve .
 ```
 
-No build step is required. `npm test` checks JavaScript syntax, required files, metadata, local links and the Netlify form configuration.
-
-## Deployment checks
-
-After a Netlify deployment I:
-
-1. Submit a test enquiry
-2. Confirm it appears in Netlify Forms
-3. Verify the email notification
-4. Check the main information pages and a missing URL
-5. Confirm the payment page remains outside public navigation
-
-## Privacy & safety notes
-
-The service never stores or asks for passwords. All `.env` files and secrets are excluded from the repository. See [SECURITY.md](SECURITY.md) for vulnerability reporting and [CONTRIBUTING.md](CONTRIBUTING.md) for project rules.
-
-## What I learned
+No build step. `npm test` parses the JavaScript, checks that required pages exist, verifies local links with exact filename casing and validates the full Netlify form setup. The form is the main conversion point, and a missing attribute can stop submissions without breaking the rest of the page.
 
-By building Local Web Fix I learned how to scope and price a service, communicate limitations transparently, and design a simple website that gets clients to the enquiry stage without friction. I also gained practice in writing privacy policies, managing Netlify Forms, and thinking through client handover and access safety.
+## Gotchas
 
-## Future improvements
+- The form is Netlify Forms, so it only works on a Netlify deploy. It does nothing on `npx serve`.
+- Reaching the thanks page does not prove an email went out. Netlify stores the submission either way, while email notifications are configured separately in the Netlify dashboard.
+- `pay.html` is deliberately not in the navigation or the sitemap. Do not link it.
 
-- Collect anonymous feedback after each completed job to improve the service
-- Automate audit generation based on a checklist of common issues
-- Explore offering monthly monitoring as an optional add-on
+## Next
 
+- A real example report, once a client is happy for me to publish one
+- Feedback after a finished job, so I have something better than my own opinion of how it went

assets/local-web-fix-preview.png

@@ -115,7 +115,7 @@ <h3>Your online details don’t match</h3>
     </div>
   </section>
 
-  <section id="example-check" class="section section-muted compact-section">
+  <section id="example-check" class="section compact-section">
     <div class="container split-card example-check-card">
       <div>
         <p class="eyebrow">Example free check</p>
@@ -135,7 +135,7 @@ <h2>What you might get back.</h2>
     </div>
   </section>
 
-  <section id="setup" class="section section-muted compact-section">
+  <section id="setup" class="section compact-section">
     <div class="container split-card">
       <div>
         <p class="eyebrow">Works with what you already use</p>
@@ -208,7 +208,7 @@ <h3>Full Fix-Up Plus</h3>
     </div>
   </section>
 
-  <section id="process" class="section section-muted compact-section">
+  <section id="process" class="section compact-section">
     <div class="container section-head">
       <p class="eyebrow">How it works</p>
       <h2>Simple check, clear fix, safe access.</h2>
@@ -236,7 +236,7 @@ <h2>You stay in control.</h2>
     </div>
   </section>
 
-  <section id="about" class="section section-muted compact-section">
+  <section id="about" class="section compact-section">
     <div class="container about-grid">
       <div class="portrait-card"><img src="/assets/jamie-parr.webp" width="640" height="640" alt="Jamie Parr, Computing Technologies student and founder of Local Web Fix." loading="lazy"></div>
       <div>

index.html

@@ -52,7 +52,7 @@ <h2>The short version</h2>
     <div class="container strip-grid">
       <div><strong>No selling data</strong><span>Your enquiry is used to reply and manage the request.</span></div>
       <div><strong>No passwords</strong><span>Access is handled through platform permissions where possible.</span></div>
-      <div><strong>No tracking cookies</strong><span>No non-essential analytics cookies at launch.</span></div>
+      <div><strong>No tracking cookies</strong><span>No non-essential analytics cookies.</span></div>
     </div>
   </section>
 
@@ -87,7 +87,7 @@ <h2>Where it may be stored</h2>
     </div>
   </section>
 
-  <section class="page-section section-muted">
+  <section class="page-section">
     <div class="container page-split">
       <div>
         <p class="eyebrow">Access</p>
@@ -104,7 +104,7 @@ <h2>If platform access is needed</h2>
     <div class="container two-card-grid">
       <article class="info-card">
         <h2>Cookies and analytics</h2>
-        <p>This site does not use non-essential analytics cookies at launch. If analytics or tracking is added later, this page will be updated to explain what is used and why.</p>
+        <p>This site does not use non-essential analytics cookies. If analytics or tracking is added later, this page will be updated to explain what is used and why.</p>
       </article>
       <article class="info-card">
         <h2>Deleting information</h2>
@@ -129,4 +129,4 @@ <h2>Deleting information</h2>
 </footer>
 <script src="/theme.js" defer></script>
 </body>
-</html>
+</html>

privacy.html

@@ -65,7 +65,7 @@ <h2>The simple rule</h2>
     </div>
   </section>
 
-  <section class="page-section section-muted">
+  <section class="page-section">
     <div class="container page-split">
       <div>
         <p class="eyebrow">Included</p>
@@ -98,7 +98,7 @@ <h2>Access and passwords</h2>
     </div>
   </section>
 
-  <section class="page-section section-muted">
+  <section class="page-section">
     <div class="container page-split">
       <div>
         <p class="eyebrow">Not included</p>

scope.html

@@ -91,6 +91,8 @@ svg {
   max-width: 100%;
 }
 
+img { height: auto; }
+
 p {
   margin: 0;
   max-width: 66ch;
@@ -184,10 +186,6 @@ ul {
   padding: clamp(2.8rem, 7vw, 5rem) 0;
 }
 
-.section-muted {
-  background: var(--bg-alt);
-}
-
 .section-head {
   margin-bottom: 1.6rem;
 }
@@ -782,10 +780,6 @@ details p {
 
 /* 10. Contact form */
 
-.form-section {
-  background: var(--bg-alt);
-}
-
 .form-layout {
   display: grid;
   gap: 1.3rem;
@@ -972,7 +966,6 @@ details p {
 
 .compact-info-strip {
   padding: 1rem 0;
-  background: var(--bg-alt);
 }
 
 .strip-grid {

styles.css

@@ -59,8 +59,20 @@ for (const required of ["index.html", "404.html", "privacy.html", "scope.html",
 }
 
 const homepage = fs.readFileSync(path.join(root, "index.html"), "utf8");
-if (!/name=["']quick-review["']/i.test(homepage) || !/data-netlify=["']true["']/i.test(homepage)) {
-  errors.push("index.html must contain the Netlify quick-review form");
+const quickReviewForm = homepage.match(/<form\b(?=[^>]*\bname=["']quick-review["'])(?=[^>]*\bmethod=["']POST["'])(?=[^>]*\baction=["']\/thanks\.html["'])(?=[^>]*\bdata-netlify=["']true["'])(?=[^>]*\bnetlify-honeypot=["']bot-field["'])[^>]*>([\s\S]*?)<\/form>/i);
+if (!quickReviewForm) {
+  errors.push("index.html must contain the complete Netlify quick-review form setup");
+} else {
+  const formBody = quickReviewForm[1];
+  if (!/<input\b(?=[^>]*\btype=["']hidden["'])(?=[^>]*\bname=["']form-name["'])(?=[^>]*\bvalue=["']quick-review["'])[^>]*>/i.test(formBody)) {
+    errors.push("quick-review must include its hidden form-name field");
+  }
+  if (!/<input\b(?=[^>]*\bname=["']bot-field["'])[^>]*>/i.test(formBody)) {
+    errors.push("quick-review must include its honeypot input");
+  }
+  if (!/<input\b(?=[^>]*\btype=["']hidden["'])(?=[^>]*\bname=["']subject["'])(?=[^>]*\bdata-remove-prefix\b)[^>]*>/i.test(formBody)) {
+    errors.push("quick-review must keep the version-controlled notification subject");
+  }
 }
 
 if (errors.length) {