index.html

cad/index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, viewport-fit=cover">
<title>Cabinet CAD — 3D + CNC Cut Sheets</title>
<meta name="description" content="Cabinet CAD: a 3D drawing plus CNC-ready DXF cut sheets and G-code for each board, generated from one cabinet definition.">
<link rel="canonical" href="https://2d-3d-floor-planner.gallop.software/cad/">
<!-- Open Graph (Facebook, LinkedIn, iMessage, etc.) — same featured image as the home page -->
<meta property="og:type" content="website">
<meta property="og:url" content="https://2d-3d-floor-planner.gallop.software/cad/">
<meta property="og:title" content="Cabinet CAD — 3D + CNC Cut Sheets">
<meta property="og:description" content="Cabinet CAD: a 3D drawing plus CNC-ready DXF cut sheets and G-code for each board, generated from one cabinet definition.">
<meta property="og:image" content="https://2d-3d-floor-planner.gallop.software/screenshot.jpg">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<!-- Twitter / X -->
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="Cabinet CAD — 3D + CNC Cut Sheets">
<meta name="twitter:description" content="Cabinet CAD: a 3D drawing plus CNC-ready DXF cut sheets and G-code for each board, generated from one cabinet definition.">
<meta name="twitter:image" content="https://2d-3d-floor-planner.gallop.software/screenshot.jpg">
</head>
<body>
<div id="app">
<header>
<div class="menu" id="menu">
<button class="btn icon" id="menuBtn" aria-label="Open page menu" aria-expanded="false">
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round"><path d="M2 4h12M2 8h12M2 12h12"/></svg>
</button>
<div class="menu-list" id="menuList" hidden></div>
</div>
<h1>Cabinet CAD</h1>
<div class="page-nav">
Cabinet
<button class="btn" id="prev" title="Previous sheet">Prev</button>
<select id="page" title="Pick a cabinet"></select>
<button class="btn" id="next" title="Next sheet">Next</button>
</div>
<button class="btn" id="fit">Fit</button>
<button class="btn dl" id="dl" hidden title="Download this sheet's cut file for the CNC">
<svg width="14" height="14" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M8 2v8M4.5 6.5 8 10l3.5-3.5M2.5 13.5h11"/></svg>
<span id="dlLabel">Download DXF</span>
</button>
<button class="btn info" id="info" aria-label="Sheet info">
<svg width="14" height="14" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" aria-hidden="true"><circle cx="8" cy="8" r="6.5"/><path d="M8 7.4v3.4M8 5v.1"/></svg>
</button>
<span id="status"></span>
<span class="spacer"></span>
<div id="legend"></div>
</header>
<div id="wrap">
<canvas id="c"></canvas>
<div id="readout"></div>
<label class="explode" id="explodeWrap" hidden>Explode
<input type="range" id="explode" min="0" max="100" value="0">
</label>
<div class="sim" id="simBar" hidden>
<div class="sim-controls">
<button class="btn icon" id="simPrev" aria-label="Step back" title="Step back one move (hold to scan)">
<svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true"><path d="M4 3h1.7v10H4zM13 3v10l-7-5z"/></svg>
</button>
<button class="btn icon" id="simPlay" aria-label="Play simulation" title="Play / pause the cut">
<svg id="simPlayIcon" width="16" height="16" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true"><path d="M4 3l9 5-9 5z"/></svg>
</button>
<button class="btn icon" id="simNext" aria-label="Step forward" title="Step forward one move (hold to scan)">
<svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true"><path d="M10.3 3H12v10h-1.7zM3 3v10l7-5z"/></svg>
</button>
<input type="range" id="simScrub" min="0" max="1000" value="0" title="Scrub through the cut">
<select id="simSpeed" title="Playback speed">
<option value="0.25">0.25×</option>
<option value="0.5">0.5×</option>
<option value="1" selected>1×</option>
<option value="2">2×</option>
<option value="4">4×</option>
<option value="8">8×</option>
</select>
<span id="simTime">0%</span>
</div>
<span id="simStat"></span>
</div>
<div id="drop">Drop .dxf to load</div>
</div>
<nav id="tabs" aria-label="Cabinet sheets"></nav>
</div>
<script type="module" src="./main.ts"></script>
</body>
</html>

Support

Talk to the developers of this project to learn more

We have been building professional websites for big clients for over 15 years. Gallop templates and blocks is our best foundation for SEO websites and web apps.

© 2026 Web Plant Media, LLC