Solid Colors / White (15% Waste – Rotatable)
Wood Grain / Textured (23% Waste – Fixed Direction)
| Part Description |
Length (mm) |
Width (mm) |
Qty |
|
Total Material Area:
0.00 m²
Estimated Boards Needed:
0
*Estimates include structural waste factors. Final optimized cutting layouts at the counter may vary slightly.
.hds-calculator-container {
background: #ffffff;
border: 1px solid #e2e8f0;
border-radius: 12px;
padding: 24px;
font-family: -apple-system, BlinkMacSystemFont, “Segoe UI”, Roboto, sans-serif;
max-width: 750px;
margin: 20px auto;
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.03);
}
.hds-calc-header h3 {
margin: 0 0 6px 0;
color: #1e293b;
font-size: 22px;
font-weight: 700;
}
.hds-calc-header p {
margin: 0 0 24px 0;
color: #64748b;
font-size: 14px;
line-height: 1.5;
}
.hds-settings-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 16px;
background: #f8fafc;
padding: 16px;
border-radius: 8px;
margin-bottom: 24px;
}
.hds-dimensions-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 12px;
}
.hds-input-group {
display: flex;
flex-direction: column;
gap: 6px;
}
.hds-input-group label {
font-size: 12px;
font-weight: 600;
color: #475569;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.hds-input-group input, .hds-input-group select {
padding: 10px 12px;
border: 1px solid #cbd5e1;
border-radius: 6px;
font-size: 14px;
color: #334155;
background-color: #fff;
outline: none;
transition: border-color 0.2s;
}
.hds-input-group input:focus, .hds-input-group select:focus {
border-color: #3b82f6;
}
.table-responsive {
overflow-x: auto;
margin-bottom: 16px;
}
#cutting-list-table {
width: 100%;
border-collapse: collapse;
min-width: 500px;
}
#cutting-list-table th {
background: #f1f5f9;
color: #475569;
text-align: left;
padding: 10px 12px;
font-size: 13px;
font-weight: 600;
}
#cutting-list-table td {
padding: 8px 6px;
border-bottom: 1px solid #e2e8f0;
}
#cutting-list-table input {
width: 100%;
padding: 8px;
border: 1px solid #e2e8f0;
border-radius: 4px;
font-size: 14px;
box-sizing: border-box;
}
#cutting-list-table input:focus {
border-color: #3b82f6;
outline: none;
}
.hds-btn-add {
background: #f1f5f9;
color: #334155;
border: 1px dashed #cbd5e1;
padding: 10px 16px;
border-radius: 6px;
font-weight: 600;
font-size: 14px;
cursor: pointer;
width: 100%;
transition: all 0.2s;
margin-bottom: 24px;
}
.hds-btn-add:hover {
background: #e2e8f0;
color: #0f172a;
}
.hds-btn-delete {
background: none;
border: none;
color: #ef4444;
font-size: 18px;
cursor: pointer;
padding: 4px 8px;
line-height: 1;
}
.hds-btn-delete:hover {
color: #dc2626;
}
.hds-results-panel {
background: #0f172a;
color: #ffffff;
padding: 20px;
border-radius: 8px;
}
.hds-metric {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 12px;
border-bottom: 1px solid #334155;
padding-bottom: 12px;
}
.hds-metric-label {
color: #94a3b8;
font-size: 14px;
}
.hds-metric-val {
font-weight: 600;
font-size: 16px;
}
.hds-final-score {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 12px;
}
.hds-score-label {
font-size: 16px;
font-weight: 700;
color: #fff;
}
.hds-score-val {
font-size: 32px;
font-weight: 800;
color: #38bdf8;
}
.hds-disclaimer {
margin: 8px 0 0 0;
font-size: 11px;
color: #64748b;
line-height: 1.4;
}
@media (max-width: 600px) {
.hds-settings-grid {
grid-template-columns: 1fr;
}
}
const initialPanels = [
{ desc: ‘Base Unit Sides’, l: 720, w: 560, qty: 4 },
{ desc: ‘Shelves’, l: 564, w: 530, qty: 6 },
{ desc: ‘Back Panels’, l: 715, w: 595, qty: 2 }
];
function initCalculator() {
const tbody = document.getElementById(‘table-body’);
tbody.innerHTML = ”;
initialPanels.forEach(p => {
tbody.appendChild(createRowElement(p.desc, p.l, p.w, p.qty));
});
calculateBoards();
}
function createRowElement(desc = ”, l = ”, w = ”, qty = ”) {
const tr = document.createElement(‘tr’);
tr.innerHTML = `
|
|
|
|
|
`;
return tr;
}
function addTableRow() {
const tbody = document.getElementById(‘table-body’);
tbody.appendChild(createRowElement());
calculateBoards();
}
function removeRow(button) {
const row = button.closest(‘tr’);
row.remove();
calculateBoards();
}
function calculateBoards() {
const sheetL = parseFloat(document.getElementById(‘sheet-l’).value) || 0;
const sheetW = parseFloat(document.getElementById(‘sheet-w’).value) || 0;
const wasteMultiplier = parseFloat(document.getElementById(‘board-type’).value) || 1.15;
if (sheetL <= 0 || sheetW <= 0) {
document.getElementById('final-boards-display').innerText = '0';
document.getElementById('total-area-display').innerText = '0.00 m²';
return;
}
const sheetAreaM2 = (sheetL * sheetW) / 1000000;
const lengths = document.getElementsByClassName('p-length');
const widths = document.getElementsByClassName('p-width');
const quantities = document.getElementsByClassName('p-qty');
let totalPanelAreaM2 = 0;
for (let i = 0; i 0 && w > 0 && q > 0) {
totalPanelAreaM2 += (l * w * q) / 1000000;
}
}
const totalAreaWithWaste = totalPanelAreaM2 * wasteMultiplier;
let finalBoards = 0;
if (totalAreaWithWaste > 0) {
finalBoards = Math.ceil(totalAreaWithWaste / sheetAreaM2);
}
document.getElementById(‘total-area-display’).innerText = totalPanelAreaM2.toFixed(2) + ‘ m²’;
document.getElementById(‘final-boards-display’).innerText = finalBoards;
}
// Safely trigger initial setup once the DOM handles layout execution
if (document.readyState === ‘loading’) {
document.addEventListener(‘DOMContentLoaded’, initCalculator);
} else {
initCalculator();
}
