`;const blob = new Blob([excelContent], { type: "application/vnd.ms-excel;charset=utf-8;" }); const link = document.createElement("a"); link.href = URL.createObjectURL(blob); link.download = filename; document.body.appendChild(link); link.click(); document.body.removeChild(link); }function loadJsPdf(callback) { if (window.jspdf && window.jspdf.jsPDF) { callback(); return; }const script = document.createElement("script"); script.src = "https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.1/jspdf.umd.min.js"; script.onload = callback; script.onerror = () => alert("PDF library could not load. Please use Excel or PNG download."); document.head.appendChild(script); }function downloadSinglePdf() { if (!currentResult) { alert("Please convert a color first."); return; }loadJsPdf(function () { const jsPDF = window.jspdf.jsPDF; const doc = new jsPDF(); const margin = 14; let y = 18; const pageWidth = doc.internal.pageSize.getWidth();doc.setFont("helvetica", "bold"); doc.setFontSize(16); doc.text("Eco Jersey Color Conversion Result", margin, y);y += 10; doc.setDrawColor(140, 187, 102); doc.line(margin, y, pageWidth - margin, y);y += 10; doc.setFillColor(currentResult.rgb.r, currentResult.rgb.g, currentResult.rgb.b); doc.roundedRect(margin, y, 45, 30, 3, 3, "F");y += 42; doc.setFont("helvetica", "normal"); doc.setFontSize(10);const lines = doc.splitTextToSize($("#ejCsSummary").value, pageWidth - margin * 2); lines.forEach(line => { if (y > 280) { doc.addPage(); y = 18; } doc.text(line, margin, y); y += 6; });doc.save("eco-jersey-color-conversion-result.pdf"); }); }function downloadSingleExcel() { const summary = $("#ejCsSummary").value.trim();if (!summary) { alert("Please convert a color first."); return; }downloadExcelFile("eco-jersey-color-conversion-result.xls", "Eco Jersey Color Conversion Result", rowsFromSummary(summary)); }function downloadComparisonExcel() { if (!comparison.length) { alert("Please add at least one color to comparison."); return; }const rows = [ ["HEX", "RGB", "CMYK", "Pantone C Approx", "TCX Approx", "Name", "Family", "Tone", "Confidence"] ];comparison.forEach(item => { rows.push([ item.codes.hex, item.codes.rgbText, item.codes.cmykText, item.best.pantone, item.best.tcx, item.best.name, item.best.family, item.best.tone, item.confidence ]); });downloadExcelFile("eco-jersey-color-comparison.xls", "Eco Jersey Color Comparison", rows); }function downloadComparisonPdf() { if (!comparison.length) { alert("Please add at least one color to comparison."); return; }loadJsPdf(function () { const jsPDF = window.jspdf.jsPDF; const doc = new jsPDF(); const margin = 14; let y = 18;doc.setFont("helvetica", "bold"); doc.setFontSize(16); doc.text("Eco Jersey Color Comparison", margin, y);y += 12; doc.setFont("helvetica", "normal"); doc.setFontSize(9);comparison.forEach(item => { if (y > 260) { doc.addPage(); y = 18; }doc.setFillColor(item.rgb.r, item.rgb.g, item.rgb.b); doc.roundedRect(margin, y, 22, 14, 2, 2, "F");doc.text(`${item.codes.hex} | ${item.codes.rgbText} | ${item.best.pantone} | ${item.best.tcx} | ${item.confidence}`, margin + 28, y + 9); y += 22; });doc.save("eco-jersey-color-comparison.pdf"); }); }function downloadCanvas(canvas, filename) { const link = document.createElement("a"); link.download = filename; link.href = canvas.toDataURL("image/png"); link.click(); }function downloadSinglePng() { if (!currentResult) { alert("Please convert a color first."); return; }const canvas = document.createElement("canvas"); canvas.width = 1100; canvas.height = 620; const ctx = canvas.getContext("2d");ctx.fillStyle = "#ffffff"; ctx.fillRect(0, 0, canvas.width, canvas.height);ctx.fillStyle = currentResult.codes.hex; ctx.fillRect(50, 60, 1000, 250);ctx.fillStyle = contrastColor(currentResult.rgb); ctx.font = "bold 46px Arial"; ctx.fillText(currentResult.codes.hex, 80, 250);ctx.fillStyle = "#152018"; ctx.font = "bold 32px Arial"; ctx.fillText("Eco Jersey Color Conversion Result", 50, 375);ctx.font = "22px Arial"; ctx.fillText(currentResult.codes.rgbText, 50, 420); ctx.fillText(currentResult.codes.cmykText, 50, 455); ctx.fillText("Pantone C Approx: " + currentResult.best.pantone, 50, 490); ctx.fillText("TCX Approx: " + currentResult.best.tcx, 50, 525); ctx.fillText("Nearest Match: " + currentResult.best.name, 50, 560);downloadCanvas(canvas, "eco-jersey-color-swatch.png"); }function downloadComparisonPng() { if (!comparison.length) { alert("Please add at least one color to comparison."); return; }const width = 1200; const rowHeight = 120; const height = 150 + comparison.length * rowHeight; const canvas = document.createElement("canvas"); canvas.width = width; canvas.height = height; const ctx = canvas.getContext("2d");ctx.fillStyle = "#ffffff"; ctx.fillRect(0, 0, width, height);ctx.fillStyle = "#152018"; ctx.font = "bold 38px Arial"; ctx.fillText("Eco Jersey Color Comparison Palette", 50, 70);comparison.forEach((item, index) => { const y = 120 + index * rowHeight; ctx.fillStyle = item.codes.hex; ctx.fillRect(50, y, 170, 82);ctx.fillStyle = "#152018"; ctx.font = "bold 22px Arial"; ctx.fillText(item.codes.hex, 250, y + 25);ctx.font = "18px Arial"; ctx.fillText(item.codes.rgbText, 250, y + 52); ctx.fillText(item.best.pantone + " / " + item.best.tcx, 250, y + 78); });downloadCanvas(canvas, "eco-jersey-color-comparison-palette.png"); }function buildPalette() { const baseRgb = hexToRgb($("#ejCsPaletteBase").value); const type = $("#ejCsPaletteType").value; const baseHsl = rgbToHsl(baseRgb); let colors = [];function make(h, s, l, label) { const rgb = hslToRgb({ h, s, l }); const obj = buildColorObject(rgb, "palette", label); obj.paletteLabel = label; return obj; }if (type === "startup") { colors = [ buildColorObject(baseRgb, "palette", "Primary Brand Color"), make(baseHsl.h, Math.max(10, baseHsl.s - 18), Math.max(18, baseHsl.l - 28), "Dark Brand Shade"), make(baseHsl.h, Math.max(10, baseHsl.s - 20), Math.min(88, baseHsl.l + 25), "Light Brand Tint"), make(baseHsl.h + 35, Math.max(20, baseHsl.s - 10), Math.min(70, baseHsl.l + 6), "Warm Accent"), make(baseHsl.h + 180, Math.max(20, baseHsl.s - 5), Math.max(28, baseHsl.l - 5), "Contrast Accent"), buildColorObject(hexToRgb("#F5F1E8"), "palette", "Off White Neutral"), buildColorObject(hexToRgb("#2D2926"), "palette", "Charcoal Text") ]; }if (type === "mono") { colors = [ make(baseHsl.h, baseHsl.s, 18, "Dark Shade"), make(baseHsl.h, baseHsl.s, 32, "Deep Shade"), buildColorObject(baseRgb, "palette", "Base Color"), make(baseHsl.h, baseHsl.s, 68, "Soft Tint"), make(baseHsl.h, baseHsl.s, 86, "Light Tint") ]; }if (type === "analogous") { colors = [ make(baseHsl.h - 40, baseHsl.s, baseHsl.l, "Analogous 1"), make(baseHsl.h - 20, baseHsl.s, baseHsl.l, "Analogous 2"), buildColorObject(baseRgb, "palette", "Base Color"), make(baseHsl.h + 20, baseHsl.s, baseHsl.l, "Analogous 3"), make(baseHsl.h + 40, baseHsl.s, baseHsl.l, "Analogous 4") ]; }if (type === "complementary") { colors = [ buildColorObject(baseRgb, "palette", "Base Color"), make(baseHsl.h + 180, baseHsl.s, baseHsl.l, "Complementary"), make(baseHsl.h, baseHsl.s, Math.max(18, baseHsl.l - 25), "Base Dark"), make(baseHsl.h + 180, Math.max(15, baseHsl.s - 15), Math.min(82, baseHsl.l + 22), "Complementary Light"), buildColorObject(hexToRgb("#F5F1E8"), "palette", "Neutral") ]; }if (type === "triadic") { colors = [ buildColorObject(baseRgb, "palette", "Base Color"), make(baseHsl.h + 120, baseHsl.s, baseHsl.l, "Triadic 1"), make(baseHsl.h + 240, baseHsl.s, baseHsl.l, "Triadic 2"), make(baseHsl.h, Math.max(15, baseHsl.s - 20), 88, "Light Base"), buildColorObject(hexToRgb("#2D2926"), "palette", "Dark Neutral") ]; }if (type === "earth") { colors = [ buildColorObject(baseRgb, "palette", "Base Color"), buildColorObject(hexToRgb("#6B8E23"), "palette", "Olive Accent"), buildColorObject(hexToRgb("#B7A99A"), "palette", "Khaki Neutral"), buildColorObject(hexToRgb("#8A4B2A"), "palette", "Rust Accent"), buildColorObject(hexToRgb("#2D2926"), "palette", "Charcoal"), buildColorObject(hexToRgb("#F5F1E8"), "palette", "Off White") ]; }if (type === "sport") { colors = [ buildColorObject(baseRgb, "palette", "Base Color"), make(baseHsl.h + 180, Math.min(100, baseHsl.s + 20), 50, "High Contrast"), buildColorObject(hexToRgb("#000000"), "palette", "Black"), buildColorObject(hexToRgb("#FFFFFF"), "palette", "White"), buildColorObject(hexToRgb("#E9FF32"), "palette", "Hi-Vis Accent") ]; }currentPalette = colors; renderPalette(); }function renderPalette() { if (!currentPalette.length) return;$("#ejCsPaletteGrid").innerHTML = currentPalette.map(item => colorCardHtml({ name: item.paletteLabel || item.inputValue || item.best.name, family: item.best.family, tone: item.best.tone, hex: item.codes.hex, pantone: item.best.pantone, tcx: item.best.tcx, use: item.best.use, rgb: item.rgb, codes: item.codes })).join("");$("#ejCsPaletteSummary").value = [ "Eco Jersey Startup Brand Palette", "--------------------------------", ...currentPalette.map((item, index) => { return [ "Color " + (index + 1) + ": " + (item.paletteLabel || item.best.name), "HEX: " + item.codes.hex, "RGB: " + item.codes.rgbText, "CMYK: " + item.codes.cmykText, "Pantone C Approx: " + item.best.pantone, "TCX Approx: " + item.best.tcx ].join("\n"); }), "Note: These colors are planning references only. Final apparel production shades should be confirmed with physical samples." ].join("\n\n"); }function downloadPaletteExcel() { if (!currentPalette.length) { alert("Please build a palette first."); return; }const rows = [ ["Label", "HEX", "RGB", "CMYK", "Pantone C Approx", "TCX Approx", "Nearest Match", "Family", "Tone"] ];currentPalette.forEach(item => { rows.push([ item.paletteLabel || item.best.name, item.codes.hex, item.codes.rgbText, item.codes.cmykText, item.best.pantone, item.best.tcx, item.best.name, item.best.family, item.best.tone ]); });downloadExcelFile("eco-jersey-brand-palette.xls", "Eco Jersey Brand Palette", rows); }function downloadPalettePdf() { if (!currentPalette.length) { alert("Please build a palette first."); return; }loadJsPdf(function () { const jsPDF = window.jspdf.jsPDF; const doc = new jsPDF(); const margin = 14; let y = 18;doc.setFont("helvetica", "bold"); doc.setFontSize(16); doc.text("Eco Jersey Brand Palette", margin, y);y += 14; doc.setFont("helvetica", "normal"); doc.setFontSize(9);currentPalette.forEach(item => { if (y > 260) { doc.addPage(); y = 18; }doc.setFillColor(item.rgb.r, item.rgb.g, item.rgb.b); doc.roundedRect(margin, y, 24, 16, 2, 2, "F"); doc.text(`${item.paletteLabel || item.best.name} | ${item.codes.hex} | ${item.best.pantone} | ${item.best.tcx}`, margin + 30, y + 10); y += 24; });doc.save("eco-jersey-brand-palette.pdf"); }); }function downloadPalettePng() { if (!currentPalette.length) { alert("Please build a palette first."); return; }const width = 1200; const swatchHeight = 150; const height = 170 + currentPalette.length * swatchHeight; const canvas = document.createElement("canvas"); canvas.width = width; canvas.height = height; const ctx = canvas.getContext("2d");ctx.fillStyle = "#ffffff"; ctx.fillRect(0, 0, width, height);ctx.fillStyle = "#152018"; ctx.font = "bold 38px Arial"; ctx.fillText("Eco Jersey Brand Palette", 50, 70);currentPalette.forEach((item, index) => { const y = 120 + index * swatchHeight; ctx.fillStyle = item.codes.hex; ctx.fillRect(50, y, 230, 100);ctx.fillStyle = "#152018"; ctx.font = "bold 24px Arial"; ctx.fillText(item.paletteLabel || item.best.name, 310, y + 28); ctx.font = "18px Arial"; ctx.fillText(item.codes.hex + " | " + item.codes.rgbText, 310, y + 58); ctx.fillText(item.best.pantone + " / " + item.best.tcx, 310, y + 86); });downloadCanvas(canvas, "eco-jersey-brand-palette.png"); }function addPaletteToComparison() { if (!currentPalette.length) { alert("Please build a palette first."); return; }currentPalette.forEach(item => { if (comparison.length < 8) { const exists = comparison.some(c => c.codes.hex === item.codes.hex); if (!exists) comparison.push(JSON.parse(JSON.stringify(item))); } });renderComparison(); switchTab("compare"); }root.addEventListener("click", function (event) { const tab = event.target.closest(".ej-tab"); if (tab) { switchTab(tab.getAttribute("data-tab")); return; }const useBtn = event.target.closest("[data-use-color]"); if (useBtn) { const hex = useBtn.getAttribute("data-use-color"); $("#ejCsInputType").value = "hex"; $("#ejCsInput").value = hex; $("#ejCsPicker").value = hex; updateHelp(); convertColor(); switchTab("convert"); return; }const compareBtn = event.target.closest("[data-compare-color]"); if (compareBtn) { const hex = compareBtn.getAttribute("data-compare-color"); const rgb = hexToRgb(hex); addToComparison(buildColorObject(rgb, "library", hex)); switchTab("compare"); return; }const removeBtn = event.target.closest("[data-remove-compare]"); if (removeBtn) { removeFromComparison(parseInt(removeBtn.getAttribute("data-remove-compare"), 10)); return; }const codeBox = event.target.closest(".ej-code-box"); if (codeBox && currentResult) { const key = codeBox.getAttribute("data-copy-target"); const map = { hex: currentResult.codes.hex, rgb: currentResult.codes.rgbText, cmyk: currentResult.codes.cmykText, hsl: currentResult.codes.hslText, hsv: currentResult.codes.hsvText, lab: currentResult.codes.labText, pantone: currentResult.best.pantone, tcx: currentResult.best.tcx }; copyText(map[key] || ""); codeBox.style.transform = "scale(0.98)"; setTimeout(() => codeBox.style.transform = "", 160); } });$("#ejCsInputType").addEventListener("change", updateHelp);$("#ejCsPicker").addEventListener("input", function () { $("#ejCsInputType").value = "hex"; $("#ejCsInput").value = this.value.toUpperCase(); updateHelp(); });$("#ejCsConvert").addEventListener("click", convertColor); $("#ejCsReset").addEventListener("click", resetTool); $("#ejCsCopy").addEventListener("click", function () { const summary = $("#ejCsSummary").value.trim(); if (!summary) { alert("Please convert a color first."); return; } copyText(summary); $("#ejCsCopy").textContent = "Copied!"; setTimeout(() => $("#ejCsCopy").textContent = "Copy Result", 1600); });$("#ejCsAddCompare").addEventListener("click", function () { addToComparison(currentResult); switchTab("compare"); });$("#ejCsSinglePdf").addEventListener("click", downloadSinglePdf); $("#ejCsSingleExcel").addEventListener("click", downloadSingleExcel); $("#ejCsSinglePng").addEventListener("click", downloadSinglePng);$("#ejCsComparePdf").addEventListener("click", downloadComparisonPdf); $("#ejCsCompareExcel").addEventListener("click", downloadComparisonExcel); $("#ejCsComparePng").addEventListener("click", downloadComparisonPng); $("#ejCsClearCompare").addEventListener("click", function () { comparison = []; renderComparison(); });$("#ejCsSearch").addEventListener("input", renderLibrary); $("#ejCsFamily").addEventListener("change", renderLibrary); $("#ejCsTone").addEventListener("change", renderLibrary); $("#ejCsCodeView").addEventListener("change", renderLibrary);$("#ejCsBuildPalette").addEventListener("click", buildPalette); $("#ejCsUseCurrentColor").addEventListener("click", function () { if (!currentResult) { alert("Please convert a color first."); return; } $("#ejCsPaletteBase").value = currentResult.codes.hex; buildPalette(); });$("#ejCsPalettePdf").addEventListener("click", downloadPalettePdf); $("#ejCsPaletteExcel").addEventListener("click", downloadPaletteExcel); $("#ejCsPalettePng").addEventListener("click", downloadPalettePng); $("#ejCsAddPaletteCompare").addEventListener("click", addPaletteToComparison);root.addEventListener("keydown", function (event) { if (event.key === "Enter" && event.target.tagName !== "TEXTAREA") { event.preventDefault(); if (root.querySelector('[data-panel="convert"]').classList.contains("is-active")) { convertColor(); } } });updateHelp(); renderLibraryFilters(); renderLibrary(); renderComparison(); buildPalette();$("#ejCsInput").value = "#8CBB66"; convertColor(); })();