<!DOCTYPE html>

<head>

<title>The Cubinator - Container Load Estimator</title>

tailwind.config = {

theme: {

extend: {

colors: {

brand: {

50: '#f0f7ff',

100: '#e0effe',

500: '#0284c7',

600: '#0369a1',

700: '#035482',

800: '#075985',

900: '#0c4a6e',

}

fontFamily: {

sans: ['Inter', 'sans-serif'],

}

</script>

<style>

body { font-family: 'Inter', sans-serif; }

.custom-scrollbar::-webkit-scrollbar { width: 6px; height: 6px; }

.custom-scrollbar::-webkit-scrollbar-track { background: #f1f5f9; }

.custom-scrollbar::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 4px; }

.custom-scrollbar::-webkit-scrollbar-thumb:hover { background: #94a3b8; }

</style>

</head>

<i class="fa-solid fa-cubes mr-2"></i>CUBINATOR

</div>

<span class="text-xs bg-slate-800 text-sky-400 px-2 py-1 rounded font-mono border border-slate-700">v2.0 Logic Fixed</span>

</div>

Precision Container Load Calculator

</div>

</header>

<i class="fa-solid fa-box text-sky-600 mr-2"></i> Cargo Specifications

</h2>

<div>

<label class="block text-xs font-semibold text-slate-600 uppercase mb-1">Measurement Unit</label>

Metric (CM / KG)

</button>

Imperial (IN / LBS)

</button>

</div>

<div>

<label class="block text-xs font-medium text-slate-600 mb-1">Length (<span class="unitDim">cm</span>)</label>

</div>

<div>

<label class="block text-xs font-medium text-slate-600 mb-1">Width (<span class="unitDim">cm</span>)</label>

</div>

<div>

<label class="block text-xs font-medium text-slate-600 mb-1">Height (<span class="unitDim">cm</span>)</label>

</div>

<div>

<label class="block text-xs font-medium text-slate-600 mb-1">Total Quantity (Pcs)</label>

</div>

<div>

<label class="block text-xs font-medium text-slate-600 mb-1">Unit Weight (<span class="unitWeight">kg</span>)</label>

</div>

<div>

<label class="block text-xs font-semibold text-slate-600 uppercase mb-1">Target Container Type</label>

<option value="40GP">40' General Purpose (40GP)</option>

<option value="20GP">20' General Purpose (20GP)</option>

</select>

</div>

<div>

<div class="text-sm font-semibold text-slate-800">Double Stacking Allowed</div>

<div class="text-xs text-slate-500">Allow items to stack on top of each other</div>

</div>

</label>

</div>

<span>Calculate Containers</span>

</button>

</form>

</div>

</div>

<div class="text-xs text-sky-400 font-mono uppercase tracking-wider mb-1">Calculation Results</div>

<span id="resContainerType" class="text-xl font-bold text-sky-300">x 40GP Containers</span>

</div>

Enter cargo parameters and click Calculate.

</div>

<h3 class="text-xs font-bold text-slate-400 uppercase tracking-wider mb-3">Capacity Per Single Container</h3>

<span class="text-sm text-slate-600">Max Cargo Pcs / Container:</span>

</div>

<span class="text-sm text-slate-600">Volumetric Utilization:</span>

</div>

<span class="text-sm text-slate-600">Weight Utilization:</span>

</div>

<h3 class="text-xs font-bold text-slate-400 uppercase tracking-wider mb-3">Total Shipment Totals</h3>

<span class="text-sm text-slate-600">Total Total Cargo Volume:</span>

</div>

<span class="text-sm text-slate-600">Total Total Gross Weight:</span>

</div>

<span class="text-sm text-slate-600">Formula Check:</span>

<span id="resFormulaCheck" class="text-xs font-mono text-slate-500">Total / PcsPerContainer</span>

</div>

<h3 class="text-xs font-bold text-slate-400 uppercase tracking-wider mb-3">Container Internal Specs Reference</h3>

<thead>

<th class="pb-2">Inner Dim (L × W × H)</th>

<th class="pb-2">Volume</th>

<th class="pb-2">Max Payload</th>

</tr>

</thead>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

</tbody>

</table>

</div>

</main>

</footer>

// Container Specs (Dimensions in CM, Vol in CBM, Payload in KG)

const CONTAINERS = {

'20GP': { l: 589, w: 235, h: 239, maxCbm: 33.2, maxWeightKg: 28200 },

'40GP': { l: 1203, w: 235, h: 239, maxCbm: 67.7, maxWeightKg: 26700 },

'40HC': { l: 1203, w: 235, h: 269, maxCbm: 76.3, maxWeightKg: 26500 }

};

let currentUnit = 'cm'; // 'cm' or 'in'

function setUnit(unit) {

currentUnit = unit;

const isCm = unit === 'cm';

document.querySelectorAll('.unitDim').forEach(el => el.textContent = isCm ? 'cm' : 'in');

document.querySelectorAll('.unitWeight').forEach(el => el.textContent = isCm ? 'kg' : 'lbs');

document.getElementById('unitCm').className = isCm

? 'py-2 px-3 text-sm font-medium rounded-lg border border-sky-500 bg-sky-50 text-sky-700 font-semibold'

: 'py-2 px-3 text-sm font-medium rounded-lg border border-slate-200 text-slate-600 hover:bg-slate-50';

document.getElementById('unitIn').className = !isCm

? 'py-2 px-3 text-sm font-medium rounded-lg border border-sky-500 bg-sky-50 text-sky-700 font-semibold'

: 'py-2 px-3 text-sm font-medium rounded-lg border border-slate-200 text-slate-600 hover:bg-slate-50';

calculate();

}

function calculate() {

const lengthInput = parseFloat(document.getElementById('cLength').value);

const widthInput = parseFloat(document.getElementById('cWidth').value);

const heightInput = parseFloat(document.getElementById('cHeight').value);

const totalQty = parseInt(document.getElementById('cQty').value);

const unitWeightInput = parseFloat(document.getElementById('cWeight').value) || 0;

const containerType = document.getElementById('containerType').value;

const canStack = document.getElementById('canStack').checked;

if (!lengthInput || !widthInput || !heightInput || !totalQty) return;

// Convert dimensions to CM and KG internally

let lengthCm = currentUnit === 'in' ? lengthInput * 2.54 : lengthInput;

let widthCm = currentUnit === 'in' ? widthInput * 2.54 : widthInput;

let heightCm = currentUnit === 'in' ? heightInput * 2.54 : heightInput;

let unitWeightKg = currentUnit === 'in' ? unitWeightInput * 0.453592 : unitWeightInput;

const container = CONTAINERS[containerType];

// 1. Calculate how many fit along length, width, height

let fitLength = Math.floor(container.l / lengthCm);

let fitWidth = Math.floor(container.w / widthCm);

let fitHeight = Math.floor(container.h / heightCm);

// If stacking is turned off, limit vertical fit to 1 tier max

if (!canStack) {

fitHeight = Math.min(fitHeight, 1);

}

let pcsPerContainer = fitLength * fitWidth * fitHeight;

// Check if cargo is too large to fit even one piece

if (pcsPerContainer < 1) {

document.getElementById('resContainers').textContent = "0";

document.getElementById('resContainerType').textContent = `x ${containerType}`;

document.getElementById('resSummaryText').textContent = "Cargo item dimensions exceed single container dimensions.";

document.getElementById('resFitPerContainer').textContent = "0 pcs";

document.getElementById('resVolUtil').textContent = "0%";

document.getElementById('resWeightUtil').textContent = "0%";

return;

}

// 2. Check container payload weight limit constraints

if (unitWeightKg > 0) {

let maxByWeight = Math.floor(container.maxWeightKg / unitWeightKg);

pcsPerContainer = Math.min(pcsPerContainer, maxByWeight);

}

// 3. Exact division calculation: Total Qty / Capacity Per Container (rounded up)

const containersRequired = Math.ceil(totalQty / pcsPerContainer);

// Volume & Weight Totals

const singleItemCbm = (lengthCm * widthCm * heightCm) / 1000000;

const totalShipmentCbm = singleItemCbm * totalQty;

const totalShipmentKg = unitWeightKg * totalQty;

const cbmPerContainer = pcsPerContainer * singleItemCbm;

const volUtilPercent = ((cbmPerContainer / container.maxCbm) * 100).toFixed(1);

const weightUtilPercent = (((pcsPerContainer * unitWeightKg) / container.maxWeightKg) * 100).toFixed(1);

// Update UI

document.getElementById('resContainers').textContent = containersRequired;

document.getElementById('resContainerType').textContent = `x ${containerType} Container${containersRequired > 1 ? 's' : ''}`;

document.getElementById('resSummaryText').textContent =

`To transport ${totalQty.toLocaleString()} pieces, you need ${containersRequired} ${containerType} container(s). Each container holds up to ${pcsPerContainer} pieces (${canStack ? 'stacking enabled' : 'single layer only'}).`;

document.getElementById('resFitPerContainer').textContent = `${pcsPerContainer} pcs / container`;

document.getElementById('resVolUtil').textContent = `${volUtilPercent}%`;

document.getElementById('resWeightUtil').textContent = `${weightUtilPercent}%`;

document.getElementById('resTotalCbm').textContent = `${totalShipmentCbm.toFixed(2)} CBM`;

document.getElementById('resTotalWeight').textContent = currentUnit === 'in'

? `${(totalShipmentKg / 0.453592).toFixed(1)} LBS`

: `${totalShipmentKg.toFixed(1)} KG`;

document.getElementById('resFormulaCheck').textContent = `${totalQty} total ÷ ${pcsPerContainer} per cont. = ${containersRequired}`;

}

// Run initial calculation on load

window.onload = calculate;

</script>

</body>

</html>