Cardboard Craft Designer

Cardboard Craft Designer

My Project Plan

Your project plan will appear here. Go to the 'Project Configuration' tab to get started!

Color Palette

No colors set.

Materials List

No materials listed.

Main Components

No components listed.

Building Steps

No steps entered.

Configure Your Project

Project Details
Color Palette

Enter colors or hex codes (e.g., "Gray", "#808080").

Materials & Components

Enter one item per line.

Building Steps

Enter one step per line.

'; } let listTag = listType === 'ordered' ? 'ol' : 'ul'; let listItems = ''; items.forEach(item => { let text = item.trim(); if (listType === 'checklist') { listItems += `
  • ${text}
  • `; } else { listItems += `
  • ${text}
  • `; } }); return `<${listTag}>${listItems}`; } /** * Updates the project plan (dashboard) tab. * @param {boolean} [switchToDashboard=true] - Whether to switch to the dashboard tab. */ window.ccd_updatePlan = function(switchToDashboard = true) { if (!ccd_dom.projectNameInput) { console.error("CCD Error: Config inputs not found."); return; } // 1. Update Titles const projectName = ccd_dom.projectNameInput.value || "My Project Plan"; ccd_dom.dashboardTitle.innerText = projectName; ccd_dom.pdfTitle.innerText = projectName; // 2. Update Color Palette ccd_dom.paletteContainer.innerHTML = ''; let colorsAdded = false; ccd_dom.colorInputs.forEach(input => { const color = input.value.trim(); if (color) { colorsAdded = true; const swatch = document.createElement('div'); swatch.className = 'ccd-color-swatch'; swatch.innerHTML = `
    ${color} `; ccd_dom.paletteContainer.appendChild(swatch); } }); if (!colorsAdded) { ccd_dom.paletteContainer.innerHTML = '

    No colors set.

    '; } // 3. Update Lists ccd_dom.materialsContainer.innerHTML = ccd_createListHTML( document.getElementById('input-materials').value, 'checklist' ); ccd_dom.componentsContainer.innerHTML = ccd_createListHTML( document.getElementById('input-components').value, 'bullet' ); ccd_dom.stepsContainer.innerHTML = ccd_createListHTML( document.getElementById('input-steps').value, 'ordered' ); // 4. Switch tab if (switchToDashboard) { ccd_showTab('dashboardTab'); } } /** * Shows a specific tab and hides others. * @param {string} tabId - The ID of the tab pane to show. */ window.ccd_showTab = function(tabId) { // Null check if (!document.getElementById(tabId)) { console.error(`CCD Error: Tab content #${tabId} not found.`); return; } ccd_currentTabId = tabId; const panes = document.querySelectorAll('#ccd-container .ccd-tab-pane'); const links = document.querySelectorAll('#ccd-container .ccd-tab-link'); panes.forEach(pane => { pane.classList.remove('ccd-active'); }); links.forEach(link => { link.classList.remove('ccd-active'); if (link.getAttribute('onclick') === `ccd_showTab('${tabId}')`) { link.classList.add('ccd-active'); } }); document.getElementById(tabId).classList.add('ccd-active'); } /** * Navigates between tabs using Next/Previous buttons. * @param {string} direction - 'next' or 'prev'. */ window.ccd_navigateTabs = function(direction) { const currentIndex = ccd_tabIds.indexOf(ccd_currentTabId); let newIndex; if (direction === 'next') { newIndex = (currentIndex + 1) % ccd_tabIds.length; } else { newIndex = (currentIndex - 1 + ccd_tabIds.length) % ccd_tabIds.length; } ccd_showTab(ccd_tabIds[newIndex]); } /** * Generates and downloads a PDF of the report content. */ window.ccd_downloadPDF = async function() { const { pdfContent, container } = ccd_dom; if (!pdfContent || !container) { console.error("CCD Error: PDF generation elements not found."); return; } if (!window.html2canvas || !window.jspdf) { console.error("CCD Error: jsPDF or html2canvas library not loaded."); return; } // Add class to hide button during capture container.classList.add('ccd-pdf-export'); try { const canvas = await html2canvas(pdfContent, { scale: 2, // Improve resolution useCORS: true, backgroundColor: '#ffffff' }); const imgData = canvas.toDataURL('image/png'); const pdf = new jsPDF({ orientation: 'p', unit: 'px', format: 'a4' }); const pdfWidth = pdf.internal.pageSize.getWidth(); const pdfHeight = pdf.internal.pageSize.getHeight(); const imgWidth = canvas.width; const imgHeight = canvas.height; const ratio = imgHeight / imgWidth; let finalImgHeight = pdfWidth * ratio; let finalImgWidth = pdfWidth; // Check if it fits, if not, scale by height if (finalImgHeight > pdfHeight - 20) { // -20 for margins finalImgHeight = pdfHeight - 20; finalImgWidth = finalImgHeight / ratio; } const xPos = (pdfWidth - finalImgWidth) / 2; const yPos = 10; // Top margin pdf.addImage(imgData, 'PNG', xPos, yPos, finalImgWidth, finalImgHeight); pdf.save('Cardboard_Craft_Plan.pdf'); } catch (error) { console.error("CCD Error generating PDF:", error); } finally { // Remove the class to show the button again container.classList.remove('ccd-pdf-export'); } } })();