VectorScope
Vector Art Design Brief CreatorProject & Scope
Visual Direction & Style
Technical Specifications
Asset Type: ${data.type} | Client: ${data.client}
`; // 2. Project Context html += `I. PROJECT CONTEXT
`;
html += `Purpose & Audience:
`;
html += `${data.purpose}
`;
html += `Deadline:
`;
html += `${data.deadline}
`;
// 3. Visual Direction
html += `II. VISUAL DIRECTION
`;
html += `Desired Style & Mood:
`;
html += `Style: ${data.style}
Palette: ${data.colors}
`;
html += `Palette: ${data.colors}
Mandatory Inclusions:
`;
html += `${data.references}
`;
// 4. Technical Specs
html += `III. TECHNICAL & DELIVERABLES
`;
html += `Required File Formats:
`;
html += `Formats: ${data.formats}
Dimensions: ${data.dims}
`;
container.innerHTML = html;
}
function vadbSwitchTab(tabId) {
document.querySelectorAll('.vadb-tab-btn').forEach(b => b.classList.remove('active'));
document.querySelectorAll('.vadb-content').forEach(c => c.classList.remove('active'));
const idx = tabId === 'builder' ? 0 : 1;
document.querySelectorAll('.vadb-tab-btn')[idx].classList.add('active');
document.getElementById('vadb-' + tabId).classList.add('active');
if (tabId === 'preview') {
vadbRenderBrief();
}
}
function vadbLoadExample() {
if(!confirm("Overwrite current inputs with example data?")) return;
document.getElementById('inp-project').value = "Dashboard Analytics Icon Set";
document.getElementById('inp-client').value = "Product Development Team";
document.getElementById('inp-asset-type').value = "Icon Set";
document.getElementById('inp-purpose').value = "To replace legacy icons within our core B2B analytics platform. Must convey reliability and a high-tech feel. Audience is business analysts.";
document.getElementById('inp-style').value = "LineArt";
document.getElementById('inp-colors').value = "#007ACC (Primary), #F39C12 (Alert), #FFFFFF";
document.getElementById('inp-references').value = "All icons must maintain a 2px stroke width. Key concepts (Data, User, Cloud) must be recognizable instantly. No gradients allowed.";
document.getElementById('inp-formats').value = "SVG, PNG (1x, 2x, 3x)";
document.getElementById('inp-dims').value = "24x24px, Scalable to 48px";
vadbRenderBrief();
vadbSwitchTab('preview');
}
/* --- PDF Generation --- */
async function vadbGeneratePDF() {
vadbRenderBrief(); // Final render
const { jsPDF } = window.jspdf;
const doc = new jsPDF('p', 'mm', 'a4');
const data = {
project: document.getElementById('inp-project').value || "Design Project",
client: document.getElementById('inp-client').value || "N/A Client",
type: document.getElementById('inp-asset-type').options[document.getElementById('inp-asset-type').selectedIndex].text,
deadline: document.getElementById('inp-deadline').value,
purpose: document.getElementById('inp-purpose').value || "Purpose pending.",
style: document.getElementById('inp-style').value || "Style pending.",
colors: document.getElementById('inp-colors').value || "No colors specified.",
references: document.getElementById('inp-references').value || "No mandatory references.",
formats: document.getElementById('inp-formats').value || "SVG required.",
dims: document.getElementById('inp-dims').value || "Scalable/Vector"
};
const cyan = [0, 188, 212];
let y = 20;
// Header
doc.setFillColor(...cyan);
doc.rect(0, 0, 210, 20, 'F');
doc.setTextColor(255, 255, 255);
doc.setFontSize(16);
doc.text(`Vector Art Design Brief`, 14, 13);
// Title/Meta
doc.setTextColor(0, 0, 0);
doc.setFontSize(14);
doc.setFont("helvetica", "bold");
doc.text(data.project.toUpperCase(), 14, y + 10);
doc.setFontSize(10);
doc.setFont("helvetica", "normal");
doc.text(`Asset Type: ${data.type} | Client: ${data.client} | Deadline: ${data.deadline}`, 14, y + 16);
y += 30;
// Helper function to add structured text sections
const addSection = (title, content, startY) => {
if (startY > 270) { doc.addPage(); startY = 20; }
doc.setFont("helvetica", "bold");
doc.setFontSize(12);
doc.setTextColor(0, 188, 212); // Cyan for headers
doc.text(title, 14, startY);
startY += 6;
doc.setFont("times", "normal");
doc.setFontSize(10);
doc.setTextColor(0, 0, 0);
const splitContent = doc.splitTextToSize(content, 180);
doc.text(splitContent, 18, startY);
return startY + (splitContent.length * 5) + 8;
};
// I. Project Context
y = addSection("I. PROJECT CONTEXT", null, y);
y = addSection("Purpose & Audience", data.purpose, y);
// II. Visual Direction
y = addSection("II. VISUAL DIRECTION", null, y);
y = addSection("Style & Mood", `Style: ${data.style}\nPalette: ${data.colors}`, y);
y = addSection("Mandatory Inclusions & References", data.references, y);
// III. Technical Specs
y = addSection("III. TECHNICAL & DELIVERABLES", null, y);
y = addSection("Required Output", `Formats: ${data.formats}\nDimensions: ${data.dims}\n`, y);
doc.save(`DesignBrief_${data.project.replace(/\s/g, '_')}.pdf`);
}
Dimensions: ${data.dims}