the thing

changed the UI cuz it got flagged as AI even tho i didn’t use Ai

Devlog 08 — Current state and the next backend stepToolbox now combines a pastel hand-drawn interface, ten working browser tools, skeleton loading states, breadcrumb navigation, deep links, local persistence, and an interactive 3D canvas background.The current app works as a static frontend. Tasks, notes, habits, and theme preferences stay in browser storage. No account is required for the existing version.Supabase was selected as the planned backend for the next stage. The intended implementation is email authentication, user-owned records, row-level security, cloud sync, offline fallback, and migration from local storage after sign-in.That backend work has not been faked or partially hidden in the frontend. It still needs a Supabase project URL, public anon key, database schema, and security policies before it can be connected safely.The current deployable project contains index.html, style.css, script.js, and 404.html. The frontend can be deployed now, while authentication and synchronization remain the next planned milestone.

so aghh i have rewrote the code and added some more options but i accidentally deleted my Os cuz i tried to play val by dual booting ahem…i lost all my files.

Devlog 06 — Breadcrumbs, deep links, and history

The site now has an actual navigation state instead of relying only on scrolling.

A breadcrumb row shows the current location and a live status message. It changes between Home, Tools, and About as the user moves through the page.

Hovering over a tool card reports the tool name in the status area. Opening a tool updates the URL with a query parameter such as:

Plain Text

/?tool=calculator

This means a specific tool can be shared directly. Browser back and forward navigation also restores or closes the modal correctly.

This stage made the application feel more like a small web app instead of a static collection of panels.

Devlog 05 — Adding more tools and loading feedback

I expanded Toolbox from seven tools to ten.

The new tools are a basic calculator, a random picker, and a habit tracker. The calculator handles basic arithmetic, decimals, clearing, backspace, and divide-by-zero handling.

The random picker accepts one option per line and chooses one result. The habit tracker stores a habit name and marks progress across the last seven days.

I also added a visible skeleton loader when opening a modal. The loading state is short, but it gives the interface a clear transition instead of making the tool appear abruptly.

The habit tracker still works without an account by using local browser storage.

Devlog 04 — Improving the tools and interaction

The project then moved from visual work into interaction design.

Tool cards became keyboard accessible. Users can open cards with Enter or Space, and tool icons and arrows can also be focused and activated directly.

The modal now manages focus more carefully. It moves focus into the dialog when opened, locks page scrolling, closes on Escape, and returns focus to the original card after closing.

The password generator was also improved to use cryptographically stronger random values instead of relying only on Math.random().

The theme toggle stores its state locally and exposes its state through aria-pressed.

These changes made the site feel less like a visual experiment and more like a real usable interface.

Devlog 03 — Adding the hand-drawn style

The next pass moved Toolbox toward a hand-drawn notebook style.

I added handwritten display fonts, uneven rotations, sketch borders, paper textures, dashed outlines, irregular icon shapes, and offset shadows. The goal was to make the interface feel assembled by hand rather than generated from a standard component library.

The cards received small imperfections instead of perfectly symmetrical decoration. Buttons, labels, notes, and headings started using a more informal visual language.

I also added reduced-motion support so the hand-drawn animation would not become a problem for users who prefer less movement.

This was the point where Toolbox developed a recognisable personality.

Devlog 02 — Reworking the visual direction

The first visual direction felt too much like a generic landing page, so I rebuilt the layout around a quieter utility interface.

I changed the typography, spacing, card proportions, modal layout, and responsive behavior. The hero became less promotional and more like an entry point into a small collection of tools.

The copy was shortened and made more direct. Instead of trying to sell the product, the page started explaining what it actually does.

The card layout became easier to scan. Each card received a number, a short description, a category label, and a clear open action.

This stage established the basic visual rule for the project: the interface should feel like a useful object, not a marketing page.

Devlog 01 — Starting with a small toolbox

I started building Toolbox as a simple browser page for the little tasks that usually lead to opening five more tabs.

The first version focused on three files: index.html, style.css, and script.js. The page had a hero section, a tool grid, a modal system, a theme toggle, and a few local utilities.

The first tools were a focus timer, task list, notes area, password generator, unit converter, customs estimate, and color picker.

The goal was deliberately small: open the page, choose a tool, finish the job, and leave.

The important early decision was to keep everything client-side. Tasks and notes could use browser storage, while calculators and converters could work without a server.