# Reading Drain Cleaning — Microsite

A production-quality local service microsite for **Reading Drain Cleaning**, an enquiry referral service connecting residents in Reading and Berkshire with local drainage specialists.

---

## Project Overview

| Item | Detail |
|------|--------|
| **Niche** | Emergency drain cleaning |
| **Location** | Reading, Berkshire, UK |
| **Brand** | Reading Drain Cleaning |
| **Business model** | Lead generation / enquiry referral |
| **Tech stack** | HTML5, CSS3, Vanilla JS — no frameworks |
| **Hosting target** | Cloudflare Pages (or any static host) |

---

## File Structure

```
my-first-microsite/
├── index.html                    Home page
├── drain-unblocking.html         Drain unblocking service info
├── emergency-drain-enquiries.html Emergency enquiry form + guidance
├── service-areas.html            Coverage areas
├── about.html                    About the referral service
├── contact.html                  Main enquiry form
├── privacy-policy.html           Privacy Policy (UK GDPR template)
├── sitemap.xml                   XML sitemap for search engines
├── robots.txt                    Crawler directives
├── css/
│   └── styles.css                All site styles (mobile-first)
├── js/
│   └── main.js                   Nav, FAQ accordion, form validation
├── images/                       Add your own licensed images here
├── README.md                     This file
├── DEPLOYMENT.md                 Cloudflare Pages deployment guide
└── SEO-CHECKLIST.md              Pre-launch SEO checklist
```

---

## Before Publishing — Essential Actions

### 1. Replace the domain placeholder

Search for `readingdrainexperts.co.uk` across all files and replace with your real domain. You can do this in one go once you have purchased a domain:

```bash
# From within the project folder:
grep -rl "readingdrainexperts.co.uk" . | xargs sed -i '' 's/readingdrainexperts.co.uk/YOUR-REAL-DOMAIN.co.uk/g'
```

### 2. Configure the contact form

The enquiry forms on `contact.html` and `emergency-drain-enquiries.html` are in **demo mode**. They will not send data until you add a form endpoint.

**Recommended: Formspree (free tier available)**

1. Create a free account at [formspree.io](https://formspree.io)
2. Create a new form for this site
3. Copy your form endpoint URL (e.g. `https://formspree.io/f/abcdefgh`)
4. In `contact.html`, find this line:
   ```html
   <form class="enquiry-form form-grid form-grid--2col" novalidate
         aria-label="Drain enquiry form"
         data-endpoint="">
   ```
5. Replace `data-endpoint=""` with your URL:
   ```html
   data-endpoint="https://formspree.io/f/YOUR_FORM_ID"
   ```
6. Repeat for the form in `emergency-drain-enquiries.html`

**Alternative providers:** Netlify Forms (if hosting on Netlify), Basin, Web3Forms, or your own server-side handler.

### 3. Update the Privacy Policy

`privacy-policy.html` contains **[PLACEHOLDER]** markers. Before going live you must:

- Insert your legal name or trading name
- Insert your registered or correspondence address
- Confirm whether ICO registration is required (required if you process personal data commercially in the UK — likely yes; see [ico.org.uk](https://ico.org.uk))
- Insert the form provider's name and their privacy policy URL
- Have the policy reviewed by a solicitor if in doubt

### 4. Add images

The `images/` folder is empty. The site uses CSS placeholder blocks where images would appear. To add a real hero image:

- Use a licensed image (Unsplash, Pexels, or a purchased image)
- Do not use stock photos of people presented as your staff or customers
- Recommended hero size: 1200×800px minimum, compressed to under 150KB

### 5. Register a domain

Suggested registrars for `.co.uk` domains: Namecheap, 123-reg, GoDaddy. Ensure WHOIS privacy is enabled.

---

## Local Preview

No build step is required. Open `index.html` directly in your browser — all files are plain HTML/CSS/JS.

For the best experience (correct relative paths, no CORS issues with fonts), serve the folder locally:

```bash
# If you have Python 3:
cd /path/to/my-first-microsite
python3 -m http.server 8080
# Then visit: http://localhost:8080

# If you have Node.js:
npx serve .
# Then visit the URL shown in the terminal
```

The Google Fonts `<link>` tags require an internet connection to load Inter and DM Serif Display. Without a connection, headings fall back to Georgia (serif) and body text to system sans-serif.

---

## Design System

| Token | Value | Usage |
|-------|-------|-------|
| `--navy-dark` | `#0d1f33` | Header, hero background, CTA band |
| `--navy` | `#1a2f4e` | Step numbers, borders |
| `--orange` | `#e85d04` | Primary CTA, accents, links |
| `--grey-100` | `#f4f6f9` | Alternate section backgrounds |
| `--white` | `#ffffff` | Cards, forms |
| `--text-muted` | `#5c6a7c` | Body copy |

---

## Form Validation

Client-side validation is handled by `js/main.js`. It:

- Validates required fields on blur and on submit
- Checks email format with a regex
- Checks phone number for a minimum of 7 digits
- Prevents submission if any required field is empty or invalid
- Shows/hides field-level error messages
- Submits to the `data-endpoint` URL via `fetch` (JSON)
- Shows a success or error message after submission

**Server-side validation is essential before launch.** Client-side validation is a UX improvement only, not a security measure.

---

## Dependencies

- **Google Fonts (Inter + DM Serif Display)** — loaded via `<link>` preconnect in each page's `<head>`. No JS dependency.
- **No third-party JS libraries** — all interaction is vanilla JS.
- **No build step** — static files only.