# Mixofall Everyday Toolkit Ten working browser tools with editable HTML, CSS and JavaScript. No build step, account, application server or paid API is required for the core toolkit. ## Start here 1. Extract the ZIP completely. 2. Open `index.html` in a recent desktop Chrome, Edge, Firefox or Safari browser. 3. Choose a tool. Keep `assets/` and `vendor/` beside `index.html`. For the most reliable storage, image clipboard access and optional AI support, serve the folder over localhost or HTTPS: ```sh cd mixofall-toolkit python3 -m http.server 8080 --bind 127.0.0.1 ``` On Windows, use `py -m http.server 8080 --bind 127.0.0.1` if `python3` is unavailable. Then visit http://localhost:8080. This is only a static file server: it does not receive or process your images. ## Included tools | Tool | Features | Internet required? | | --- | --- | --- | | Image compressor / resizer | Batch up to 40 images, JPEG/WebP/PNG output, maximum dimensions, aspect preservation, quality, best-effort target KB, individual downloads, ZIP export | No | | Online notepad | Multiple notes, title/content search, automatic device saving, word/character counts, import TXT/Markdown, export TXT, copy | No | | Daily planner | Priorities, due dates, daily/weekly recurrence, completion filters, editing, CSV export, device saving | No | | Focus timer | Focus/short/long break modes, settings, pause/reset, wall-clock timing, persisted session, daily focus totals, optional sound | No | | Screenshot editor | Image import/paste/drop, pen, arrows, rectangles, text, highlight, blur, solid redaction, crop, undo/redo, PNG export, image clipboard | No; clipboard requires a supported secure context | | World clock / meeting planner | IANA time zones, DST-aware conversion, saved cities, UTC meeting input, 24-hour working-time comparison, copy summary | No | | Text formatter | Case transforms, whitespace cleanup, line joining, duplicate removal, sorting, undo, import/export, counts, line-position comparison | No | | Background remover | Offline colour removal with sampling, tolerance and soft edges; transparent/white/custom background export; optional AI portrait matting | Only optional AI downloads | | QR studio | Text/URL, Wi-Fi and vCard codes, correction levels, crisp PNG/SVG export, QR image decoding, Unicode | No; dependencies bundled | | Work-hours calculator | Shift entry/editing, breaks, overnight shifts, week filters, rate estimate, totals, CSV export, device saving | No | Also includes favourite tools, responsive layout, light/dark themes and a versioned JSON backup/restore feature. ## Add it to mixofall.com Upload `index.html`, `assets/` and `vendor/` to a new directory such as `/everyday-tools/` using your existing hosting control panel or deployment process. No existing website files need to be replaced. Link to individual tools: ```html Image compressor Online notepad Daily planner Focus timer Screenshot editor World clock Text formatter Background remover QR studio Work hours ``` The app uses relative asset paths and hash routing, so it does not require server-side route rewrites. This package does not change your live website. Hash routes are convenient for embedding but do not create ten independent SEO landing pages. For separate searchable landing pages, add descriptive pages on your existing site and link each one to the corresponding tool. ### Optional iframe integration ```html ``` Direct links are preferable on smaller screens. If you sandbox an iframe, configure the required scripts, storage, downloads and clipboard permissions for your hosting environment. ## How the source is organised - `index.html`: application shell and script loading order. - `assets/styles.css`: responsive layout, colours and dark mode. - `assets/core.js`: navigation, data storage, backup validation, downloads, ZIP writer and common image helpers. - `assets/productivity.js`: notes, tasks, timer, text, clocks and timesheets. - `assets/media.js`: image processing, screenshot editor, background removal and QR studio. - `vendor/`: bundled QR encoder and decoder with licence notices. - `tests/browser.test.cjs`: automated real-browser workflow regression suite. - `tests/dom.test.cjs`: DOM and native-canvas functional regression suite. - `tests/ai.test.cjs`: optional model-download/inference test (network required). - `TESTING.md`: actual validation results and remaining coverage limits. - `THIRD_PARTY_NOTICES.md`: dependency versions, sources and licences. Each tool is registered with `Mix.register('id', function () { ... })`. The function may return a cleanup callback to release intervals, listeners and image URLs when navigating away. Shared helpers live on `window.Mix`. ## Data, backup and privacy There are no analytics, accounts, cookies or upload endpoints in this code. Images, QR contents and text transformations are processed locally. Do not add third-party scripts to the same origin without considering their ability to access local storage and page contents. Notes, tasks, favourites, timer history, clocks, shifts and settings use `localStorage` under `mixofall.toolkit.v1.*`. This is **not encrypted** and is not cross-device synchronisation. Clearing site data, using private browsing, moving from `file://` to a hosted origin, or changing browsers can make saved data unavailable. Export a JSON backup regularly; restore it on the destination origin. Backups contain note/task contents and should be treated as personal files. Image files and temporary text/QR contents are not part of the backup. Device storage has a finite quota. A warning appears if saving fails; export before closing the tab. Avoid editing the same saved tool in multiple tabs at once: the app warns about changes from another tab, but it is not a collaborative editor. Backup restore replaces supplied data categories and resets the running timer. It cannot merge backups. Your existing site's “nothing stored” language would need to distinguish **no server storage** from **optional device storage** for these tools. Optional AI requests expose normal network metadata to the model/CDN hosts, but this code does not send the selected image to them. ## Optional AI portrait matting The AI button lazily imports Transformers.js 3.8.1 and MODNet (Xenova/modnet, pinned revision `fa2fa54`). All inference happens in-browser using WebAssembly. It uses the model's original alpha-mask output and composites that mask against the selected image. - Model: https://huggingface.co/Xenova/modnet - Model task: human portrait matting, not universal object/product segmentation. - Runtime: https://github.com/huggingface/transformers.js - Initial download: tens of megabytes, plus runtime files. Download progress is shown. Browsers may cache these assets but offline availability is not guaranteed. - Model/runtime assets come from jsDelivr, Hugging Face and Hugging Face's download infrastructure. A hosting CSP or network filter must allow the resources needed by this optional feature, including WebAssembly. Core tools work without them. - Large or low-memory devices can fail; colour removal remains available. The image is bounded to 1600 px on its longest side for matting. - On a restricted `file://` environment, serve over localhost/HTTPS instead. For fully self-hosted AI, package the pinned runtime's full distribution and the model repository assets, update the import URL, configure Transformers.js `env.localModelPath`, set `allowRemoteModels=false`, and configure ONNX WASM asset paths. Test these paths on your host; the large model weights are deliberately not included in this ZIP. ## Behaviour and practical limits - **Compression:** the requested KB value is a target, not a guarantee. The tool reduces lossy quality, then dimensions; it reports a missed target. PNG may require resizing. Re-encoding can increase already efficient files. Animated formats flatten to a frame. Canvas export is not a professional colour-managed print workflow. - **Screenshot editing:** edits are rasterised; undo exists only until the tool is closed. Large inputs are resized to 6 megapixels; undo history has an approximate 80 MB budget. Touch/pointer input is supported. Use solid redaction for secrets, not blur; always inspect the exported image. - **Notes:** content is plain text, not a rich-text or Markdown renderer. Text files are bounded to avoid browser memory problems. - **Recurring tasks:** daily tasks reopen on the next local calendar day; weekly tasks reopen seven days after completion. Due dates remain user-set. No background notifications or calendar sync. - **Focus timer:** elapsed time is derived from a timestamp, so tab throttling does not cause cumulative drift. Sounds require a user interaction and this tool to be open; sleeping/closed browsers cannot reliably alert. There is no service-worker alarm. - **World clock:** meeting input is UTC; outputs use IANA time-zone rules supplied by the browser. Working hours are start-time checks, not a full meeting-duration scheduler. Holidays are not included. - **Text comparison:** line-position comparison, not a longest-common-subsequence diff. Title/sentence casing is mechanical; it does not infer language-specific names or abbreviations. - **Timesheets:** clock-hour arithmetic, up to 24 hours per shift; no DST elapsed-hour adjustment, overtime, taxes or payroll rules. Estimated amount uses one rate in the currency you choose. CSV text fields are guarded against common formula injection. - **QR codes:** static payloads, no redirects or analytics service. Wi-Fi/vCard parsing varies by scanner. Black/white output and a four-module quiet zone improve scanning. Images decode one visible QR code per operation. - **Compatibility:** core tools target current evergreen browsers. The included real-browser suite targets Chromium but could not run in the authoring environment; 14 DOM/native-canvas checks passed. Test in your target browsers before production use. ## Run the tests Node.js is only needed for tests, not for using the app. Node 20+ is recommended. The DOM suite also uses Python 3 to independently verify ZIP CRCs. ```sh npm install npx playwright install chromium npm test ``` To run the DOM/native-canvas suite (the suite executed during delivery): ```sh npm run test:dom ``` To run the separate optional AI integration check: ```sh npm run test:ai ``` The AI test downloads model assets and may take several minutes. The browser regression test starts its own loopback-only static server. `CHROMIUM_PATH` can point to an existing Chromium executable. `SCREENSHOT_DIR` can capture desktop and mobile layout images. ## Licence The original toolkit source is released under the MIT licence in `LICENSE`. You can modify and use it commercially. Bundled and downloaded third-party components keep their own licences and notices; see `THIRD_PARTY_NOTICES.md`. This is a standalone implementation, not a copy of another site's source or brand assets.