From cc08ea589b0f9dffed62e426cf3866c3f97146e6 Mon Sep 17 00:00:00 2001
From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com>
Date: Tue, 30 Sep 2025 08:29:18 +0000
Subject: [PATCH 1/3] Initial plan


From c74d4667a104bf8a3006a37070a0f596827c5e84 Mon Sep 17 00:00:00 2001
From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com>
Date: Tue, 30 Sep 2025 08:50:36 +0000
Subject: [PATCH 2/3] feat: Add 10 new educational tools using Svelte 5 runes
 and shadcn components

Co-authored-by: Inglan <96573515+Inglan@users.noreply.github.com>
---
 src/lib/navigation.ts                         |  40 +++
 src/routes/+page.svelte                       |  12 +-
 src/routes/tools/ascii-art/+page.svelte       | 199 +++++++++++
 .../tools/base64-converter/+page.svelte       | 107 ++++++
 src/routes/tools/color-picker/+page.svelte    | 229 +++++++++++++
 src/routes/tools/hash-generator/+page.svelte  | 153 +++++++++
 src/routes/tools/json-formatter/+page.svelte  | 145 ++++++++
 src/routes/tools/lorem-generator/+page.svelte | 303 +++++++++++++++++
 .../tools/markdown-preview/+page.svelte       | 314 ++++++++++++++++++
 .../tools/qr-code-generator/+page.svelte      |  67 ++++
 src/routes/tools/regex-tester/+page.svelte    | 282 ++++++++++++++++
 src/routes/tools/url-tools/+page.svelte       | 248 ++++++++++++++
 12 files changed, 2098 insertions(+), 1 deletion(-)
 create mode 100644 src/routes/tools/ascii-art/+page.svelte
 create mode 100644 src/routes/tools/base64-converter/+page.svelte
 create mode 100644 src/routes/tools/color-picker/+page.svelte
 create mode 100644 src/routes/tools/hash-generator/+page.svelte
 create mode 100644 src/routes/tools/json-formatter/+page.svelte
 create mode 100644 src/routes/tools/lorem-generator/+page.svelte
 create mode 100644 src/routes/tools/markdown-preview/+page.svelte
 create mode 100644 src/routes/tools/qr-code-generator/+page.svelte
 create mode 100644 src/routes/tools/regex-tester/+page.svelte
 create mode 100644 src/routes/tools/url-tools/+page.svelte

diff --git a/src/lib/navigation.ts b/src/lib/navigation.ts
index 6e2eb5ad..c6710e22 100644
--- a/src/lib/navigation.ts
+++ b/src/lib/navigation.ts
@@ -67,6 +67,46 @@ export function createMainNavigation(
 				{
 					title: 'Stopwatch & Timer',
 					url: '/tools/stopwatch-timer'
+				},
+				{
+					title: 'QR Code Generator',
+					url: '/tools/qr-code-generator'
+				},
+				{
+					title: 'Base64 Converter',
+					url: '/tools/base64-converter'
+				},
+				{
+					title: 'JSON Formatter',
+					url: '/tools/json-formatter'
+				},
+				{
+					title: 'Color Picker',
+					url: '/tools/color-picker'
+				},
+				{
+					title: 'URL Tools',
+					url: '/tools/url-tools'
+				},
+				{
+					title: 'Hash Generator',
+					url: '/tools/hash-generator'
+				},
+				{
+					title: 'Lorem Generator',
+					url: '/tools/lorem-generator'
+				},
+				{
+					title: 'ASCII Art',
+					url: '/tools/ascii-art'
+				},
+				{
+					title: 'Markdown Preview',
+					url: '/tools/markdown-preview'
+				},
+				{
+					title: 'Regex Tester',
+					url: '/tools/regex-tester'
 				}
 			]
 		},
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index f7da8651..28798599 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -15,7 +15,17 @@
 		{ name: 'Word Counter', url: '/tools/word-counter' },
 		{ name: 'Password Generator', url: '/tools/password-generator' },
 		{ name: 'Random Number Generator', url: '/tools/random-number-generator' },
-		{ name: 'Stopwatch & Timer', url: '/tools/stopwatch-timer' }
+		{ name: 'Stopwatch & Timer', url: '/tools/stopwatch-timer' },
+		{ name: 'QR Code Generator', url: '/tools/qr-code-generator' },
+		{ name: 'Base64 Converter', url: '/tools/base64-converter' },
+		{ name: 'JSON Formatter', url: '/tools/json-formatter' },
+		{ name: 'Color Picker', url: '/tools/color-picker' },
+		{ name: 'URL Tools', url: '/tools/url-tools' },
+		{ name: 'Hash Generator', url: '/tools/hash-generator' },
+		{ name: 'Lorem Generator', url: '/tools/lorem-generator' },
+		{ name: 'ASCII Art', url: '/tools/ascii-art' },
+		{ name: 'Markdown Preview', url: '/tools/markdown-preview' },
+		{ name: 'Regex Tester', url: '/tools/regex-tester' }
 	];
 </script>
 
diff --git a/src/routes/tools/ascii-art/+page.svelte b/src/routes/tools/ascii-art/+page.svelte
new file mode 100644
index 00000000..4f873d44
--- /dev/null
+++ b/src/routes/tools/ascii-art/+page.svelte
@@ -0,0 +1,199 @@
+<script lang="ts">
+	import { Button } from '$lib/components/ui/button/index.js';
+	import { Input } from '$lib/components/ui/input/index.js';
+	import {
+		Card,
+		CardContent,
+		CardDescription,
+		CardHeader,
+		CardTitle
+	} from '$lib/components/ui/card/index.js';
+	import {
+		Select,
+		SelectContent,
+		SelectItem,
+		SelectTrigger
+	} from '$lib/components/ui/select/index.js';
+
+	let inputText = $state('');
+	let output = $state('');
+	let font = $state('block');
+
+	// Simple ASCII art fonts
+	const fonts = {
+		block: {
+			A: ['█████', '█   █', '█████', '█   █', '█   █'],
+			B: ['████ ', '█   █', '████ ', '█   █', '████ '],
+			C: ['█████', '█    ', '█    ', '█    ', '█████'],
+			D: ['████ ', '█   █', '█   █', '█   █', '████ '],
+			E: ['█████', '█    ', '███  ', '█    ', '█████'],
+			F: ['█████', '█    ', '███  ', '█    ', '█    '],
+			G: ['█████', '█    ', '█ ███', '█   █', '█████'],
+			H: ['█   █', '█   █', '█████', '█   █', '█   █'],
+			I: ['█████', '  █  ', '  █  ', '  █  ', '█████'],
+			J: ['█████', '    █', '    █', '█   █', '█████'],
+			K: ['█   █', '█  █ ', '███  ', '█  █ ', '█   █'],
+			L: ['█    ', '█    ', '█    ', '█    ', '█████'],
+			M: ['█   █', '██ ██', '█ █ █', '█   █', '█   █'],
+			N: ['█   █', '██  █', '█ █ █', '█  ██', '█   █'],
+			O: ['█████', '█   █', '█   █', '█   █', '█████'],
+			P: ['████ ', '█   █', '████ ', '█    ', '█    '],
+			Q: ['█████', '█   █', '█ █ █', '█  ██', '██ ██'],
+			R: ['████ ', '█   █', '████ ', '█  █ ', '█   █'],
+			S: ['█████', '█    ', '█████', '    █', '█████'],
+			T: ['█████', '  █  ', '  █  ', '  █  ', '  █  '],
+			U: ['█   █', '█   █', '█   █', '█   █', '█████'],
+			V: ['█   █', '█   █', '█   █', ' █ █ ', '  █  '],
+			W: ['█   █', '█   █', '█ █ █', '██ ██', '█   █'],
+			X: ['█   █', ' █ █ ', '  █  ', ' █ █ ', '█   █'],
+			Y: ['█   █', ' █ █ ', '  █  ', '  █  ', '  █  '],
+			Z: ['█████', '   █ ', '  █  ', ' █   ', '█████'],
+			' ': ['     ', '     ', '     ', '     ', '     '],
+			'!': ['  █  ', '  █  ', '  █  ', '     ', '  █  '],
+			'?': ['█████', '    █', '  ██ ', '     ', '  █  ']
+		},
+
+		small: {
+			A: ['█▀█', '█▀█', '█▄█'],
+			B: ['█▀▄', '█▀▄', '█▄▀'],
+			C: ['▄▀█', '█▄▄', '▀▀▀'],
+			D: ['█▀▄', '█▄█', '█▄▀'],
+			E: ['█▀▀', '█▀▀', '█▄▄'],
+			F: ['█▀▀', '█▀▀', '█▄▄'],
+			G: ['▄▀█', '█▄█', '▀▀█'],
+			H: ['█▄█', '█▀█', '█▄█'],
+			I: ['█', '█', '█'],
+			J: ['▄▄█', '▄▄█', '▀▀▀'],
+			K: ['█▄▀', '██▄', '█▄█'],
+			L: ['█▄▄', '█▄▄', '▀▀▀'],
+			M: ['█▄█', '█▀█', '█▄█'],
+			N: ['█▄█', '█▀█', '█▄█'],
+			O: ['▄▀█', '█▄█', '▀▀▀'],
+			P: ['█▀▄', '█▀▄', '█▄▄'],
+			Q: ['▄▀█', '█▄█', '▀▀█'],
+			R: ['█▀▄', '█▀▄', '█▄█'],
+			S: ['▄▀▀', '▀▀▄', '▄▄▀'],
+			T: ['▀█▀', '▄█▄', '▀▀▀'],
+			U: ['█▄█', '█▄█', '▀▀▀'],
+			V: ['█▄█', '▀█▀', '▄▀▄'],
+			W: ['█▄█', '█▀█', '▀▄▀'],
+			X: ['█▄█', '▀█▀', '█▄█'],
+			Y: ['█▄█', '▀█▀', '▄▀▄'],
+			Z: ['▀▀▀', '▄▀▄', '▀▀▀'],
+			' ': ['   ', '   ', '   '],
+			'!': ['█', '█', '█'],
+			'?': ['▀▀', '▄▀', '▀▀']
+		}
+	};
+
+	function generateAsciiArt() {
+		if (!inputText.trim()) {
+			output = '';
+			return;
+		}
+
+		const selectedFont = fonts[font as keyof typeof fonts];
+		const text = inputText.toUpperCase();
+		const lines: string[] = [];
+
+		// Get the height of the font (number of rows)
+		const fontHeight = Object.values(selectedFont)[0].length;
+
+		// Initialize lines array
+		for (let i = 0; i < fontHeight; i++) {
+			lines.push('');
+		}
+
+		// Process each character
+		for (let charIndex = 0; charIndex < text.length; charIndex++) {
+			const char = text[charIndex];
+			const charPattern = selectedFont[char] || selectedFont[' '];
+
+			// Add each line of the character to the corresponding line
+			for (let lineIndex = 0; lineIndex < fontHeight; lineIndex++) {
+				lines[lineIndex] += charPattern[lineIndex];
+				// Add space between characters (except for the last character)
+				if (charIndex < text.length - 1) {
+					lines[lineIndex] += ' ';
+				}
+			}
+		}
+
+		output = lines.join('\n');
+	}
+
+	function copyToClipboard() {
+		if (output) {
+			navigator.clipboard.writeText(output);
+		}
+	}
+
+	function clearAll() {
+		inputText = '';
+		output = '';
+	}
+
+	// Generate ASCII art when input or font changes
+	$effect(() => {
+		generateAsciiArt();
+	});
+</script>
+
+<div class="flex h-full flex-col items-center justify-center gap-4 p-4">
+	<Card class="w-full max-w-4xl">
+		<CardHeader>
+			<CardTitle>ASCII Art Generator</CardTitle>
+			<CardDescription>Convert text into ASCII art using different fonts</CardDescription>
+		</CardHeader>
+		<CardContent class="space-y-4">
+			<div class="grid grid-cols-1 gap-4 md:grid-cols-2">
+				<div>
+					<label for="text" class="mb-2 block text-sm font-medium">Text to Convert:</label>
+					<Input
+						id="text"
+						bind:value={inputText}
+						placeholder="Enter text (letters, spaces, !, ? supported)"
+						maxlength="20"
+						class="w-full"
+					/>
+				</div>
+
+				<div>
+					<label for="font" class="mb-2 block text-sm font-medium">Font Style:</label>
+					<Select bind:value={font}>
+						<SelectTrigger>
+							{font === 'block' ? 'Block' : 'Small'}
+						</SelectTrigger>
+						<SelectContent>
+							<SelectItem value="block">Block</SelectItem>
+							<SelectItem value="small">Small</SelectItem>
+						</SelectContent>
+					</Select>
+				</div>
+			</div>
+
+			<div class="flex gap-2">
+				<Button onclick={generateAsciiArt} disabled={!inputText.trim()}>Generate ASCII Art</Button>
+				<Button variant="outline" onclick={clearAll}>Clear</Button>
+				{#if output}
+					<Button variant="secondary" onclick={copyToClipboard}>Copy ASCII Art</Button>
+				{/if}
+			</div>
+
+			{#if output}
+				<div>
+					<h3 class="mb-2 text-lg font-semibold">ASCII Art:</h3>
+					<div class="overflow-auto rounded border bg-black p-4 text-green-400">
+						<pre class="font-mono text-sm whitespace-pre">{output}</pre>
+					</div>
+				</div>
+			{/if}
+
+			<div class="text-muted-foreground space-y-1 text-sm">
+				<p><strong>Supported characters:</strong> A-Z, space, !, ?</p>
+				<p><strong>Tip:</strong> Keep text short (max 20 characters) for best results</p>
+				<p><strong>Note:</strong> ASCII art works best with monospace fonts</p>
+			</div>
+		</CardContent>
+	</Card>
+</div>
diff --git a/src/routes/tools/base64-converter/+page.svelte b/src/routes/tools/base64-converter/+page.svelte
new file mode 100644
index 00000000..2c8a9a5a
--- /dev/null
+++ b/src/routes/tools/base64-converter/+page.svelte
@@ -0,0 +1,107 @@
+<script lang="ts">
+	import { Button } from '$lib/components/ui/button/index.js';
+	import {
+		Card,
+		CardContent,
+		CardDescription,
+		CardHeader,
+		CardTitle
+	} from '$lib/components/ui/card/index.js';
+	import { Textarea } from '$lib/components/ui/textarea/index.js';
+	import { Tabs, TabsContent, TabsList, TabsTrigger } from '$lib/components/ui/tabs/index.js';
+
+	let inputText = $state('');
+	let outputText = $state('');
+	let error = $state('');
+
+	function encode() {
+		try {
+			error = '';
+			outputText = btoa(inputText);
+		} catch (e) {
+			error = 'Failed to encode. Please check your input.';
+			outputText = '';
+		}
+	}
+
+	function decode() {
+		try {
+			error = '';
+			outputText = atob(inputText);
+		} catch (e) {
+			error = 'Invalid Base64 input. Please check your input.';
+			outputText = '';
+		}
+	}
+
+	function clearAll() {
+		inputText = '';
+		outputText = '';
+		error = '';
+	}
+
+	function copyToClipboard() {
+		if (outputText) {
+			navigator.clipboard.writeText(outputText);
+		}
+	}
+</script>
+
+<div class="flex h-full flex-col items-center justify-center gap-4 p-4">
+	<Card class="w-full max-w-4xl">
+		<CardHeader>
+			<CardTitle>Base64 Encoder/Decoder</CardTitle>
+			<CardDescription>Encode text to Base64 or decode Base64 back to text</CardDescription>
+		</CardHeader>
+		<CardContent class="space-y-4">
+			<Tabs value="encode" class="w-full">
+				<TabsList class="grid w-full grid-cols-2">
+					<TabsTrigger value="encode">Encode</TabsTrigger>
+					<TabsTrigger value="decode">Decode</TabsTrigger>
+				</TabsList>
+
+				<TabsContent value="encode" class="space-y-4">
+					<div>
+						<Textarea
+							bind:value={inputText}
+							placeholder="Enter text to encode to Base64..."
+							class="min-h-[150px]"
+						/>
+					</div>
+					<Button onclick={encode} disabled={!inputText.trim()}>Encode to Base64</Button>
+				</TabsContent>
+
+				<TabsContent value="decode" class="space-y-4">
+					<div>
+						<Textarea
+							bind:value={inputText}
+							placeholder="Enter Base64 text to decode..."
+							class="min-h-[150px]"
+						/>
+					</div>
+					<Button onclick={decode} disabled={!inputText.trim()}>Decode from Base64</Button>
+				</TabsContent>
+			</Tabs>
+
+			<div class="flex gap-2">
+				<Button variant="outline" onclick={clearAll}>Clear All</Button>
+				{#if outputText}
+					<Button variant="secondary" onclick={copyToClipboard}>Copy Result</Button>
+				{/if}
+			</div>
+
+			{#if error}
+				<div class="text-destructive bg-destructive/10 rounded border p-3">
+					{error}
+				</div>
+			{/if}
+
+			{#if outputText}
+				<div>
+					<h3 class="mb-2 text-lg font-semibold">Result:</h3>
+					<Textarea value={outputText} readonly class="bg-muted min-h-[150px]" />
+				</div>
+			{/if}
+		</CardContent>
+	</Card>
+</div>
diff --git a/src/routes/tools/color-picker/+page.svelte b/src/routes/tools/color-picker/+page.svelte
new file mode 100644
index 00000000..9ffa4ee1
--- /dev/null
+++ b/src/routes/tools/color-picker/+page.svelte
@@ -0,0 +1,229 @@
+<script lang="ts">
+	import { Button } from '$lib/components/ui/button/index.js';
+	import { Input } from '$lib/components/ui/input/index.js';
+	import {
+		Card,
+		CardContent,
+		CardDescription,
+		CardHeader,
+		CardTitle
+	} from '$lib/components/ui/card/index.js';
+	import { Badge } from '$lib/components/ui/badge/index.js';
+
+	let selectedColor = $state('#3b82f6');
+	let colorHistory = $state<string[]>([]);
+
+	// Convert hex to RGB
+	function hexToRgb(hex: string): { r: number; g: number; b: number } | null {
+		const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
+		return result
+			? {
+					r: parseInt(result[1], 16),
+					g: parseInt(result[2], 16),
+					b: parseInt(result[3], 16)
+				}
+			: null;
+	}
+
+	// Convert RGB to HSL
+	function rgbToHsl(r: number, g: number, b: number): { h: number; s: number; l: number } {
+		r /= 255;
+		g /= 255;
+		b /= 255;
+		const max = Math.max(r, g, b);
+		const min = Math.min(r, g, b);
+		let h = 0,
+			s = 0,
+			l = (max + min) / 2;
+
+		if (max === min) {
+			h = s = 0; // achromatic
+		} else {
+			const d = max - min;
+			s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
+			switch (max) {
+				case r:
+					h = (g - b) / d + (g < b ? 6 : 0);
+					break;
+				case g:
+					h = (b - r) / d + 2;
+					break;
+				case b:
+					h = (r - g) / d + 4;
+					break;
+			}
+			h /= 6;
+		}
+
+		return {
+			h: Math.round(h * 360),
+			s: Math.round(s * 100),
+			l: Math.round(l * 100)
+		};
+	}
+
+	const rgb = $derived(() => hexToRgb(selectedColor));
+	const hsl = $derived(() => {
+		const rgbValue = rgb();
+		return rgbValue ? rgbToHsl(rgbValue.r, rgbValue.g, rgbValue.b) : null;
+	});
+
+	function addToHistory() {
+		if (!colorHistory.includes(selectedColor)) {
+			colorHistory = [selectedColor, ...colorHistory.slice(0, 9)]; // Keep last 10
+		}
+	}
+
+	function copyToClipboard(value: string) {
+		navigator.clipboard.writeText(value);
+	}
+
+	function generateRandomColor() {
+		selectedColor =
+			'#' +
+			Math.floor(Math.random() * 16777215)
+				.toString(16)
+				.padStart(6, '0');
+		addToHistory();
+	}
+
+	// Generate complementary colors
+	const complementaryColors = $derived(() => {
+		const rgbValue = rgb();
+		if (!rgbValue) return [];
+
+		return [
+			`#${(255 - rgbValue.r).toString(16).padStart(2, '0')}${(255 - rgbValue.g).toString(16).padStart(2, '0')}${(255 - rgbValue.b).toString(16).padStart(2, '0')}`
+		];
+	});
+</script>
+
+<div class="flex h-full flex-col items-center justify-center gap-4 p-4">
+	<Card class="w-full max-w-4xl">
+		<CardHeader>
+			<CardTitle>Color Picker & Palette</CardTitle>
+			<CardDescription>Pick colors and get values in different formats</CardDescription>
+		</CardHeader>
+		<CardContent class="space-y-6">
+			<div class="grid grid-cols-1 gap-6 lg:grid-cols-2">
+				<!-- Color Picker Section -->
+				<div class="space-y-4">
+					<div class="flex items-center gap-4">
+						<button
+							class="h-24 w-24 cursor-pointer rounded-lg border-2 border-gray-300"
+							style="background-color: {selectedColor}"
+							onclick={() => document.getElementById('colorInput')?.click()}
+							aria-label="Open color picker"
+						></button>
+						<input
+							id="colorInput"
+							type="color"
+							bind:value={selectedColor}
+							onchange={addToHistory}
+							class="sr-only"
+						/>
+						<div class="flex flex-col gap-2">
+							<Input
+								bind:value={selectedColor}
+								placeholder="#000000"
+								onchange={addToHistory}
+								class="font-mono"
+							/>
+							<Button onclick={generateRandomColor} variant="outline">Random Color</Button>
+						</div>
+					</div>
+				</div>
+
+				<!-- Color Values Section -->
+				<div class="space-y-4">
+					<h3 class="text-lg font-semibold">Color Values</h3>
+
+					<div class="space-y-2">
+						<div class="bg-muted flex items-center justify-between rounded p-2">
+							<span class="font-mono text-sm">HEX:</span>
+							<div class="flex items-center gap-2">
+								<Badge variant="outline" class="font-mono">{selectedColor.toUpperCase()}</Badge>
+								<Button size="sm" variant="ghost" onclick={() => copyToClipboard(selectedColor)}
+									>Copy</Button
+								>
+							</div>
+						</div>
+
+						{#if rgb()}
+							<div class="bg-muted flex items-center justify-between rounded p-2">
+								<span class="font-mono text-sm">RGB:</span>
+								<div class="flex items-center gap-2">
+									<Badge variant="outline" class="font-mono"
+										>rgb({rgb()?.r}, {rgb()?.g}, {rgb()?.b})</Badge
+									>
+									<Button
+										size="sm"
+										variant="ghost"
+										onclick={() => copyToClipboard(`rgb(${rgb()?.r}, ${rgb()?.g}, ${rgb()?.b})`)}
+										>Copy</Button
+									>
+								</div>
+							</div>
+						{/if}
+
+						{#if hsl()}
+							<div class="bg-muted flex items-center justify-between rounded p-2">
+								<span class="font-mono text-sm">HSL:</span>
+								<div class="flex items-center gap-2">
+									<Badge variant="outline" class="font-mono"
+										>hsl({hsl()?.h}, {hsl()?.s}%, {hsl()?.l}%)</Badge
+									>
+									<Button
+										size="sm"
+										variant="ghost"
+										onclick={() => copyToClipboard(`hsl(${hsl()?.h}, ${hsl()?.s}%, ${hsl()?.l}%)`)}
+										>Copy</Button
+									>
+								</div>
+							</div>
+						{/if}
+					</div>
+				</div>
+			</div>
+
+			<!-- Complementary Colors -->
+			{#if complementaryColors().length > 0}
+				<div>
+					<h3 class="mb-3 text-lg font-semibold">Complementary Color</h3>
+					<div class="flex gap-2">
+						{#each complementaryColors() as color}
+							<button
+								class="h-16 w-16 cursor-pointer rounded border"
+								style="background-color: {color}"
+								onclick={() => {
+									selectedColor = color;
+									addToHistory();
+								}}
+								title={color}
+								aria-label="Select color {color}"
+							></button>
+						{/each}
+					</div>
+				</div>
+			{/if}
+
+			<!-- Color History -->
+			{#if colorHistory.length > 0}
+				<div>
+					<h3 class="mb-3 text-lg font-semibold">Recent Colors</h3>
+					<div class="flex flex-wrap gap-2">
+						{#each colorHistory as color}
+							<button
+								class="h-12 w-12 cursor-pointer rounded border"
+								style="background-color: {color}"
+								onclick={() => (selectedColor = color)}
+								title={color}
+								aria-label="Select recent color {color}"
+							></button>
+						{/each}
+					</div>
+				</div>
+			{/if}
+		</CardContent>
+	</Card>
+</div>
diff --git a/src/routes/tools/hash-generator/+page.svelte b/src/routes/tools/hash-generator/+page.svelte
new file mode 100644
index 00000000..d61bfa50
--- /dev/null
+++ b/src/routes/tools/hash-generator/+page.svelte
@@ -0,0 +1,153 @@
+<script lang="ts">
+	import { Button } from '$lib/components/ui/button/index.js';
+	import {
+		Card,
+		CardContent,
+		CardDescription,
+		CardHeader,
+		CardTitle
+	} from '$lib/components/ui/card/index.js';
+	import { Textarea } from '$lib/components/ui/textarea/index.js';
+	import { Badge } from '$lib/components/ui/badge/index.js';
+	import md5 from 'md5';
+
+	let inputText = $state('');
+	let hashes = $state<Record<string, string>>({});
+
+	// Simple hash functions
+	async function generateSHA256(text: string): Promise<string> {
+		const encoder = new TextEncoder();
+		const data = encoder.encode(text);
+		const hashBuffer = await crypto.subtle.digest('SHA-256', data);
+		const hashArray = Array.from(new Uint8Array(hashBuffer));
+		return hashArray.map((b) => b.toString(16).padStart(2, '0')).join('');
+	}
+
+	async function generateSHA1(text: string): Promise<string> {
+		const encoder = new TextEncoder();
+		const data = encoder.encode(text);
+		const hashBuffer = await crypto.subtle.digest('SHA-1', data);
+		const hashArray = Array.from(new Uint8Array(hashBuffer));
+		return hashArray.map((b) => b.toString(16).padStart(2, '0')).join('');
+	}
+
+	function generateMD5(text: string): string {
+		return md5(text);
+	}
+
+	// Simple CRC32 implementation
+	function generateCRC32(text: string): string {
+		const crcTable = [];
+		for (let i = 0; i < 256; i++) {
+			let c = i;
+			for (let j = 0; j < 8; j++) {
+				c = c & 1 ? 0xedb88320 ^ (c >>> 1) : c >>> 1;
+			}
+			crcTable[i] = c;
+		}
+
+		let crc = 0 ^ -1;
+		for (let i = 0; i < text.length; i++) {
+			crc = (crc >>> 8) ^ crcTable[(crc ^ text.charCodeAt(i)) & 0xff];
+		}
+		return ((crc ^ -1) >>> 0).toString(16).toUpperCase().padStart(8, '0');
+	}
+
+	async function generateAllHashes() {
+		if (!inputText.trim()) {
+			hashes = {};
+			return;
+		}
+
+		const newHashes: Record<string, string> = {};
+
+		// Generate all hashes
+		newHashes.MD5 = generateMD5(inputText);
+		newHashes.SHA1 = await generateSHA1(inputText);
+		newHashes.SHA256 = await generateSHA256(inputText);
+		newHashes.CRC32 = generateCRC32(inputText);
+
+		hashes = newHashes;
+	}
+
+	function clearAll() {
+		inputText = '';
+		hashes = {};
+	}
+
+	function copyToClipboard(value: string) {
+		navigator.clipboard.writeText(value);
+	}
+
+	// Auto-generate hashes when input changes
+	$effect(() => {
+		generateAllHashes();
+	});
+</script>
+
+<div class="flex h-full flex-col items-center justify-center gap-4 p-4">
+	<Card class="w-full max-w-4xl">
+		<CardHeader>
+			<CardTitle>Hash Generator</CardTitle>
+			<CardDescription>Generate MD5, SHA1, SHA256, and CRC32 hashes from text</CardDescription>
+		</CardHeader>
+		<CardContent class="space-y-4">
+			<div>
+				<Textarea
+					bind:value={inputText}
+					placeholder="Enter text to generate hashes..."
+					class="min-h-[150px]"
+				/>
+			</div>
+
+			<div class="flex gap-2">
+				<Button onclick={generateAllHashes} disabled={!inputText.trim()}>Generate Hashes</Button>
+				<Button variant="outline" onclick={clearAll}>Clear All</Button>
+			</div>
+
+			{#if Object.keys(hashes).length > 0}
+				<div class="space-y-4">
+					<h3 class="text-lg font-semibold">Generated Hashes:</h3>
+
+					{#each Object.entries(hashes) as [algorithm, hash]}
+						<div class="space-y-2">
+							<div class="flex items-center justify-between">
+								<Badge variant="secondary" class="text-sm font-medium">{algorithm}</Badge>
+								<Button size="sm" variant="ghost" onclick={() => copyToClipboard(hash)}>
+									Copy
+								</Button>
+							</div>
+							<div class="bg-muted rounded border p-3 font-mono text-sm break-all">
+								{hash}
+							</div>
+						</div>
+					{/each}
+				</div>
+			{/if}
+
+			{#if inputText.trim()}
+				<div class="text-muted-foreground text-sm">
+					<p><strong>Input length:</strong> {inputText.length} characters</p>
+					<p><strong>Input bytes:</strong> {new TextEncoder().encode(inputText).length} bytes</p>
+				</div>
+			{/if}
+
+			<div class="text-muted-foreground space-y-1 text-xs">
+				<p><strong>Hash Information:</strong></p>
+				<ul class="ml-2 list-inside list-disc space-y-1">
+					<li>
+						<strong>MD5:</strong> 128-bit hash, commonly used but not cryptographically secure
+					</li>
+					<li><strong>SHA1:</strong> 160-bit hash, deprecated for cryptographic use</li>
+					<li>
+						<strong>SHA256:</strong> 256-bit hash, part of SHA-2 family, cryptographically secure
+					</li>
+					<li>
+						<strong>CRC32:</strong> 32-bit checksum, used for error detection, not cryptographically
+						secure
+					</li>
+				</ul>
+			</div>
+		</CardContent>
+	</Card>
+</div>
diff --git a/src/routes/tools/json-formatter/+page.svelte b/src/routes/tools/json-formatter/+page.svelte
new file mode 100644
index 00000000..b2393183
--- /dev/null
+++ b/src/routes/tools/json-formatter/+page.svelte
@@ -0,0 +1,145 @@
+<script lang="ts">
+	import { Button } from '$lib/components/ui/button/index.js';
+	import {
+		Card,
+		CardContent,
+		CardDescription,
+		CardHeader,
+		CardTitle
+	} from '$lib/components/ui/card/index.js';
+	import { Textarea } from '$lib/components/ui/textarea/index.js';
+	import { Badge } from '$lib/components/ui/badge/index.js';
+
+	let inputJson = $state('');
+	let outputJson = $state('');
+	let isValid = $state(true);
+	let error = $state('');
+	let indentSize = $state(2);
+
+	function formatJson() {
+		try {
+			const parsed = JSON.parse(inputJson);
+			outputJson = JSON.stringify(parsed, null, indentSize);
+			isValid = true;
+			error = '';
+		} catch (e) {
+			isValid = false;
+			error = e instanceof Error ? e.message : 'Invalid JSON';
+			outputJson = '';
+		}
+	}
+
+	function minifyJson() {
+		try {
+			const parsed = JSON.parse(inputJson);
+			outputJson = JSON.stringify(parsed);
+			isValid = true;
+			error = '';
+		} catch (e) {
+			isValid = false;
+			error = e instanceof Error ? e.message : 'Invalid JSON';
+			outputJson = '';
+		}
+	}
+
+	function validateJson() {
+		try {
+			JSON.parse(inputJson);
+			isValid = true;
+			error = '';
+		} catch (e) {
+			isValid = false;
+			error = e instanceof Error ? e.message : 'Invalid JSON';
+		}
+	}
+
+	function clearAll() {
+		inputJson = '';
+		outputJson = '';
+		error = '';
+		isValid = true;
+	}
+
+	function copyToClipboard() {
+		if (outputJson) {
+			navigator.clipboard.writeText(outputJson);
+		}
+	}
+
+	// Auto-validate on input change
+	$effect(() => {
+		if (inputJson.trim()) {
+			validateJson();
+		} else {
+			isValid = true;
+			error = '';
+		}
+	});
+</script>
+
+<div class="flex h-full flex-col items-center justify-center gap-4 p-4">
+	<Card class="w-full max-w-6xl">
+		<CardHeader>
+			<CardTitle>JSON Formatter & Validator</CardTitle>
+			<CardDescription>Format, validate, and minify JSON data</CardDescription>
+		</CardHeader>
+		<CardContent class="space-y-4">
+			<div class="grid grid-cols-1 gap-4 lg:grid-cols-2">
+				<div class="space-y-4">
+					<div class="flex items-center justify-between">
+						<h3 class="text-lg font-semibold">Input JSON</h3>
+						<div class="flex items-center gap-2">
+							{#if inputJson.trim()}
+								<Badge variant={isValid ? 'success' : 'destructive'}>
+									{isValid ? 'Valid' : 'Invalid'}
+								</Badge>
+							{/if}
+						</div>
+					</div>
+					<Textarea
+						bind:value={inputJson}
+						placeholder="Enter JSON to format or validate..."
+						class="min-h-[400px] font-mono text-sm"
+					/>
+				</div>
+
+				<div class="space-y-4">
+					<h3 class="text-lg font-semibold">Formatted Output</h3>
+					<Textarea
+						value={outputJson}
+						readonly
+						placeholder="Formatted JSON will appear here..."
+						class="bg-muted min-h-[400px] font-mono text-sm"
+					/>
+				</div>
+			</div>
+
+			{#if error}
+				<div class="text-destructive bg-destructive/10 rounded border p-3">
+					<strong>Error:</strong>
+					{error}
+				</div>
+			{/if}
+
+			<div class="flex flex-wrap gap-2">
+				<Button onclick={formatJson} disabled={!inputJson.trim() || !isValid}>Format JSON</Button>
+				<Button variant="outline" onclick={minifyJson} disabled={!inputJson.trim() || !isValid}>
+					Minify JSON
+				</Button>
+				<Button variant="outline" onclick={clearAll}>Clear All</Button>
+				{#if outputJson}
+					<Button variant="secondary" onclick={copyToClipboard}>Copy Result</Button>
+				{/if}
+			</div>
+
+			<div class="text-muted-foreground flex items-center gap-2 text-sm">
+				<label for="indent">Indent Size:</label>
+				<select id="indent" bind:value={indentSize} class="rounded border px-2 py-1">
+					<option value={2}>2 spaces</option>
+					<option value={4}>4 spaces</option>
+					<option value={1}>1 space</option>
+				</select>
+			</div>
+		</CardContent>
+	</Card>
+</div>
diff --git a/src/routes/tools/lorem-generator/+page.svelte b/src/routes/tools/lorem-generator/+page.svelte
new file mode 100644
index 00000000..1af41a2c
--- /dev/null
+++ b/src/routes/tools/lorem-generator/+page.svelte
@@ -0,0 +1,303 @@
+<script lang="ts">
+	import { Button } from '$lib/components/ui/button/index.js';
+	import { Input } from '$lib/components/ui/input/index.js';
+	import {
+		Card,
+		CardContent,
+		CardDescription,
+		CardHeader,
+		CardTitle
+	} from '$lib/components/ui/card/index.js';
+	import { Textarea } from '$lib/components/ui/textarea/index.js';
+	import {
+		Select,
+		SelectContent,
+		SelectItem,
+		SelectTrigger
+	} from '$lib/components/ui/select/index.js';
+
+	let count = $state(5);
+	let type = $state('paragraphs');
+	let output = $state('');
+	let startWithLorem = $state(true);
+
+	const loremWords = [
+		'lorem',
+		'ipsum',
+		'dolor',
+		'sit',
+		'amet',
+		'consectetur',
+		'adipiscing',
+		'elit',
+		'sed',
+		'do',
+		'eiusmod',
+		'tempor',
+		'incididunt',
+		'ut',
+		'labore',
+		'et',
+		'dolore',
+		'magna',
+		'aliqua',
+		'enim',
+		'ad',
+		'minim',
+		'veniam',
+		'quis',
+		'nostrud',
+		'exercitation',
+		'ullamco',
+		'laboris',
+		'nisi',
+		'aliquip',
+		'ex',
+		'ea',
+		'commodo',
+		'consequat',
+		'duis',
+		'aute',
+		'irure',
+		'in',
+		'reprehenderit',
+		'voluptate',
+		'velit',
+		'esse',
+		'cillum',
+		'fugiat',
+		'nulla',
+		'pariatur',
+		'excepteur',
+		'sint',
+		'occaecat',
+		'cupidatat',
+		'non',
+		'proident',
+		'sunt',
+		'culpa',
+		'qui',
+		'officia',
+		'deserunt',
+		'mollit',
+		'anim',
+		'id',
+		'est',
+		'laborum',
+		'at',
+		'vero',
+		'eos',
+		'accusamus',
+		'accusantium',
+		'doloremque',
+		'laudantium',
+		'totam',
+		'rem',
+		'aperiam',
+		'eaque',
+		'ipsa',
+		'quae',
+		'ab',
+		'illo',
+		'inventore',
+		'veritatis',
+		'et',
+		'quasi',
+		'architecto',
+		'beatae',
+		'vitae',
+		'dicta',
+		'sunt',
+		'explicabo',
+		'nemo',
+		'ipsam',
+		'voluptatem',
+		'quia',
+		'voluptas',
+		'aspernatur',
+		'aut',
+		'odit',
+		'fugit',
+		'consequuntur',
+		'magni',
+		'dolores',
+		'ratione',
+		'sequi',
+		'nesciunt',
+		'neque',
+		'porro',
+		'quisquam',
+		'dolorem',
+		'adipisci',
+		'numquam',
+		'eius',
+		'modi',
+		'tempora',
+		'incidunt',
+		'magnam',
+		'quaerat',
+		'voluptatem'
+	];
+
+	function getRandomWord(): string {
+		return loremWords[Math.floor(Math.random() * loremWords.length)];
+	}
+
+	function getRandomWords(count: number, startWithLorem: boolean = false): string[] {
+		const words: string[] = [];
+
+		if (startWithLorem && count > 0) {
+			words.push('Lorem');
+			count--;
+		}
+
+		for (let i = 0; i < count; i++) {
+			words.push(getRandomWord());
+		}
+
+		return words;
+	}
+
+	function generateSentence(wordCount: number = 0): string {
+		const minWords = 5;
+		const maxWords = 15;
+		const actualWordCount =
+			wordCount || Math.floor(Math.random() * (maxWords - minWords + 1)) + minWords;
+
+		const words = getRandomWords(actualWordCount);
+		words[0] = words[0].charAt(0).toUpperCase() + words[0].slice(1);
+
+		return words.join(' ') + '.';
+	}
+
+	function generateParagraph(sentenceCount: number = 0): string {
+		const minSentences = 3;
+		const maxSentences = 7;
+		const actualSentenceCount =
+			sentenceCount || Math.floor(Math.random() * (maxSentences - minSentences + 1)) + minSentences;
+
+		const sentences: string[] = [];
+		for (let i = 0; i < actualSentenceCount; i++) {
+			sentences.push(generateSentence());
+		}
+
+		return sentences.join(' ');
+	}
+
+	function generate() {
+		const results: string[] = [];
+
+		switch (type) {
+			case 'words':
+				const words = getRandomWords(count, startWithLorem);
+				results.push(words.join(' '));
+				break;
+
+			case 'sentences':
+				for (let i = 0; i < count; i++) {
+					const sentence =
+						i === 0 && startWithLorem
+							? generateSentence().replace(/^Lorem/i, 'Lorem ipsum')
+							: generateSentence();
+					results.push(sentence);
+				}
+				break;
+
+			case 'paragraphs':
+				for (let i = 0; i < count; i++) {
+					let paragraph = generateParagraph();
+					if (i === 0 && startWithLorem) {
+						paragraph = paragraph.replace(/^[A-Za-z]+/, 'Lorem ipsum');
+					}
+					results.push(paragraph);
+				}
+				break;
+		}
+
+		output = results.join(type === 'paragraphs' ? '\n\n' : '\n');
+	}
+
+	function copyToClipboard() {
+		if (output) {
+			navigator.clipboard.writeText(output);
+		}
+	}
+
+	function clearAll() {
+		output = '';
+	}
+
+	// Auto-generate on mount
+	$effect(() => {
+		if (count > 0) {
+			generate();
+		}
+	});
+</script>
+
+<div class="flex h-full flex-col items-center justify-center gap-4 p-4">
+	<Card class="w-full max-w-4xl">
+		<CardHeader>
+			<CardTitle>Lorem Ipsum Generator</CardTitle>
+			<CardDescription>Generate placeholder text for your designs and layouts</CardDescription>
+		</CardHeader>
+		<CardContent class="space-y-4">
+			<div class="grid grid-cols-1 gap-4 md:grid-cols-3">
+				<div>
+					<label for="count" class="mb-2 block text-sm font-medium">Count:</label>
+					<Input id="count" type="number" bind:value={count} min="1" max="100" class="w-full" />
+				</div>
+
+				<div>
+					<label for="type" class="mb-2 block text-sm font-medium">Type:</label>
+					<Select bind:value={type}>
+						<SelectTrigger>
+							{type === 'words' ? 'Words' : type === 'sentences' ? 'Sentences' : 'Paragraphs'}
+						</SelectTrigger>
+						<SelectContent>
+							<SelectItem value="words">Words</SelectItem>
+							<SelectItem value="sentences">Sentences</SelectItem>
+							<SelectItem value="paragraphs">Paragraphs</SelectItem>
+						</SelectContent>
+					</Select>
+				</div>
+
+				<div class="flex items-end">
+					<label class="flex items-center space-x-2">
+						<input type="checkbox" bind:checked={startWithLorem} class="rounded" />
+						<span class="text-sm">Start with "Lorem ipsum"</span>
+					</label>
+				</div>
+			</div>
+
+			<div class="flex gap-2">
+				<Button onclick={generate}>Generate Lorem Ipsum</Button>
+				<Button variant="outline" onclick={clearAll}>Clear</Button>
+				{#if output}
+					<Button variant="secondary" onclick={copyToClipboard}>Copy to Clipboard</Button>
+				{/if}
+			</div>
+
+			{#if output}
+				<div>
+					<h3 class="mb-2 text-lg font-semibold">Generated Text:</h3>
+					<Textarea value={output} readonly class="bg-muted min-h-[300px]" />
+				</div>
+			{/if}
+
+			<div class="text-muted-foreground text-sm">
+				<p>
+					<strong>Tip:</strong> Lorem ipsum is placeholder text commonly used in the printing and typesetting
+					industry since the 1500s.
+				</p>
+				{#if output}
+					<p>
+						<strong>Generated:</strong>
+						{output.split(' ').length} words, {output.split(/[.!?]+/).filter((s) => s.trim())
+							.length} sentences
+					</p>
+				{/if}
+			</div>
+		</CardContent>
+	</Card>
+</div>
diff --git a/src/routes/tools/markdown-preview/+page.svelte b/src/routes/tools/markdown-preview/+page.svelte
new file mode 100644
index 00000000..73177039
--- /dev/null
+++ b/src/routes/tools/markdown-preview/+page.svelte
@@ -0,0 +1,314 @@
+<script lang="ts">
+	import { Button } from '$lib/components/ui/button/index.js';
+	import {
+		Card,
+		CardContent,
+		CardDescription,
+		CardHeader,
+		CardTitle
+	} from '$lib/components/ui/card/index.js';
+	import { Textarea } from '$lib/components/ui/textarea/index.js';
+	import { Tabs, TabsContent, TabsList, TabsTrigger } from '$lib/components/ui/tabs/index.js';
+
+	let markdownText = $state(`# Markdown Preview
+
+Welcome to the **Markdown Preview** tool!
+
+## Features
+
+- Live preview of your markdown
+- Support for common markdown syntax
+- Easy copy functionality
+
+### Text Formatting
+
+You can make text *italic*, **bold**, or ***both***.
+
+### Lists
+
+Unordered list:
+- Item 1
+- Item 2
+- Item 3
+
+Ordered list:
+1. First item
+2. Second item
+3. Third item
+
+### Code
+
+Inline code: \`console.log('Hello World')\`
+
+Code block:
+\`\`\`javascript
+function greet(name) {
+    return \`Hello, \${name}!\`;
+}
+\`\`\`
+
+### Links and Images
+
+[Visit Google](https://google.com)
+
+### Blockquotes
+
+> This is a blockquote
+> It can span multiple lines
+
+### Tables
+
+| Name | Age | City |
+|------|-----|------|
+| John | 25  | NYC  |
+| Jane | 30  | LA   |
+
+---
+
+### Horizontal Rule
+
+That's a horizontal rule above this text.
+`);
+
+	let htmlOutput = $state('');
+
+	// Simple markdown to HTML converter
+	function convertMarkdownToHtml(markdown: string): string {
+		let html = markdown;
+
+		// Headers
+		html = html.replace(/^### (.*$)/gim, '<h3>$1</h3>');
+		html = html.replace(/^## (.*$)/gim, '<h2>$1</h2>');
+		html = html.replace(/^# (.*$)/gim, '<h1>$1</h1>');
+
+		// Bold and Italic
+		html = html.replace(/\*\*\*(.*)\*\*\*/gim, '<strong><em>$1</em></strong>');
+		html = html.replace(/\*\*(.*)\*\*/gim, '<strong>$1</strong>');
+		html = html.replace(/\*(.*)\*/gim, '<em>$1</em>');
+
+		// Code blocks
+		html = html.replace(/```(\w+)?\n([\s\S]*?)```/gim, '<pre><code>$2</code></pre>');
+
+		// Inline code
+		html = html.replace(/`([^`]+)`/gim, '<code>$1</code>');
+
+		// Links
+		html = html.replace(
+			/\[([^\]]+)\]\(([^)]+)\)/gim,
+			'<a href="$2" target="_blank" rel="noopener noreferrer">$1</a>'
+		);
+
+		// Horizontal rules
+		html = html.replace(/^---$/gim, '<hr>');
+
+		// Tables (simplified)
+		const tableRegex = /^\|(.+)\|\n\|(.+)\|\n((?:\|.+\|\n?)*)/gm;
+		html = html.replace(tableRegex, (match, header, separator, rows) => {
+			const headerCells = header
+				.split('|')
+				.map((cell: string) => `<th>${cell.trim()}</th>`)
+				.join('');
+			const rowLines = rows.trim().split('\n');
+			const rowCells = rowLines
+				.map((row: string) => {
+					const cells = row
+						.split('|')
+						.map((cell: string) => `<td>${cell.trim()}</td>`)
+						.join('');
+					return `<tr>${cells}</tr>`;
+				})
+				.join('');
+			return `<table class="border-collapse border border-gray-300"><thead><tr>${headerCells}</tr></thead><tbody>${rowCells}</tbody></table>`;
+		});
+
+		// Blockquotes
+		html = html.replace(/^> (.+$)/gim, '<blockquote>$1</blockquote>');
+
+		// Lists
+		html = html.replace(/^\* (.+$)/gim, '<li>$1</li>');
+		html = html.replace(/^\d+\. (.+$)/gim, '<li>$1</li>');
+
+		// Wrap consecutive <li> items in <ul> or <ol>
+		html = html.replace(/(<li>.*<\/li>)\n(?=<li>)/gim, '$1');
+		html = html.replace(/(<li>.*<\/li>)/gim, '<ul>$1</ul>');
+
+		// Line breaks
+		html = html.replace(/\n/gim, '<br>');
+
+		// Clean up multiple <br> tags
+		html = html.replace(/(<br>){3,}/gim, '<br><br>');
+
+		return html;
+	}
+
+	function updatePreview() {
+		htmlOutput = convertMarkdownToHtml(markdownText);
+	}
+
+	function copyMarkdown() {
+		navigator.clipboard.writeText(markdownText);
+	}
+
+	function copyHtml() {
+		navigator.clipboard.writeText(htmlOutput);
+	}
+
+	function clearAll() {
+		markdownText = '';
+		htmlOutput = '';
+	}
+
+	// Update preview when markdown changes
+	$effect(() => {
+		updatePreview();
+	});
+</script>
+
+<div class="flex h-full flex-col items-center justify-center gap-4 p-4">
+	<Card class="h-[80vh] w-full max-w-6xl">
+		<CardHeader>
+			<CardTitle>Markdown Preview</CardTitle>
+			<CardDescription>Write markdown and see the live preview</CardDescription>
+		</CardHeader>
+		<CardContent class="h-full space-y-4">
+			<Tabs value="split" class="flex h-full flex-col">
+				<div class="flex items-center justify-between">
+					<TabsList>
+						<TabsTrigger value="split">Split View</TabsTrigger>
+						<TabsTrigger value="markdown">Markdown Only</TabsTrigger>
+						<TabsTrigger value="preview">Preview Only</TabsTrigger>
+					</TabsList>
+
+					<div class="flex gap-2">
+						<Button size="sm" variant="outline" onclick={copyMarkdown}>Copy Markdown</Button>
+						<Button size="sm" variant="outline" onclick={copyHtml}>Copy HTML</Button>
+						<Button size="sm" variant="outline" onclick={clearAll}>Clear</Button>
+					</div>
+				</div>
+
+				<TabsContent value="split" class="grid h-full flex-1 grid-cols-2 gap-4">
+					<div class="flex h-full flex-col">
+						<h3 class="mb-2 text-sm font-medium">Markdown Input:</h3>
+						<Textarea
+							bind:value={markdownText}
+							placeholder="Enter your markdown here..."
+							class="flex-1 font-mono text-sm"
+						/>
+					</div>
+					<div class="flex h-full flex-col">
+						<h3 class="mb-2 text-sm font-medium">Live Preview:</h3>
+						<div
+							class="bg-background prose prose-sm max-w-none flex-1 overflow-auto rounded-md border p-4"
+						>
+							{@html htmlOutput}
+						</div>
+					</div>
+				</TabsContent>
+
+				<TabsContent value="markdown" class="h-full flex-1">
+					<Textarea
+						bind:value={markdownText}
+						placeholder="Enter your markdown here..."
+						class="h-full font-mono text-sm"
+					/>
+				</TabsContent>
+
+				<TabsContent value="preview" class="h-full flex-1">
+					<div
+						class="bg-background prose prose-sm h-full max-w-none overflow-auto rounded-md border p-4"
+					>
+						{@html htmlOutput}
+					</div>
+				</TabsContent>
+			</Tabs>
+		</CardContent>
+	</Card>
+</div>
+
+<style>
+	:global(.prose h1) { 
+		font-size: 1.5rem; 
+		font-weight: bold; 
+		margin-bottom: 1rem; 
+	}
+	:global(.prose h2) { 
+		font-size: 1.25rem; 
+		font-weight: bold; 
+		margin-bottom: 0.75rem; 
+	}
+	:global(.prose h3) { 
+		font-size: 1.125rem; 
+		font-weight: bold; 
+		margin-bottom: 0.5rem; 
+	}
+	:global(.prose p) { 
+		margin-bottom: 1rem; 
+	}
+	:global(.prose ul) { 
+		margin-bottom: 1rem; 
+		padding-left: 1.25rem; 
+		list-style-type: disc; 
+	}
+	:global(.prose ol) { 
+		margin-bottom: 1rem; 
+		padding-left: 1.25rem; 
+		list-style-type: decimal; 
+	}
+	:global(.prose li) { 
+		margin-bottom: 0.25rem; 
+	}
+	:global(.prose blockquote) { 
+		margin-bottom: 1rem; 
+		border-left: 4px solid #d1d5db; 
+		padding-left: 1rem; 
+		font-style: italic; 
+	}
+	:global(.prose code) { 
+		border-radius: 0.25rem; 
+		background-color: #f3f4f6; 
+		padding: 0.125rem 0.25rem; 
+		font-family: ui-monospace, SFMono-Regular, 'SF Mono', monospace; 
+		font-size: 0.875rem; 
+	}
+	:global(.prose pre) { 
+		margin-bottom: 1rem; 
+		overflow: auto; 
+		border-radius: 0.25rem; 
+		background-color: #f3f4f6; 
+		padding: 1rem; 
+	}
+	:global(.prose pre code) { 
+		background-color: transparent; 
+		padding: 0; 
+	}
+	:global(.prose a) { 
+		color: #2563eb; 
+		text-decoration: none; 
+	}
+	:global(.prose a:hover) { 
+		text-decoration: underline; 
+	}
+	:global(.prose hr) { 
+		margin: 1.5rem 0; 
+		border-top: 1px solid #d1d5db; 
+		border-bottom: none; 
+		border-left: none; 
+		border-right: none; 
+	}
+	:global(.prose table) { 
+		margin-bottom: 1rem; 
+		width: 100%; 
+		border-collapse: collapse; 
+		border: 1px solid #d1d5db; 
+	}
+	:global(.prose th) { 
+		border: 1px solid #d1d5db; 
+		padding: 0.5rem 1rem; 
+		background-color: #f3f4f6; 
+		font-weight: bold; 
+	}
+	:global(.prose td) { 
+		border: 1px solid #d1d5db; 
+		padding: 0.5rem 1rem; 
+	}
+</style>
diff --git a/src/routes/tools/qr-code-generator/+page.svelte b/src/routes/tools/qr-code-generator/+page.svelte
new file mode 100644
index 00000000..7144343d
--- /dev/null
+++ b/src/routes/tools/qr-code-generator/+page.svelte
@@ -0,0 +1,67 @@
+<script lang="ts">
+	import { Button } from '$lib/components/ui/button/index.js';
+	import { Input } from '$lib/components/ui/input/index.js';
+	import {
+		Card,
+		CardContent,
+		CardDescription,
+		CardHeader,
+		CardTitle
+	} from '$lib/components/ui/card/index.js';
+	import { Textarea } from '$lib/components/ui/textarea/index.js';
+
+	let text = $state('');
+	let qrCodeUrl = $state('');
+
+	function generateQRCode() {
+		if (text.trim()) {
+			// Using QR Server API for simplicity - free and no API key required
+			const encodedText = encodeURIComponent(text);
+			qrCodeUrl = `https://api.qrserver.com/v1/create-qr-code/?size=200x200&data=${encodedText}`;
+		}
+	}
+
+	function clearAll() {
+		text = '';
+		qrCodeUrl = '';
+	}
+
+	function downloadQR() {
+		if (qrCodeUrl) {
+			const link = document.createElement('a');
+			link.href = qrCodeUrl;
+			link.download = 'qrcode.png';
+			link.click();
+		}
+	}
+</script>
+
+<div class="flex h-full flex-col items-center justify-center gap-4 p-4">
+	<Card class="w-full max-w-2xl">
+		<CardHeader>
+			<CardTitle>QR Code Generator</CardTitle>
+			<CardDescription>Generate QR codes from text, URLs, or any other data</CardDescription>
+		</CardHeader>
+		<CardContent class="space-y-4">
+			<div>
+				<Textarea
+					bind:value={text}
+					placeholder="Enter text, URL, or any data to encode..."
+					class="min-h-[100px]"
+				/>
+			</div>
+
+			<div class="flex gap-2">
+				<Button onclick={generateQRCode} disabled={!text.trim()}>Generate QR Code</Button>
+				<Button variant="outline" onclick={clearAll}>Clear</Button>
+			</div>
+
+			{#if qrCodeUrl}
+				<div class="flex flex-col items-center space-y-4">
+					<img src={qrCodeUrl} alt="Generated QR Code" class="rounded border" />
+					<Button variant="secondary" onclick={downloadQR}>Download QR Code</Button>
+				</div>
+			{/if}
+		</CardContent>
+	</Card>
+</div>
diff --git a/src/routes/tools/regex-tester/+page.svelte b/src/routes/tools/regex-tester/+page.svelte
new file mode 100644
index 00000000..64e06622
--- /dev/null
+++ b/src/routes/tools/regex-tester/+page.svelte
@@ -0,0 +1,282 @@
+<script lang="ts">
+	import { Button } from '$lib/components/ui/button/index.js';
+	import { Input } from '$lib/components/ui/input/index.js';
+	import {
+		Card,
+		CardContent,
+		CardDescription,
+		CardHeader,
+		CardTitle
+	} from '$lib/components/ui/card/index.js';
+	import { Textarea } from '$lib/components/ui/textarea/index.js';
+	import { Badge } from '$lib/components/ui/badge/index.js';
+
+	let pattern = $state('\\b\\w+@\\w+\\.\\w+\\b');
+	let flags = $state('gi');
+	let testString = $state(`Here are some email addresses:
+john.doe@example.com
+jane_smith@company.org
+admin@website.net
+invalid-email@
+another.email@domain.co.uk
+test123@sample-site.com`);
+
+	let matches = $state<RegExpMatchArray[]>([]);
+	let error = $state('');
+	let isValid = $state(true);
+
+	// Common regex patterns
+	const commonPatterns = [
+		{
+			name: 'Email',
+			pattern: '\\b[A-Za-z0-9._%+-]+@[A-Za-z0-9.-]+\\.[A-Z|a-z]{2,}\\b',
+			flags: 'gi'
+		},
+		{
+			name: 'URL',
+			pattern:
+				'https?:\\/\\/(www\\.)?[-a-zA-Z0-9@:%._\\+~#=]{1,256}\\.[a-zA-Z0-9()]{1,6}\\b([-a-zA-Z0-9()@:%_\\+.~#?&//=]*)',
+			flags: 'gi'
+		},
+		{
+			name: 'Phone (US)',
+			pattern: '\\(?([0-9]{3})\\)?[-. ]?([0-9]{3})[-. ]?([0-9]{4})',
+			flags: 'gi'
+		},
+		{
+			name: 'IP Address',
+			pattern:
+				'\\b(?:(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\\.){3}(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\\b',
+			flags: 'gi'
+		},
+		{
+			name: 'Date (MM/DD/YYYY)',
+			pattern: '\\b(0?[1-9]|1[0-2])\\/(0?[1-9]|[12][0-9]|3[01])\\/(19|20)\\d\\d\\b',
+			flags: 'gi'
+		},
+		{
+			name: 'Credit Card',
+			pattern:
+				'\\b(?:4[0-9]{12}(?:[0-9]{3})?|5[1-5][0-9]{14}|3[47][0-9]{13}|3[0-9]{13}|6(?:011|5[0-9]{2})[0-9]{12})\\b',
+			flags: 'gi'
+		},
+		{ name: 'Hex Color', pattern: '#(?:[0-9a-fA-F]{3}){1,2}\\b', flags: 'gi' },
+		{ name: 'Word', pattern: '\\b\\w+\\b', flags: 'gi' },
+		{ name: 'Number', pattern: '\\b\\d+(?:\\.\\d+)?\\b', flags: 'gi' }
+	];
+
+	function testRegex() {
+		try {
+			error = '';
+			isValid = true;
+
+			if (!pattern.trim()) {
+				matches = [];
+				return;
+			}
+
+			const regex = new RegExp(pattern, flags);
+			const allMatches = Array.from(testString.matchAll(regex));
+			matches = allMatches;
+		} catch (e) {
+			isValid = false;
+			error = e instanceof Error ? e.message : 'Invalid regular expression';
+			matches = [];
+		}
+	}
+
+	function loadPattern(selectedPattern: (typeof commonPatterns)[0]) {
+		pattern = selectedPattern.pattern;
+		flags = selectedPattern.flags;
+		testRegex();
+	}
+
+	function clearAll() {
+		pattern = '';
+		flags = 'gi';
+		testString = '';
+		matches = [];
+		error = '';
+		isValid = true;
+	}
+
+	function copyPattern() {
+		const fullPattern = `/${pattern}/${flags}`;
+		navigator.clipboard.writeText(fullPattern);
+	}
+
+	function copyMatches() {
+		const matchText = matches.map((match) => match[0]).join('\n');
+		navigator.clipboard.writeText(matchText);
+	}
+
+	// Test regex when pattern, flags, or test string changes
+	$effect(() => {
+		testRegex();
+	});
+
+	// Highlight matches in test string
+	function getHighlightedText(): string {
+		if (!isValid || matches.length === 0) {
+			return testString;
+		}
+
+		let highlightedText = testString;
+		const matchPositions: Array<{ start: number; end: number; text: string }> = [];
+
+		// Collect all match positions
+		matches.forEach((match) => {
+			if (match.index !== undefined) {
+				matchPositions.push({
+					start: match.index,
+					end: match.index + match[0].length,
+					text: match[0]
+				});
+			}
+		});
+
+		// Sort by position (descending to replace from end to start)
+		matchPositions.sort((a, b) => b.start - a.start);
+
+		// Replace matches with highlighted versions
+		matchPositions.forEach((match) => {
+			const before = highlightedText.substring(0, match.start);
+			const after = highlightedText.substring(match.end);
+			highlightedText =
+				before + `<mark class="bg-yellow-200 px-1 rounded">${match.text}</mark>` + after;
+		});
+
+		return highlightedText;
+	}
+</script>
+
+<div class="flex h-full flex-col items-center justify-center gap-4 p-4">
+	<Card class="w-full max-w-6xl">
+		<CardHeader>
+			<CardTitle>Regular Expression Tester</CardTitle>
+			<CardDescription>Test and debug regular expressions with live matching</CardDescription>
+		</CardHeader>
+		<CardContent class="space-y-4">
+			<!-- Pattern Input -->
+			<div class="grid grid-cols-1 gap-4 md:grid-cols-4">
+				<div class="md:col-span-3">
+					<label for="pattern" class="mb-2 block text-sm font-medium"
+						>Regular Expression Pattern:</label
+					>
+					<Input
+						id="pattern"
+						bind:value={pattern}
+						placeholder="Enter regex pattern..."
+						class="font-mono"
+					/>
+				</div>
+				<div>
+					<label for="flags" class="mb-2 block text-sm font-medium">Flags:</label>
+					<Input id="flags" bind:value={flags} placeholder="gi" class="font-mono" />
+				</div>
+			</div>
+
+			<!-- Validation -->
+			<div class="flex items-center gap-2">
+				<Badge variant={isValid ? 'success' : 'destructive'}>
+					{isValid ? 'Valid' : 'Invalid'}
+				</Badge>
+				{#if pattern && flags}
+					<code class="bg-muted rounded px-2 py-1 text-sm">/{pattern}/{flags}</code>
+				{/if}
+				{#if matches.length > 0}
+					<Badge variant="outline">{matches.length} match{matches.length !== 1 ? 'es' : ''}</Badge>
+				{/if}
+			</div>
+
+			{#if error}
+				<div class="text-destructive bg-destructive/10 rounded border p-3">
+					<strong>Error:</strong>
+					{error}
+				</div>
+			{/if}
+
+			<!-- Common Patterns -->
+			<div>
+				<h3 class="mb-2 text-sm font-medium">Common Patterns:</h3>
+				<div class="flex flex-wrap gap-2">
+					{#each commonPatterns as commonPattern}
+						<Button size="sm" variant="outline" onclick={() => loadPattern(commonPattern)}>
+							{commonPattern.name}
+						</Button>
+					{/each}
+				</div>
+			</div>
+
+			<!-- Test String -->
+			<div>
+				<label for="testString" class="mb-2 block text-sm font-medium">Test String:</label>
+				<Textarea
+					id="testString"
+					bind:value={testString}
+					placeholder="Enter text to test against your regex..."
+					class="min-h-[150px] font-mono text-sm"
+				/>
+			</div>
+
+			<!-- Highlighted Output -->
+			{#if testString}
+				<div>
+					<h3 class="mb-2 text-sm font-medium">Text with Matches Highlighted:</h3>
+					<div
+						class="bg-muted max-h-[200px] overflow-auto rounded border p-3 font-mono text-sm whitespace-pre-wrap"
+					>
+						{@html getHighlightedText()}
+					</div>
+				</div>
+			{/if}
+
+			<!-- Matches List -->
+			{#if matches.length > 0}
+				<div>
+					<h3 class="mb-2 text-sm font-medium">Matches ({matches.length}):</h3>
+					<div class="max-h-[200px] space-y-2 overflow-auto">
+						{#each matches as match, index}
+							<div class="bg-muted rounded border p-2 text-sm">
+								<div class="flex items-start justify-between">
+									<span class="font-mono">{match[0]}</span>
+									<Badge variant="outline" class="text-xs">
+										Position: {match.index}
+									</Badge>
+								</div>
+								{#if match.length > 1}
+									<div class="text-muted-foreground mt-1 text-xs">
+										Groups: {match
+											.slice(1)
+											.map((group, i) => `$${i + 1}: "${group}"`)
+											.join(', ')}
+									</div>
+								{/if}
+							</div>
+						{/each}
+					</div>
+				</div>
+			{/if}
+
+			<!-- Actions -->
+			<div class="flex gap-2">
+				<Button onclick={testRegex} disabled={!pattern.trim()}>Test Regex</Button>
+				<Button variant="outline" onclick={clearAll}>Clear All</Button>
+				{#if pattern}
+					<Button variant="secondary" onclick={copyPattern}>Copy Pattern</Button>
+				{/if}
+				{#if matches.length > 0}
+					<Button variant="secondary" onclick={copyMatches}>Copy Matches</Button>
+				{/if}
+			</div>
+
+			<!-- Help -->
+			<div class="text-muted-foreground space-y-1 text-xs">
+				<p>
+					<strong>Common flags:</strong> g (global), i (case-insensitive), m (multiline), s (dotall)
+				</p>
+				<p><strong>Tip:</strong> Use capture groups () to extract parts of matches</p>
+			</div>
+		</CardContent>
+	</Card>
+</div>
diff --git a/src/routes/tools/url-tools/+page.svelte b/src/routes/tools/url-tools/+page.svelte
new file mode 100644
index 00000000..df5db081
--- /dev/null
+++ b/src/routes/tools/url-tools/+page.svelte
@@ -0,0 +1,248 @@
+<script lang="ts">
+	import { Button } from '$lib/components/ui/button/index.js';
+	import { Input } from '$lib/components/ui/input/index.js';
+	import {
+		Card,
+		CardContent,
+		CardDescription,
+		CardHeader,
+		CardTitle
+	} from '$lib/components/ui/card/index.js';
+	import { Tabs, TabsContent, TabsList, TabsTrigger } from '$lib/components/ui/tabs/index.js';
+	import { Badge } from '$lib/components/ui/badge/index.js';
+
+	let inputUrl = $state('');
+	let outputUrl = $state('');
+	let error = $state('');
+	let loading = $state(false);
+
+	function isValidUrl(string: string): boolean {
+		try {
+			new URL(string);
+			return true;
+		} catch (_) {
+			return false;
+		}
+	}
+
+	async function shortenUrl() {
+		if (!inputUrl.trim()) return;
+
+		if (!isValidUrl(inputUrl)) {
+			error = 'Please enter a valid URL (including http:// or https://)';
+			return;
+		}
+
+		loading = true;
+		error = '';
+
+		try {
+			// Using TinyURL API for simplicity
+			const response = await fetch(
+				`https://tinyurl.com/api-create.php?url=${encodeURIComponent(inputUrl)}`
+			);
+			const shortUrl = await response.text();
+
+			if (shortUrl.startsWith('https://tinyurl.com/')) {
+				outputUrl = shortUrl;
+			} else {
+				error = 'Failed to shorten URL. Please try again.';
+			}
+		} catch (e) {
+			error = 'Network error. Please check your connection and try again.';
+		} finally {
+			loading = false;
+		}
+	}
+
+	async function expandUrl() {
+		if (!inputUrl.trim()) return;
+
+		if (!isValidUrl(inputUrl)) {
+			error = 'Please enter a valid URL';
+			return;
+		}
+
+		loading = true;
+		error = '';
+
+		try {
+			// For URL expansion, we'll use a simple fetch to follow redirects
+			const response = await fetch(
+				`https://httpbin.org/redirect-to?url=${encodeURIComponent(inputUrl)}`,
+				{
+					method: 'HEAD',
+					redirect: 'follow'
+				}
+			);
+
+			outputUrl = response.url;
+		} catch (e) {
+			// Fallback: just show the input URL as many short URLs don't allow CORS
+			outputUrl = inputUrl;
+			error =
+				'Could not expand URL due to CORS restrictions. The URL might be valid but cannot be expanded in the browser.';
+		} finally {
+			loading = false;
+		}
+	}
+
+	function clearAll() {
+		inputUrl = '';
+		outputUrl = '';
+		error = '';
+	}
+
+	function copyToClipboard() {
+		if (outputUrl) {
+			navigator.clipboard.writeText(outputUrl);
+		}
+	}
+
+	function analyzeUrl() {
+		if (!inputUrl.trim() || !isValidUrl(inputUrl)) return null;
+
+		try {
+			const url = new URL(inputUrl);
+			return {
+				protocol: url.protocol,
+				hostname: url.hostname,
+				pathname: url.pathname,
+				search: url.search,
+				hash: url.hash,
+				port: url.port
+			};
+		} catch {
+			return null;
+		}
+	}
+
+	const urlAnalysis = $derived(() => analyzeUrl());
+</script>
+
+<div class="flex h-full flex-col items-center justify-center gap-4 p-4">
+	<Card class="w-full max-w-4xl">
+		<CardHeader>
+			<CardTitle>URL Tools</CardTitle>
+			<CardDescription>Shorten URLs, expand short URLs, and analyze URL components</CardDescription>
+		</CardHeader>
+		<CardContent class="space-y-4">
+			<Tabs value="shorten" class="w-full">
+				<TabsList class="grid w-full grid-cols-3">
+					<TabsTrigger value="shorten">Shorten</TabsTrigger>
+					<TabsTrigger value="expand">Expand</TabsTrigger>
+					<TabsTrigger value="analyze">Analyze</TabsTrigger>
+				</TabsList>
+
+				<TabsContent value="shorten" class="space-y-4">
+					<div>
+						<Input
+							bind:value={inputUrl}
+							placeholder="Enter URL to shorten (e.g., https://example.com/very/long/url)"
+							class="w-full"
+						/>
+					</div>
+					<Button onclick={shortenUrl} disabled={!inputUrl.trim() || loading}>
+						{loading ? 'Shortening...' : 'Shorten URL'}
+					</Button>
+				</TabsContent>
+
+				<TabsContent value="expand" class="space-y-4">
+					<div>
+						<Input
+							bind:value={inputUrl}
+							placeholder="Enter short URL to expand (e.g., https://tinyurl.com/example)"
+							class="w-full"
+						/>
+					</div>
+					<Button onclick={expandUrl} disabled={!inputUrl.trim() || loading}>
+						{loading ? 'Expanding...' : 'Expand URL'}
+					</Button>
+				</TabsContent>
+
+				<TabsContent value="analyze" class="space-y-4">
+					<div>
+						<Input
+							bind:value={inputUrl}
+							placeholder="Enter URL to analyze (e.g., https://example.com:8080/path?query=value#section)"
+							class="w-full"
+						/>
+					</div>
+
+					{#if urlAnalysis()}
+						<div class="space-y-2">
+							<h3 class="text-lg font-semibold">URL Components:</h3>
+							<div class="grid gap-2 text-sm">
+								<div class="bg-muted flex items-center justify-between rounded p-2">
+									<span class="font-medium">Protocol:</span>
+									<Badge variant="outline">{urlAnalysis()?.protocol}</Badge>
+								</div>
+								<div class="bg-muted flex items-center justify-between rounded p-2">
+									<span class="font-medium">Hostname:</span>
+									<Badge variant="outline">{urlAnalysis()?.hostname}</Badge>
+								</div>
+								{#if urlAnalysis()?.port}
+									<div class="bg-muted flex items-center justify-between rounded p-2">
+										<span class="font-medium">Port:</span>
+										<Badge variant="outline">{urlAnalysis()?.port}</Badge>
+									</div>
+								{/if}
+								{#if urlAnalysis()?.pathname && urlAnalysis()?.pathname !== '/'}
+									<div class="bg-muted flex items-center justify-between rounded p-2">
+										<span class="font-medium">Path:</span>
+										<Badge variant="outline" class="max-w-xs truncate"
+											>{urlAnalysis()?.pathname}</Badge
+										>
+									</div>
+								{/if}
+								{#if urlAnalysis()?.search}
+									<div class="bg-muted flex items-center justify-between rounded p-2">
+										<span class="font-medium">Query:</span>
+										<Badge variant="outline" class="max-w-xs truncate"
+											>{urlAnalysis()?.search}</Badge
+										>
+									</div>
+								{/if}
+								{#if urlAnalysis()?.hash}
+									<div class="bg-muted flex items-center justify-between rounded p-2">
+										<span class="font-medium">Fragment:</span>
+										<Badge variant="outline" class="max-w-xs truncate">{urlAnalysis()?.hash}</Badge>
+									</div>
+								{/if}
+							</div>
+						</div>
+					{/if}
+				</TabsContent>
+			</Tabs>
+
+			<div class="flex gap-2">
+				<Button variant="outline" onclick={clearAll}>Clear All</Button>
+				{#if outputUrl}
+					<Button variant="secondary" onclick={copyToClipboard}>Copy Result</Button>
+				{/if}
+			</div>
+
+			{#if error}
+				<div class="text-destructive bg-destructive/10 rounded border p-3">
+					{error}
+				</div>
+			{/if}
+
+			{#if outputUrl && outputUrl !== inputUrl}
+				<div>
+					<h3 class="mb-2 text-lg font-semibold">Result:</h3>
+					<div class="bg-muted rounded border p-3 break-all">
+						<a
+							href={outputUrl}
+							target="_blank"
+							rel="noopener noreferrer"
+							class="text-blue-600 hover:underline"
+						>
+							{outputUrl}
+						</a>
+					</div>
+				</div>
+			{/if}
+		</CardContent>
+	</Card>
+</div>

From 48a061a095358270cf9cde7397edbe6f171e37ad Mon Sep 17 00:00:00 2001
From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com>
Date: Tue, 30 Sep 2025 09:13:52 +0000
Subject: [PATCH 3/3] fix: Address UI feedback - update copy buttons, remove
 problematic features, fix layout issues

Co-authored-by: Inglan <96573515+Inglan@users.noreply.github.com>
---
 src/routes/tools/ascii-art/+page.svelte       |  60 +------
 src/routes/tools/color-picker/+page.svelte    |  15 +-
 src/routes/tools/lorem-generator/+page.svelte |  64 ++-----
 .../tools/markdown-preview/+page.svelte       | 156 +++++++++---------
 src/routes/tools/url-tools/+page.svelte       |  50 +-----
 5 files changed, 107 insertions(+), 238 deletions(-)

diff --git a/src/routes/tools/ascii-art/+page.svelte b/src/routes/tools/ascii-art/+page.svelte
index 4f873d44..72aea053 100644
--- a/src/routes/tools/ascii-art/+page.svelte
+++ b/src/routes/tools/ascii-art/+page.svelte
@@ -8,16 +8,9 @@
 		CardHeader,
 		CardTitle
 	} from '$lib/components/ui/card/index.js';
-	import {
-		Select,
-		SelectContent,
-		SelectItem,
-		SelectTrigger
-	} from '$lib/components/ui/select/index.js';
 
 	let inputText = $state('');
 	let output = $state('');
-	let font = $state('block');
 
 	// Simple ASCII art fonts
 	const fonts = {
@@ -51,38 +44,6 @@
 			' ': ['     ', '     ', '     ', '     ', '     '],
 			'!': ['  █  ', '  █  ', '  █  ', '     ', '  █  '],
 			'?': ['█████', '    █', '  ██ ', '     ', '  █  ']
-		},
-
-		small: {
-			A: ['█▀█', '█▀█', '█▄█'],
-			B: ['█▀▄', '█▀▄', '█▄▀'],
-			C: ['▄▀█', '█▄▄', '▀▀▀'],
-			D: ['█▀▄', '█▄█', '█▄▀'],
-			E: ['█▀▀', '█▀▀', '█▄▄'],
-			F: ['█▀▀', '█▀▀', '█▄▄'],
-			G: ['▄▀█', '█▄█', '▀▀█'],
-			H: ['█▄█', '█▀█', '█▄█'],
-			I: ['█', '█', '█'],
-			J: ['▄▄█', '▄▄█', '▀▀▀'],
-			K: ['█▄▀', '██▄', '█▄█'],
-			L: ['█▄▄', '█▄▄', '▀▀▀'],
-			M: ['█▄█', '█▀█', '█▄█'],
-			N: ['█▄█', '█▀█', '█▄█'],
-			O: ['▄▀█', '█▄█', '▀▀▀'],
-			P: ['█▀▄', '█▀▄', '█▄▄'],
-			Q: ['▄▀█', '█▄█', '▀▀█'],
-			R: ['█▀▄', '█▀▄', '█▄█'],
-			S: ['▄▀▀', '▀▀▄', '▄▄▀'],
-			T: ['▀█▀', '▄█▄', '▀▀▀'],
-			U: ['█▄█', '█▄█', '▀▀▀'],
-			V: ['█▄█', '▀█▀', '▄▀▄'],
-			W: ['█▄█', '█▀█', '▀▄▀'],
-			X: ['█▄█', '▀█▀', '█▄█'],
-			Y: ['█▄█', '▀█▀', '▄▀▄'],
-			Z: ['▀▀▀', '▄▀▄', '▀▀▀'],
-			' ': ['   ', '   ', '   '],
-			'!': ['█', '█', '█'],
-			'?': ['▀▀', '▄▀', '▀▀']
 		}
 	};
 
@@ -92,7 +53,7 @@
 			return;
 		}
 
-		const selectedFont = fonts[font as keyof typeof fonts];
+		const selectedFont = fonts.block;
 		const text = inputText.toUpperCase();
 		const lines: string[] = [];
 
@@ -133,7 +94,7 @@
 		output = '';
 	}
 
-	// Generate ASCII art when input or font changes
+	// Auto-generate ASCII art when input changes
 	$effect(() => {
 		generateAsciiArt();
 	});
@@ -143,10 +104,10 @@
 	<Card class="w-full max-w-4xl">
 		<CardHeader>
 			<CardTitle>ASCII Art Generator</CardTitle>
-			<CardDescription>Convert text into ASCII art using different fonts</CardDescription>
+			<CardDescription>Convert text into ASCII art</CardDescription>
 		</CardHeader>
 		<CardContent class="space-y-4">
-			<div class="grid grid-cols-1 gap-4 md:grid-cols-2">
+			<div class="grid grid-cols-1 gap-4">
 				<div>
 					<label for="text" class="mb-2 block text-sm font-medium">Text to Convert:</label>
 					<Input
@@ -157,19 +118,6 @@
 						class="w-full"
 					/>
 				</div>
-
-				<div>
-					<label for="font" class="mb-2 block text-sm font-medium">Font Style:</label>
-					<Select bind:value={font}>
-						<SelectTrigger>
-							{font === 'block' ? 'Block' : 'Small'}
-						</SelectTrigger>
-						<SelectContent>
-							<SelectItem value="block">Block</SelectItem>
-							<SelectItem value="small">Small</SelectItem>
-						</SelectContent>
-					</Select>
-				</div>
 			</div>
 
 			<div class="flex gap-2">
diff --git a/src/routes/tools/color-picker/+page.svelte b/src/routes/tools/color-picker/+page.svelte
index 9ffa4ee1..a788c1d5 100644
--- a/src/routes/tools/color-picker/+page.svelte
+++ b/src/routes/tools/color-picker/+page.svelte
@@ -9,6 +9,8 @@
 		CardTitle
 	} from '$lib/components/ui/card/index.js';
 	import { Badge } from '$lib/components/ui/badge/index.js';
+	import { toast } from 'svelte-sonner';
+	import Copy from '@lucide/svelte/icons/copy';
 
 	let selectedColor = $state('#3b82f6');
 	let colorHistory = $state<string[]>([]);
@@ -76,6 +78,7 @@
 
 	function copyToClipboard(value: string) {
 		navigator.clipboard.writeText(value);
+		toast.success('Color value copied to clipboard');
 	}
 
 	function generateRandomColor() {
@@ -143,9 +146,9 @@
 							<span class="font-mono text-sm">HEX:</span>
 							<div class="flex items-center gap-2">
 								<Badge variant="outline" class="font-mono">{selectedColor.toUpperCase()}</Badge>
-								<Button size="sm" variant="ghost" onclick={() => copyToClipboard(selectedColor)}
-									>Copy</Button
-								>
+								<Button size="sm" variant="ghost" onclick={() => copyToClipboard(selectedColor)}>
+									<Copy class="h-4 w-4" />
+								</Button>
 							</div>
 						</div>
 
@@ -160,8 +163,9 @@
 										size="sm"
 										variant="ghost"
 										onclick={() => copyToClipboard(`rgb(${rgb()?.r}, ${rgb()?.g}, ${rgb()?.b})`)}
-										>Copy</Button
 									>
+										<Copy class="h-4 w-4" />
+									</Button>
 								</div>
 							</div>
 						{/if}
@@ -177,8 +181,9 @@
 										size="sm"
 										variant="ghost"
 										onclick={() => copyToClipboard(`hsl(${hsl()?.h}, ${hsl()?.s}%, ${hsl()?.l}%)`)}
-										>Copy</Button
 									>
+										<Copy class="h-4 w-4" />
+									</Button>
 								</div>
 							</div>
 						{/if}
diff --git a/src/routes/tools/lorem-generator/+page.svelte b/src/routes/tools/lorem-generator/+page.svelte
index 1af41a2c..ea549944 100644
--- a/src/routes/tools/lorem-generator/+page.svelte
+++ b/src/routes/tools/lorem-generator/+page.svelte
@@ -9,15 +9,8 @@
 		CardTitle
 	} from '$lib/components/ui/card/index.js';
 	import { Textarea } from '$lib/components/ui/textarea/index.js';
-	import {
-		Select,
-		SelectContent,
-		SelectItem,
-		SelectTrigger
-	} from '$lib/components/ui/select/index.js';
 
 	let count = $state(5);
-	let type = $state('paragraphs');
 	let output = $state('');
 	let startWithLorem = $state(true);
 
@@ -187,34 +180,16 @@
 	function generate() {
 		const results: string[] = [];
 
-		switch (type) {
-			case 'words':
-				const words = getRandomWords(count, startWithLorem);
-				results.push(words.join(' '));
-				break;
-
-			case 'sentences':
-				for (let i = 0; i < count; i++) {
-					const sentence =
-						i === 0 && startWithLorem
-							? generateSentence().replace(/^Lorem/i, 'Lorem ipsum')
-							: generateSentence();
-					results.push(sentence);
-				}
-				break;
-
-			case 'paragraphs':
-				for (let i = 0; i < count; i++) {
-					let paragraph = generateParagraph();
-					if (i === 0 && startWithLorem) {
-						paragraph = paragraph.replace(/^[A-Za-z]+/, 'Lorem ipsum');
-					}
-					results.push(paragraph);
-				}
-				break;
+		// Always generate paragraphs
+		for (let i = 0; i < count; i++) {
+			let paragraph = generateParagraph();
+			if (i === 0 && startWithLorem) {
+				paragraph = paragraph.replace(/^[A-Za-z]+/, 'Lorem ipsum');
+			}
+			results.push(paragraph);
 		}
 
-		output = results.join(type === 'paragraphs' ? '\n\n' : '\n');
+		output = results.join('\n\n');
 	}
 
 	function copyToClipboard() {
@@ -242,26 +217,12 @@
 			<CardDescription>Generate placeholder text for your designs and layouts</CardDescription>
 		</CardHeader>
 		<CardContent class="space-y-4">
-			<div class="grid grid-cols-1 gap-4 md:grid-cols-3">
+			<div class="grid grid-cols-1 gap-4 md:grid-cols-2">
 				<div>
-					<label for="count" class="mb-2 block text-sm font-medium">Count:</label>
+					<label for="count" class="mb-2 block text-sm font-medium">Paragraphs:</label>
 					<Input id="count" type="number" bind:value={count} min="1" max="100" class="w-full" />
 				</div>
 
-				<div>
-					<label for="type" class="mb-2 block text-sm font-medium">Type:</label>
-					<Select bind:value={type}>
-						<SelectTrigger>
-							{type === 'words' ? 'Words' : type === 'sentences' ? 'Sentences' : 'Paragraphs'}
-						</SelectTrigger>
-						<SelectContent>
-							<SelectItem value="words">Words</SelectItem>
-							<SelectItem value="sentences">Sentences</SelectItem>
-							<SelectItem value="paragraphs">Paragraphs</SelectItem>
-						</SelectContent>
-					</Select>
-				</div>
-
 				<div class="flex items-end">
 					<label class="flex items-center space-x-2">
 						<input type="checkbox" bind:checked={startWithLorem} class="rounded" />
@@ -293,8 +254,9 @@
 				{#if output}
 					<p>
 						<strong>Generated:</strong>
-						{output.split(' ').length} words, {output.split(/[.!?]+/).filter((s) => s.trim())
-							.length} sentences
+						{count} paragraph{count !== 1 ? 's' : ''}, {output.split(' ').length} words, {output
+							.split(/[.!?]+/)
+							.filter((s) => s.trim()).length} sentences
 					</p>
 				{/if}
 			</div>
diff --git a/src/routes/tools/markdown-preview/+page.svelte b/src/routes/tools/markdown-preview/+page.svelte
index 73177039..139e8bcd 100644
--- a/src/routes/tools/markdown-preview/+page.svelte
+++ b/src/routes/tools/markdown-preview/+page.svelte
@@ -165,13 +165,13 @@ That's a horizontal rule above this text.
 </script>
 
 <div class="flex h-full flex-col items-center justify-center gap-4 p-4">
-	<Card class="h-[80vh] w-full max-w-6xl">
+	<Card class="flex max-h-[80vh] w-full max-w-6xl flex-col">
 		<CardHeader>
 			<CardTitle>Markdown Preview</CardTitle>
 			<CardDescription>Write markdown and see the live preview</CardDescription>
 		</CardHeader>
-		<CardContent class="h-full space-y-4">
-			<Tabs value="split" class="flex h-full flex-col">
+		<CardContent class="flex min-h-0 flex-1 flex-col space-y-4">
+			<Tabs value="split" class="flex min-h-0 flex-1 flex-col">
 				<div class="flex items-center justify-between">
 					<TabsList>
 						<TabsTrigger value="split">Split View</TabsTrigger>
@@ -186,16 +186,16 @@ That's a horizontal rule above this text.
 					</div>
 				</div>
 
-				<TabsContent value="split" class="grid h-full flex-1 grid-cols-2 gap-4">
-					<div class="flex h-full flex-col">
+				<TabsContent value="split" class="grid min-h-0 flex-1 grid-cols-2 gap-4">
+					<div class="flex min-h-0 flex-col">
 						<h3 class="mb-2 text-sm font-medium">Markdown Input:</h3>
 						<Textarea
 							bind:value={markdownText}
 							placeholder="Enter your markdown here..."
-							class="flex-1 font-mono text-sm"
+							class="flex-1 resize-none font-mono text-sm"
 						/>
 					</div>
-					<div class="flex h-full flex-col">
+					<div class="flex min-h-0 flex-col">
 						<h3 class="mb-2 text-sm font-medium">Live Preview:</h3>
 						<div
 							class="bg-background prose prose-sm max-w-none flex-1 overflow-auto rounded-md border p-4"
@@ -205,15 +205,15 @@ That's a horizontal rule above this text.
 					</div>
 				</TabsContent>
 
-				<TabsContent value="markdown" class="h-full flex-1">
+				<TabsContent value="markdown" class="min-h-0 flex-1">
 					<Textarea
 						bind:value={markdownText}
 						placeholder="Enter your markdown here..."
-						class="h-full font-mono text-sm"
+						class="h-full resize-none font-mono text-sm"
 					/>
 				</TabsContent>
 
-				<TabsContent value="preview" class="h-full flex-1">
+				<TabsContent value="preview" class="min-h-0 flex-1">
 					<div
 						class="bg-background prose prose-sm h-full max-w-none overflow-auto rounded-md border p-4"
 					>
@@ -226,89 +226,89 @@ That's a horizontal rule above this text.
 </div>
 
 <style>
-	:global(.prose h1) { 
-		font-size: 1.5rem; 
-		font-weight: bold; 
-		margin-bottom: 1rem; 
+	:global(.prose h1) {
+		font-size: 1.5rem;
+		font-weight: bold;
+		margin-bottom: 1rem;
 	}
-	:global(.prose h2) { 
-		font-size: 1.25rem; 
-		font-weight: bold; 
-		margin-bottom: 0.75rem; 
+	:global(.prose h2) {
+		font-size: 1.25rem;
+		font-weight: bold;
+		margin-bottom: 0.75rem;
 	}
-	:global(.prose h3) { 
-		font-size: 1.125rem; 
-		font-weight: bold; 
-		margin-bottom: 0.5rem; 
+	:global(.prose h3) {
+		font-size: 1.125rem;
+		font-weight: bold;
+		margin-bottom: 0.5rem;
 	}
-	:global(.prose p) { 
-		margin-bottom: 1rem; 
+	:global(.prose p) {
+		margin-bottom: 1rem;
 	}
-	:global(.prose ul) { 
-		margin-bottom: 1rem; 
-		padding-left: 1.25rem; 
-		list-style-type: disc; 
+	:global(.prose ul) {
+		margin-bottom: 1rem;
+		padding-left: 1.25rem;
+		list-style-type: disc;
 	}
-	:global(.prose ol) { 
-		margin-bottom: 1rem; 
-		padding-left: 1.25rem; 
-		list-style-type: decimal; 
+	:global(.prose ol) {
+		margin-bottom: 1rem;
+		padding-left: 1.25rem;
+		list-style-type: decimal;
 	}
-	:global(.prose li) { 
-		margin-bottom: 0.25rem; 
+	:global(.prose li) {
+		margin-bottom: 0.25rem;
 	}
-	:global(.prose blockquote) { 
-		margin-bottom: 1rem; 
-		border-left: 4px solid #d1d5db; 
-		padding-left: 1rem; 
-		font-style: italic; 
+	:global(.prose blockquote) {
+		margin-bottom: 1rem;
+		border-left: 4px solid #d1d5db;
+		padding-left: 1rem;
+		font-style: italic;
 	}
-	:global(.prose code) { 
-		border-radius: 0.25rem; 
-		background-color: #f3f4f6; 
-		padding: 0.125rem 0.25rem; 
-		font-family: ui-monospace, SFMono-Regular, 'SF Mono', monospace; 
-		font-size: 0.875rem; 
+	:global(.prose code) {
+		border-radius: 0.25rem;
+		background-color: #f3f4f6;
+		padding: 0.125rem 0.25rem;
+		font-family: ui-monospace, SFMono-Regular, 'SF Mono', monospace;
+		font-size: 0.875rem;
 	}
-	:global(.prose pre) { 
-		margin-bottom: 1rem; 
-		overflow: auto; 
-		border-radius: 0.25rem; 
-		background-color: #f3f4f6; 
-		padding: 1rem; 
+	:global(.prose pre) {
+		margin-bottom: 1rem;
+		overflow: auto;
+		border-radius: 0.25rem;
+		background-color: #f3f4f6;
+		padding: 1rem;
 	}
-	:global(.prose pre code) { 
-		background-color: transparent; 
-		padding: 0; 
+	:global(.prose pre code) {
+		background-color: transparent;
+		padding: 0;
 	}
-	:global(.prose a) { 
-		color: #2563eb; 
-		text-decoration: none; 
+	:global(.prose a) {
+		color: #2563eb;
+		text-decoration: none;
 	}
-	:global(.prose a:hover) { 
-		text-decoration: underline; 
+	:global(.prose a:hover) {
+		text-decoration: underline;
 	}
-	:global(.prose hr) { 
-		margin: 1.5rem 0; 
-		border-top: 1px solid #d1d5db; 
-		border-bottom: none; 
-		border-left: none; 
-		border-right: none; 
+	:global(.prose hr) {
+		margin: 1.5rem 0;
+		border-top: 1px solid #d1d5db;
+		border-bottom: none;
+		border-left: none;
+		border-right: none;
 	}
-	:global(.prose table) { 
-		margin-bottom: 1rem; 
-		width: 100%; 
-		border-collapse: collapse; 
-		border: 1px solid #d1d5db; 
+	:global(.prose table) {
+		margin-bottom: 1rem;
+		width: 100%;
+		border-collapse: collapse;
+		border: 1px solid #d1d5db;
 	}
-	:global(.prose th) { 
-		border: 1px solid #d1d5db; 
-		padding: 0.5rem 1rem; 
-		background-color: #f3f4f6; 
-		font-weight: bold; 
+	:global(.prose th) {
+		border: 1px solid #d1d5db;
+		padding: 0.5rem 1rem;
+		background-color: #f3f4f6;
+		font-weight: bold;
 	}
-	:global(.prose td) { 
-		border: 1px solid #d1d5db; 
-		padding: 0.5rem 1rem; 
+	:global(.prose td) {
+		border: 1px solid #d1d5db;
+		padding: 0.5rem 1rem;
 	}
 </style>
diff --git a/src/routes/tools/url-tools/+page.svelte b/src/routes/tools/url-tools/+page.svelte
index df5db081..67e59aff 100644
--- a/src/routes/tools/url-tools/+page.svelte
+++ b/src/routes/tools/url-tools/+page.svelte
@@ -55,38 +55,6 @@
 		}
 	}
 
-	async function expandUrl() {
-		if (!inputUrl.trim()) return;
-
-		if (!isValidUrl(inputUrl)) {
-			error = 'Please enter a valid URL';
-			return;
-		}
-
-		loading = true;
-		error = '';
-
-		try {
-			// For URL expansion, we'll use a simple fetch to follow redirects
-			const response = await fetch(
-				`https://httpbin.org/redirect-to?url=${encodeURIComponent(inputUrl)}`,
-				{
-					method: 'HEAD',
-					redirect: 'follow'
-				}
-			);
-
-			outputUrl = response.url;
-		} catch (e) {
-			// Fallback: just show the input URL as many short URLs don't allow CORS
-			outputUrl = inputUrl;
-			error =
-				'Could not expand URL due to CORS restrictions. The URL might be valid but cannot be expanded in the browser.';
-		} finally {
-			loading = false;
-		}
-	}
-
 	function clearAll() {
 		inputUrl = '';
 		outputUrl = '';
@@ -124,13 +92,12 @@
 	<Card class="w-full max-w-4xl">
 		<CardHeader>
 			<CardTitle>URL Tools</CardTitle>
-			<CardDescription>Shorten URLs, expand short URLs, and analyze URL components</CardDescription>
+			<CardDescription>Shorten URLs and analyze URL components</CardDescription>
 		</CardHeader>
 		<CardContent class="space-y-4">
 			<Tabs value="shorten" class="w-full">
-				<TabsList class="grid w-full grid-cols-3">
+				<TabsList class="grid w-full grid-cols-2">
 					<TabsTrigger value="shorten">Shorten</TabsTrigger>
-					<TabsTrigger value="expand">Expand</TabsTrigger>
 					<TabsTrigger value="analyze">Analyze</TabsTrigger>
 				</TabsList>
 
@@ -147,19 +114,6 @@
 					</Button>
 				</TabsContent>
 
-				<TabsContent value="expand" class="space-y-4">
-					<div>
-						<Input
-							bind:value={inputUrl}
-							placeholder="Enter short URL to expand (e.g., https://tinyurl.com/example)"
-							class="w-full"
-						/>
-					</div>
-					<Button onclick={expandUrl} disabled={!inputUrl.trim() || loading}>
-						{loading ? 'Expanding...' : 'Expand URL'}
-					</Button>
-				</TabsContent>
-
 				<TabsContent value="analyze" class="space-y-4">
 					<div>
 						<Input