Chris Collis' Tools

A collection of standalone HTML tools.

Aspect Ratio Calculator

A web-based tool that calculates width and height dimensions while preserving a specified aspect ratio. It features a visual preview, common presets, and a copy-to-clipboard function.

Dynamic CalculationVisual PreviewPresets
Uses: Tailwind CSS (CDN), Font Awesome (CDN), Google Fonts

Modern BMI Calculator

A comprehensive health tool designed to calculate Body Mass Index with support for both Metric and Imperial systems, featuring real-time unit synchronization and visual health feedback.

Dual Unit SyncVisual GaugeHealth Advice
Uses: Tailwind CSS

Claude Session & Refresh Tracker

An interactive dashboard designed to track and visualize Claude's 5-hour rolling token refresh window, helping users manage their usage limits effectively.

Session AnchoringVisual Progress RingRetroactive EditingLocal PersistenceUsage Analytics
Uses: Tailwind CSS, Chart.js, Google Fonts (Inter)

Envelope PDF Generator

A standalone HTML/React tool for formatting and printing address labels on A4 envelopes. It generates a PDF with centered, left-aligned text suitable for direct printing.

Live PreviewPdf GenerationCustomization
Uses: react, react-dom, babel, tailwindcss, jspdf

Suits 'Goddamn' Soundboard

An interactive, whimsical soundboard featuring custom SVG renders of 'Suits' characters, able to say the phrase 'Goddamn'.

Custom Svg AssetsSpeech Synthesis
Uses: Tailwind CSS, Google Fonts

Jules AI Dashboard

A standalone HTML interface for the Google Jules API (v1alpha).

Session ManagementActivity TrackingRenderingAuthentication
Uses: Tailwind CSS (CDN), Google Fonts

HTML to Markdown Converter

A browser-based tool that converts rich text and HTML content into clean Markdown syntax, preserving headers, lists, links, and tables.

Rich Text InputTable ProcessingClean Conversion
Uses: Tailwind CSS, Font Awesome, Google Fonts

The MacBook Standard - Corporate Expense Edition

A whimsical web utility to compare corporate purchase budgets with standard-issue MacBook (£1,000 each). It features dual-input synchronization, URL state preservation for sharing, a visual interactive laptop fleet showing sliced fractional computers, and customizable badge designs ready to snip or export.

Currency To Mbu CalculatorUrl State SyncingFractional Visual FleetCustom Badge ThemesPng Export And Copy
Uses: Tailwind CSS (v3 CDN), html2canvas (v1.4.1 CDN), Google Fonts (Plus Jakarta Sans & Playfair Display)

MAD to GBP Converter

A single-page application that provides instant currency conversion from Moroccan Dirham (MAD) to British Pounds (GBP) with a clean, responsive interface.

Real Time ConversionResponsive Ui
Uses: Tailwind CSS, Google Fonts (Inter), FlagCDN

NHS Wales Meeting Cost Calculator (2026/27)

An interactive utility designed for NHS staff to quantify the financial value of time spent in meetings based on official 2026/27 Agenda for Change pay scales.

Dynamic EstimationTransparency Tools
Uses: Tailwind CSS, Google Fonts (Inter)

NEON SWEEP // Tactical De-mining

A high-fidelity, sci-fi themed Minesweeper game featuring a neon-noir aesthetic, responsive grid mechanics, and persistent floating tactical controls.

Terminal InterfaceIntelligence Review ModeAdaptive Sector ProtocolTactical Chording FeedbackGhost Signal ProtocolGuaranteed Safe Start
Uses: Tailwind CSS, Google Fonts (Orbitron, JetBrains Mono)

Cell Shading Tool

Converts photos into a cell-shaded style SVG with distinct color bands and black outlines.

VectorizationShadow IntensityOutline ControlColor ClusteringMain Thread
Uses: Tailwind CSS, ImageTracer.js, Highlight.js

Vector Tool (Fine Control)

Advanced vectorization tool with fine-grained resolution control and extended path simplification ranges for ultra-abstract outputs.

VectorizationExtended SimplificationFine-Grained ResolutionMain Thread
Uses: Tailwind CSS, ImageTracer.js, Highlight.js, Cropper.js

Photo to vCard Converter

A web-based tool that uses Google's Gemini API to extract contact information from photos of business cards and generate vCard (.vcf) files.

Image ProcessingAi ExtractionVcard GenerationSettings Management
Uses: Tailwind CSS (CDN), Lucide Icons, Google Fonts

Protein Tracker Pro

A lightweight, mobile-first web application for tracking protein intake with 24-hour time formatting, persistent local storage, and validated entry editing.

Entry ManagementPersistenceSummary DashboardReporting
Uses: Tailwind CSS, Google Fonts (Inter)

UK Salary Increase Calculator

A comprehensive take-home pay comparison tool designed for the UK tax system (2023-2027), allowing users to analyze the impact of raises, pension contributions, and tax year changes on their net income.

Dynamic ComparisonTax Taper LogicMulti View BreakdownSmart InputsLocal Persistence
Uses: Tailwind CSS (CDN), Google Fonts (Inter)

Sourdough Calculator

A responsive single-page application for calculating sourdough bread ingredient weights based on target hydration and flour mass. Features 'Smart Calculation' to account for starter composition.

Smart HydrationDynamic SlidersFlour Blends
Uses: Tailwind CSS, Font Awesome, Google Fonts

Sourdough Pro Tracker

A specialized timer and progress tracker for sourdough baking that monitors the dough lifecycle and persists data across sessions.

Active Stage MonitorStage TrackingStart Time TrackingContextual CountersPersistenceCompletion Logic
Uses: Tailwind CSS, Google Fonts (Inter)

Town Hall Presenter

A presentation tool for Town Hall meetings that combines a PDF slide viewer with a live, scrolling ticker-tape for staff shout-outs.

Pdf PresentationShoutout ManagementCsv Import
Uses: react, lucide-react, pdf.js (via CDN), Tailwind CSS

URL Encoder/Decoder

A real-time URL encoder and decoder with automatic detection of encoded content, designed for developers and power users.

Auto DetectionReal Time ProcessingResponsive Ui
Uses: Tailwind CSS, Google Fonts (Inter, JetBrains Mono)

Speech Synthesis Lab

A comprehensive playground for the Web Speech API's SpeechSynthesis interface, enabling users to experiment with system voices, speech rate, and pitch in real-time.

Voice SelectionSpeech ControlsWord TrackingAuto Play
Uses: Tailwind CSS (CDN), Google Fonts (Inter)