# Parent and Family Tools

A complete production-ready pure static website for the category **21. Parent and Family Tools**.

The site contains two real working browser tools:

1. **ScreenTimeSplit — Sibling Screen-Time Fair-Share Scheduler**
   - Multi-child age input
   - Adjustable weekday/weekend screen-time presets
   - Shared-device count
   - Fair rotation schedule generation
   - Bonus/reward minutes
   - Visual timer companion
   - Copy, CSV download, local save, reset, and print output

2. **AllowanceCalc — Age-Based Chore & Allowance Tracker**
   - Multiple children
   - Custom chores with money/point values
   - Age-range chore suggestion presets
   - Weekly checkoff chart
   - Live allowance totals
   - Savings-goal progress bars
   - Copy, CSV download, local save, reset, and print output

## Tech stack

- Plain HTML
- Plain CSS
- Vanilla JavaScript
- No framework
- No build step
- No server runtime
- No database
- No authentication
- No analytics scripts
- No paid APIs
- No external CDN libraries

Everything runs in the browser.

## Privacy notes

- Family inputs are processed locally in the user's browser.
- No data is uploaded to a server.
- Optional saving uses `localStorage` on the same device only.
- Clearing browser site data clears saved tool settings.
- There are no tracking scripts or analytics in this package.

## File structure

```text
parent-family-tools-site/
├── index.html
├── 404.html
├── robots.txt
├── sitemap.xml
├── _redirects
├── README.md
├── assets/
│   ├── favicon.svg
│   ├── icon-print.svg
│   └── logo.svg
├── css/
│   └── styles.css
├── js/
│   ├── app.js
│   └── data.js
└── tools/
    ├── screentime-split/
    │   └── index.html
    └── allowance-calc/
        └── index.html
```

## How to run locally

Because this is a static site, you can open `index.html` directly in a browser. For the most realistic routing test, run a local static server:

```bash
python -m http.server 8080
```

Then open:

```text
http://localhost:8080/
```

Tool URLs:

```text
http://localhost:8080/tools/screentime-split/
http://localhost:8080/tools/allowance-calc/
```

## Deploy to Cloudflare Pages

Recommended settings for pure static deployment:

- Build command: leave empty
- Build output directory: `/` or root folder
- Upload the complete project folder or connect the repository containing this folder

The site uses real HTML files for every route, so direct page loads should not produce Cloudflare 404 errors.

## Deploy to Netlify

Option 1: Drag and drop the complete folder into Netlify Deploys.

Option 2: Connect a Git repository and use:

- Build command: leave empty
- Publish directory: root folder

The included `_redirects` file provides extensionless compatibility shortcuts, although the real folder routes already work.

## Deploy to GitHub Pages

1. Create a repository.
2. Upload all files in this project folder.
3. In repository settings, enable GitHub Pages.
4. Select the branch and root folder.
5. Visit the generated GitHub Pages URL.

If deploying under a subfolder path, the relative asset paths should still work because pages use relative links for CSS, JS, and assets.

## SEO included

- Unique title and meta description for homepage and each tool page
- Keyword meta tags based on the provided `seo` fields
- Semantic HTML structure
- One H1 per page
- FAQ sections
- JSON-LD for `WebApplication`, `FAQPage`, `BreadcrumbList`, and homepage `WebSite`
- `robots.txt`
- `sitemap.xml`
- Open Graph and Twitter card tags

Before launch, replace `https://example.com` inside `sitemap.xml` with your real production domain.

## Accessibility included

- Labels for inputs
- Keyboard-usable buttons and forms
- Visible focus states
- Screen-reader-friendly live output regions
- Sufficient contrast-oriented theme variables
- Real buttons for actions
- No color-only meaning

## Print support

Both tools include print CSS. The tool input panels and navigation are hidden while the result/chart is printed.

## Known limitations

- Screen-time presets are general, editable household planning starters, not medical advice.
- The scheduler does not enforce device-level locks. It creates a printable/shared schedule only.
- The timer runs only while the browser page remains open.
- AllowanceCalc is not a banking app and does not process payments.
- Data saved with localStorage is device/browser-specific.
- No cross-device sync exists because the project intentionally has no backend.
- `sitemap.xml` uses `https://example.com`; replace it with your real domain after deployment.