Sebastian Krüger
9efa783ca3
Adds a full-featured mathematical calculator and interactive function grapher at /calculate. Powered by Math.js v15 with a HiDPI Canvas renderer for the graph. - Evaluates arbitrary math expressions (trig, log, complex, matrices, factorials, combinatorics, and more) with named variable scope - Persists history (50 entries) and variables via localStorage - 32 quick-insert buttons for constants and functions - Interactive graph: pan (drag), zoom (scroll), crosshair tooltip showing cursor coords and f₁(x)…f₈(x) values simultaneously - Up to 8 color-coded functions with inline color pickers and visibility toggles - Discontinuity detection for functions like tan(x) - Adaptive grid labels that rescale with zoom - Responsive layout: 2/5–3/5 split on desktop, tabbed on mobile Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
117 lines
4.2 KiB
TypeScript
117 lines
4.2 KiB
TypeScript
import { ColorIcon, UnitsIcon, ASCIIIcon, MediaIcon, FaviconIcon, QRCodeIcon, AnimateIcon, CalculateIcon } from '@/components/AppIcons';
|
|
|
|
export interface Tool {
|
|
/** Short display name (e.g. "Color") */
|
|
shortTitle: string;
|
|
/** Full display name (e.g. "Color Manipulation") */
|
|
title: string;
|
|
/** Sidebar / nav label (may differ from title) */
|
|
navTitle: string;
|
|
/** Route path, e.g. '/color' */
|
|
href: string;
|
|
/** One-liner shown in page header */
|
|
description: string;
|
|
/** Longer description for the landing-page card */
|
|
summary: string;
|
|
/** Icon component */
|
|
icon: React.ElementType;
|
|
/** Badge labels for the landing card */
|
|
badges: string[];
|
|
}
|
|
|
|
export const tools: Tool[] = [
|
|
{
|
|
shortTitle: 'Color',
|
|
title: 'Color Manipulation',
|
|
navTitle: 'Color Manipulation',
|
|
href: '/color',
|
|
description: 'Interactive color manipulation and analysis tool.',
|
|
summary:
|
|
'Modern color manipulation toolkit with palette generation and format conversion. Supports hex, RGB, HSL, Lab, and more.',
|
|
icon: ColorIcon,
|
|
badges: ['Color', 'Palette', 'Format'],
|
|
},
|
|
{
|
|
shortTitle: 'Units',
|
|
title: 'Units Converter',
|
|
navTitle: 'Units Converter',
|
|
href: '/units',
|
|
description: 'Smart unit converter with 187 units across 23 categories.',
|
|
summary:
|
|
'Smart unit converter with 187 units across 23 categories. Real-time bidirectional conversion with fuzzy search.',
|
|
icon: UnitsIcon,
|
|
badges: ['187 Units', '23 Categories', 'Real-time'],
|
|
},
|
|
{
|
|
shortTitle: 'ASCII',
|
|
title: 'ASCII Art Generator',
|
|
navTitle: 'ASCII Art',
|
|
href: '/ascii',
|
|
description: 'ASCII Art Text Generator with 373 Fonts.',
|
|
summary:
|
|
'ASCII art text generator with 373 fonts. Create stunning text banners, terminal art, and retro designs with live preview and multiple export formats.',
|
|
icon: ASCIIIcon,
|
|
badges: ['373 Fonts', 'ASCII Art', 'Terminal'],
|
|
},
|
|
{
|
|
shortTitle: 'Media',
|
|
title: 'Media Converter',
|
|
navTitle: 'Media Converter',
|
|
href: '/media',
|
|
description: 'Browser-based media conversion for video, audio, and images.',
|
|
summary:
|
|
'Modern browser-based file converter powered by WebAssembly. Convert videos, images, and audio locally without server uploads.',
|
|
icon: MediaIcon,
|
|
badges: ['WebAssembly', 'Privacy-first', 'Converter'],
|
|
},
|
|
{
|
|
shortTitle: 'Favicon',
|
|
title: 'Favicon Generator',
|
|
navTitle: 'Favicon Generator',
|
|
href: '/favicon',
|
|
description: 'Create a complete set of icons for your website.',
|
|
summary:
|
|
'Generate a complete set of favicons for your website. Includes PWA manifest and HTML embed code.',
|
|
icon: FaviconIcon,
|
|
badges: ['PWA', 'Multi-size', 'Generator'],
|
|
},
|
|
{
|
|
shortTitle: 'QR Code',
|
|
title: 'QR Code Generator',
|
|
navTitle: 'QR Code Generator',
|
|
href: '/qrcode',
|
|
description: 'Generate QR codes with custom colors and error correction.',
|
|
summary:
|
|
'Generate QR codes with live preview, customizable colors, error correction levels, and export as PNG or SVG. All processing happens locally in your browser.',
|
|
icon: QRCodeIcon,
|
|
badges: ['PNG & SVG', 'Customizable', 'Generator'],
|
|
},
|
|
{
|
|
shortTitle: 'Animate',
|
|
title: 'CSS Animation Editor',
|
|
navTitle: 'CSS Animations',
|
|
href: '/animate',
|
|
description: 'Visual editor for CSS keyframe animations with live preview.',
|
|
summary:
|
|
'Build and export CSS @keyframe animations visually. Configure timing, easing, transforms, and more — with a live preview and 20+ built-in presets.',
|
|
icon: AnimateIcon,
|
|
badges: ['CSS', 'Tailwind v4', '20+ Presets'],
|
|
},
|
|
{
|
|
shortTitle: 'Calculate',
|
|
title: 'Calculator & Grapher',
|
|
navTitle: 'Calculator',
|
|
href: '/calculate',
|
|
description: 'Advanced expression evaluator with interactive function graphing.',
|
|
summary:
|
|
'Powerful mathematical calculator powered by Math.js. Evaluate complex expressions, define variables, and plot multiple functions simultaneously on an interactive graph with pan and zoom.',
|
|
icon: CalculateIcon,
|
|
badges: ['Math.js', 'Graphing', 'Interactive'],
|
|
},
|
|
];
|
|
|
|
/** Look up a tool by its href path */
|
|
export function getToolByHref(href: string): Tool | undefined {
|
|
return tools.find((t) => t.href === href);
|
|
}
|