-
{result.filename}
- {result.sizeBytes && (
-
- {(result.sizeBytes / (1024 * 1024)).toFixed(2)} MB
-
- )}
+ {/* Batch Image Conversion Results */}
+ {batchResults.length > 1 && activeTool === 'image-convert' && (
+
+
+
+
+ Batch Output ({batchResults.length} files)
+
+
+ Converted to {targetImageFormat.split('/')[1].toUpperCase()} locally in-browser
+
+
+
+ {/* Total Savings Badge */}
+ {(() => {
+ const totalOrig = batchResults.reduce((sum, item) => sum + (item.originalSizeBytes || 0), 0);
+ const totalNew = batchResults.reduce((sum, item) => sum + (item.sizeBytes || 0), 0);
+ const diff = totalOrig - totalNew;
+ const pct = totalOrig > 0 ? Math.round((diff / totalOrig) * 100) : 0;
+ if (pct > 0) {
+ return (
+
+ Saved {pct}% ({(diff / (1024 * 1024)).toFixed(2)} MB less)
+
+ );
+ }
+ return null;
+ })()}
+ {/* Download All as ZIP Button */}
+
+
+ {/* Itemized Converted Files List */}
+
+ {batchResults.map((item, idx) => (
+
+
+ {item.downloadUrl && (
+
+ )}
+
+
+ {item.filename}
+
+ {item.sizeBytes && (
+
+ {(item.sizeBytes / 1024).toFixed(1)} KB
+ {item.originalSizeBytes && item.sizeBytes < item.originalSizeBytes && (
+
+ (-{Math.round(((item.originalSizeBytes - item.sizeBytes) / item.originalSizeBytes) * 100)}%)
+
+ )}
+
+ )}
+
+
+
+
+
+ Download
+
+
+ ))}
+
+
+
+
+ )}
+
+ {/* Single Result Section (for Single Image or PDF) */}
+ {result && (batchResults.length <= 1 || activeTool === 'images-to-pdf') && (
+
)}
+
+ {/* Color Format Converter Workspace */}
+ {activeTool === 'color-convert' && (
+
+ {/* Visual Swatch & Native Color Picker */}
+
+
+
document.getElementById('native-color-picker')?.click()}
+ >
+
+
+
handleColorChange(e.target.value)}
+ className="opacity-0 absolute inset-0 w-full h-full cursor-pointer"
+ />
+
+
+
+
+
+ handleColorChange(e.target.value)}
+ placeholder="e.g. #6366F1, rgb(99, 102, 241), or hsl(239, 84%, 67%)"
+ className="flex-1 bg-white dark:bg-neutral-900 border border-neutral-200 dark:border-neutral-800 rounded-xl px-3.5 py-2.5 text-xs sm:text-sm font-mono text-neutral-900 dark:text-neutral-100 outline-none focus:border-neutral-900 dark:focus:border-neutral-400"
+ />
+
+
+ Click the color swatch to open the visual picker, or type any color code.
+
+
+
+
+ {/* Quick Palette Presets */}
+
+
+ Quick Presets
+
+
+ {[
+ { name: 'Indigo', hex: '#6366F1' },
+ { name: 'Emerald', hex: '#10B981' },
+ { name: 'Sky', hex: '#0EA5E9' },
+ { name: 'Amber', hex: '#F59E0B' },
+ { name: 'Rose', hex: '#F43F5E' },
+ { name: 'Purple', hex: '#A855F7' },
+ { name: 'Slate', hex: '#475569' },
+ ].map((preset) => (
+
+ ))}
+
+
+
+ {/* Converted Format Grid */}
+ {colorData && (
+
+ {[
+ { label: 'HEX', val: colorData.hex },
+ { label: 'RGB', val: colorData.rgb },
+ { label: 'HSL', val: colorData.hsl },
+ { label: 'CMYK', val: colorData.cmyk },
+ ].map((fmt) => (
+
+
+
+ {fmt.label}
+
+
+ {fmt.val}
+
+
+
+
+ ))}
+
+ )}
+
+
+
+ )}
+
+ {/* Markdown ⇄ HTML Live Editor Workspace */}
+ {activeTool === 'markdown-html' && (
+
+ {/* Control Bar: Mode Toggle + Sample Loader */}
+
+
+
+
+
+
+
+
+
+ {/* Editor & Preview Panes */}
+
+ {/* Left: Source Text Input */}
+
+
+
+ {markdownDirection === 'md-to-html' ? 'Markdown Source' : 'HTML Source'}
+
+
+ {textInput.length} chars
+
+
+