Calculator UI from an approved mock-up
Turn one approved calculator mock-up into a responsive screen.
SignalMend implements one supplied visual direction as clean HTML, CSS, and light JavaScript—with explicit responsive acceptance checks and no hidden calculator-engine scope.
$149 starting pilot · one screen · starts after funding and final assets
Good first-pilot signals
- A high-resolution mock-up is approved, but no production-ready responsive screen exists.
- The calculator engine will be connected later by another milestone or developer.
- Desktop artwork needs defined tablet and mobile behavior without redesigning the product.
- Inputs, warnings, price notes, galleries, and future integration hooks need a clean hand-off.
Included
- One responsive calculator UI screen from one approved mock-up
- Gallery, labelled input, note, warning, and placeholder regions shown in the approved design
- Semantic HTML, maintainable CSS, and only light presentational JavaScript
- Keyboard and label checks plus acceptance screenshots at three agreed widths
- Organised source files and concise integration hand-off notes
Not included
- Calculation formulas, price engine, database, API, account, or payment logic
- CMS, store, or existing-codebase integration unless separately scoped
- Open-ended visual exploration or multiple competing design directions
- Unlicensed imagery, fonts, or assets not supplied or approved by the client
- Pixel-perfect claims before the final source mock-up and widths are agreed
Acceptance
A repair is complete only when the evidence is repeatable.
- 01The supplied mock-up and asset set are frozen before implementation begins.
- 02The delivered screen matches the approved visual hierarchy at the three agreed viewport widths.
- 03All controls are labelled, keyboard operable, and the page has no horizontal overflow.
- 04No calculation logic, network request, database call, or stored user input is introduced.
- 05A clean source checkout opens with the documented hand-off steps and clearly marked future integration hooks.
Relevant evidence
Live calculator interface evidence
A self-initiated static calculator demonstrates responsive semantic HTML, plain CSS, labelled inputs, local-only JavaScript, chart presentation, metadata, and zero stored inputs. It is implementation evidence—not client work or a claim that this UI pilot includes business logic.
Fixed scope before work begins
Send the mock-up. Get a fixed UI boundary.
Include the approved image, the three target viewport widths, supplied assets, and the current project stack. The written fit decision will confirm the one-screen boundary, acceptance evidence, price, and hand-off before access or implementation.
Send the approved mock-up