Chris Collis' Tools

A collection of HTML projects in this repository.

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

aspect-ratio-calc.html

Updated: 2026-01-09

Suits 'Goddamn' HD Soundboard

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

Custom Svg Assets
Uses: Tailwind CSS, Google Fonts

goddamn-hd.html

Updated: 2026-01-09

Suits 'Goddamn' Soundboard

An interactive, whimsical soundboard featuring custom SVG caricatures of 'Suits' characters. It utilizes the Web Speech API to synthesize character-specific variations of the phrase 'Goddamn'.

Voice SynthesisCustom Svg Assets
Uses: Tailwind CSS, Google Fonts

goddamn.html

Updated: 2025-12-29

Google Jules Dashboard

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

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

google-jules-dashboard.html

Updated: 2025-12-26

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

mad-to-gbp.html

Updated: 2025-12-28

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

photo-to-cell-shading.html

Updated: 2025-01-28

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-comic.html

Updated: 2025-12-30

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

photo-to-vcard.html

Updated: 2025-12-26

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)

protein-tracker.html

Updated: 2026-01-26

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-calculator.html

Updated: 2026-01-09

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)

sourdough-timer.html

Updated: 2024-05-24

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)

web-speech-synthesis-lab.html

Updated: 2026-01-14