Fashion Collection Theme Board Assembler

Fashion Collection Theme Board Assembler

1. Core Collection Identity

2. Color Palette

3. Materials & Silhouettes

Key Silhouettes / Influences

Configure details in the Data Configuration tab and click "Generate Theme Board" to see the full document here.

Error: Please enter a Collection Name and Mood Statement in the Data Configuration tab.

`; return; } // 1. Color Swatches HTML var swatchesHtml = data.colors.map(function(c) { var textClass = (parseInt(c.hex.substring(1), 16) > 0xffffff / 2) ? 'black' : 'white'; // Simple light/dark detection return `
${c.name}
${c.hex}
`; }).join(''); // 2. Materials HTML var materialsHtml = data.materials.map(function(m) { return `
  • ${m}
  • `; }).join(''); // 3. Silhouettes HTML var silhouettesHtml = data.silhouettes.map(function(s) { return `
  • ${s}
  • `; }).join(''); var analysisHtml = `

    ${data.name}

    Date Generated: ${new Date().toLocaleDateString()}

    MOOD & CONCEPT
    ${data.mood}
    COLOR PALETTE
    ${swatchesHtml || '

    No colors defined.

    '}
    MATERIALS
      ${materialsHtml || '

      No materials defined.

      '}
    SILHOUETTES & INFLUENCE
      ${silhouettesHtml || '

      No silhouettes defined.

      '}
    `; analysisContentDiv.innerHTML = analysisHtml; }; // --- Event Handlers (Config) --- // Update Hex Text on Color Picker Change colorHexInput.addEventListener('input', function() { colorHexTextInput.value = colorHexInput.value.toUpperCase(); }); // Add Color addColorBtn.addEventListener("click", function() { var hex = colorHexInput.value.toUpperCase(); var name = colorNameInput.value.trim() || hex; if (appState.colors.some(function(c) { return c.hex === hex; })) { alert("This color HEX code is already in the palette."); return; } var newId = appState.colors.length > 0 ? appState.colors[appState.colors.length - 1].id + 1 : 1; appState.colors.push({ id: newId, name: name, hex: hex }); renderConfigLists(); saveState(); colorNameInput.value = ""; }); // Add Material addMaterialBtn.addEventListener("click", function() { var material = materialInput.value.trim(); if (material && !appState.materials.includes(material)) { appState.materials.push(material); materialInput.value = ""; renderConfigLists(); saveState(); } else if (material) { alert("Material already added."); } }); // Add Silhouette addSilhouetteBtn.addEventListener("click", function() { var silhouette = silhouetteInput.value.trim(); if (silhouette && !appState.silhouettes.includes(silhouette)) { appState.silhouettes.push(silhouette); silhouetteInput.value = ""; renderConfigLists(); saveState(); } else if (silhouette) { alert("Silhouette already added."); } }); // Remove Items (Delegation) toolContainer.addEventListener("click", function(e) { if (e.target.classList.contains("ftb-remove-btn-sm")) { var type = e.target.dataset.type; if (type === 'color') { var idToRemove = parseInt(e.target.dataset.id); appState.colors = appState.colors.filter(function(c) { return c.id !== idToRemove; }); } else if (type === 'material') { var nameToRemove = e.target.dataset.name; appState.materials = appState.materials.filter(function(m) { return m !== nameToRemove; }); } else if (type === 'silhouette') { var nameToRemove = e.target.dataset.name; appState.silhouettes = appState.silhouettes.filter(function(s) { return s !== nameToRemove; }); } renderConfigLists(); saveState(); } }); // Generate Button generateBtn.addEventListener("click", function() { generateThemeBoard(); showTab(1); // Switch to Dashboard }); // --- PDF Download --- pdfBtn.addEventListener("click", function() { var jsPDF = window.jspdf.jsPDF; var titleSlug = nameInput.value.replace(/[^a-zA-Z0-9\s]/g, '').replace(/\s/g, '_').substring(0, 30) || 'Theme_Board'; var fileName = `${titleSlug}.pdf`; html2canvas(exportArea, { scale: 2, useCORS: true, backgroundColor: '#ffffff' }).then(function(canvas) { var imgData = canvas.toDataURL('image/png'); var doc = new jsPDF({ orientation: 'p', unit: 'pt', format: 'letter' }); var pdfWidth = doc.internal.pageSize.getWidth(); var pdfHeight = doc.internal.pageSize.getHeight(); var imgProps = doc.getImageProperties(imgData); var imgWidth = imgProps.width; var imgHeight = imgProps.height; var margin = 40; var usableWidth = pdfWidth - (2 * margin); var ratio = usableWidth / imgWidth; var scaledHeight = imgHeight * ratio; if (scaledHeight > pdfHeight - (2 * margin)) { var pageHeight = pdfHeight - (2 * margin); var heightLeft = scaledHeight; var position = 0; while (heightLeft > 0) { doc.addImage(imgData, 'PNG', margin, position + margin, usableWidth, scaledHeight); heightLeft -= pageHeight; position -= pageHeight; if (heightLeft > 0) { doc.addPage(); } } } else { // Single page doc.addImage(imgData, 'PNG', margin, margin, usableWidth, scaledHeight); } doc.save(fileName); }).catch(function(err) { console.error("FTB PDF Error:", err); // alert("An error occurred while generating the PDF."); // Per spec }); }); // --- Initial Load --- loadState(); generateThemeBoard(); colorHexTextInput.value = colorHexInput.value.toUpperCase(); // Initialize hex text field showTab(0); });
    Scroll to Top