Dining Table Space Explorer

<!doctype html>
<html lang="en">
<head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Dining Table Space Explorer</title>
<style>
:root{font-family:system-ui,sans-serif;color:#183a3a;background:#f2f6f3}*{box-sizing:border-box}body{margin:0;padding:24px}main{max-width:1050px;margin:auto}h1{font-size:clamp(26px,4vw,42px);margin:6px 0}p{line-height:1.6}.eyebrow{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:#456b61}.layout{display:grid;grid-template-columns:290px 1fr;gap:22px}.panel{background:white;border:1px solid #d7e2da;border-radius:18px;padding:22px}label{display:block;margin-bottom:18px;font-weight:600}input{width:100%;margin-top:7px;font:inherit;border:1px solid #aabfb5;border-radius:7px;padding:10px}small{display:block;font-weight:400;color:#526960;margin-top:5px}svg{width:100%;height:auto;display:block}output{font-size:24px;font-weight:700}#status{padding:12px;border-radius:8px;background:#e2f4e9}.warning{color:#a32b23!important;background:#ffebe7!important}.metrics{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:14px 0}.metric{background:#f2f6f3;border-radius:10px;padding:14px}.legend{font-size:13px;color:#526960}a{color:#16635e;text-underline-offset:3px}footer{margin:20px 0;font-size:14px}button{background:#165e54;color:white;border:0;border-radius:7px;padding:10px 18px;font:inherit;cursor:pointer}@media(max-width:760px){body{padding:15px}.layout{grid-template-columns:1fr}.controls{display:grid;grid-template-columns:1fr 1fr;gap:10px}label{margin-bottom:7px}}
</style></head>
<body><main><div class="eyebrow">An interactive room-planning worksheet</div><h1>Dining Table Space Explorer</h1><p>A beautiful table still needs room around it. Change the measurements below to see the difference between the tabletop footprint and a clearance envelope you choose. All measurements are in inches.</p>
<div class="layout"><section class="panel"><div class="controls">
<label>Room length<input id="roomLength" type="number" min="1" max="1000" value="180"><small>Clear usable length, not the whole floor plan.</small></label>
<label>Room width<input id="roomWidth" type="number" min="1" max="1000" value="144"></label>
<label>Table length<input id="tableLength" type="number" min="1" max="1000" value="84"></label>
<label>Table width<input id="tableWidth" type="number" min="1" max="1000" value="40"></label>
<label>Chosen clearance on every side<input id="clearance" type="number" min="0" max="300" value="36"><small>36 is an editable example, not a rule or guaranteed comfortable fit.</small></label></div><button id="reset" type="button">Reset example</button></section>
<section class="panel" aria-label="Layout preview"><svg viewBox="0 0 600 420" role="img" aria-labelledby="diagramTitle"><title id="diagramTitle">Centered rectangular tabletop and its clearance envelope inside a rectangular room</title><rect x="10" y="10" width="580" height="400" fill="#f2f6f3" rx="12"/><rect id="room" fill="white" stroke="#527568" stroke-width="3"/><rect id="envelope" fill="#d1ece3" fill-opacity=".65" stroke="#329174" stroke-dasharray="7 5" stroke-width="2"/><rect id="table" fill="#855d41" stroke="#483726" stroke-width="2" rx="6"/><text x="300" y="210" text-anchor="middle" fill="white" font-size="17">TABLE</text></svg>
<p class="legend">Brown: tabletop · Dashed green: tabletop plus chosen clearance · Outer border: usable room</p><p id="status" aria-live="polite"></p><div class="metrics"><div class="metric"><small>End gap to room boundary</small><output id="endGap"></output></div><div class="metric"><small>Side gap to room boundary</small><output id="sideGap"></output></div></div><p id="needed"></p></section></div>
<section class="panel" style="margin-top:22px"><h2>Use the model with a real room</h2><p>This worksheet centers a rectangular table and assumes equal clearance on opposite sides. The envelope equals the table length and width plus twice your chosen clearance. A negative gap means the tabletop itself extends beyond the room boundary.</p><p>Measure the usable area after accounting for cabinets and other furniture. Test chair pull-out, occupied seats, door swings, walking routes, table-base placement and the delivery route separately. The diagram cannot establish seating capacity or accessibility compliance. Oval and irregular live-edge tops need checks against their actual drawings and widest points.</p><p>When comparing <a href="https://epoxytablelab.com/collections/epoxy-dining-tables">epoxy dining tables</a>, use the specific tabletop dimensions and base details for each configuration. Confirm dimensions and delivery requirements with the seller before ordering.</p></section>
<footer>Created by EpoxyTableLab. A simple planning aid; not a measured floor plan or installation specification. Inputs stay in this page.</footer></main>
<script>
const defaults={roomLength:180,roomWidth:144,tableLength:84,tableWidth:40,clearance:36};
const fields=Object.keys(defaults);const el=id=>document.getElementById(id);
function calculate(rl,rw,tl,tw,c){return{end:(rl-tl)/2,side:(rw-tw)/2,needLength:tl+2*c,needWidth:tw+2*c,fits:tl+2*c<=rl&&tw+2*c<=rw};}
function rectangle(id,x,y,w,h){const r=el(id);Object.entries({x,y,width:w,height:h}).forEach(([k,v])=>r.setAttribute(k,String(v)));}
function update(){const v=fields.map(id=>Number(el(id).value));if(v.some((n,i)=>!Number.isFinite(n)||(i<4?n<=0:n<0)||el(fields[i]).value==='')){el('status').textContent='Enter positive dimensions and a non-negative clearance.';el('status').className='warning';return;}
const[rl,rw,tl,tw,c]=v;const m=calculate(...v);const scale=Math.min(520/Math.max(rl,m.needLength),340/Math.max(rw,m.needWidth));rectangle('room',300-rl*scale/2,210-rw*scale/2,rl*scale,rw*scale);rectangle('envelope',300-m.needLength*scale/2,210-m.needWidth*scale/2,m.needLength*scale,m.needWidth*scale);rectangle('table',300-tl*scale/2,210-tw*scale/2,tl*scale,tw*scale);el('endGap').textContent=m.end.toFixed(1)+' in';el('sideGap').textContent=m.side.toFixed(1)+' in';el('needed').textContent='Your clearance envelope needs '+m.needLength.toFixed(1)+' × '+m.needWidth.toFixed(1)+' inches.';el('status').className=m.fits?'':'warning';el('status').textContent=m.fits?'The chosen envelope fits this simple rectangle. Check real chairs, doors and routes next.':'The chosen envelope exceeds the usable room. Reduce the table dimensions or reconsider the layout.';}
fields.forEach(id=>el(id).addEventListener('input',update));el('reset').addEventListener('click',()=>{fields.forEach(id=>el(id).value=defaults[id]);update();});update();
</script></body></html>