Small-Space Gym Layout Planner
Enter your room dimensions and select the equipment you're considering. We'll show you a visual floor plan, calculate how much space you're using, and give personalized recommendations for your apartment gym setup.
<!-- Room Dimensions -->
<div class="sg-planner__card">
<h2 class="sg-planner__card-title">Room Dimensions</h2>
<div class="sg-planner__dimensions">
<div class="sg-planner__field">
<label for="roomLength">Length (ft)</label>
<input type="number" id="roomLength" value="10" min="1" max="50" step="0.5" aria-describedby="roomLengthHelp">
</div>
<div class="sg-planner__field">
<label for="roomWidth">Width (ft)</label>
<input type="number" id="roomWidth" value="8" min="1" max="50" step="0.5" aria-describedby="roomWidthHelp">
</div>
<div class="sg-planner__field">
<label for="roomHeight">Ceiling (ft)</label>
<input type="number" id="roomHeight" value="8" min="6" max="20" step="0.5" aria-describedby="roomHeightHelp">
</div>
</div>
</div>
<!-- Equipment Selection -->
<div class="sg-planner__card">
<h2 class="sg-planner__card-title">Equipment to Include</h2>
<div class="sg-planner__equipment-list" id="equipmentList" role="group" aria-label="Equipment selection">
<!-- Populated by JS -->
</div>
<div class="sg-planner__actions">
<button type="button" class="sg-planner__btn sg-planner__btn--primary" id="recommendedBtn" aria-label="Select recommended starter setup">
<span>⭐</span> Recommended Setup
</button>
<button type="button" class="sg-planner__btn sg-planner__btn--secondary" id="clearBtn" aria-label="Clear all equipment selections">
Clear All
</button>
</div>
</div>
<!-- Storage Preference -->
<div class="sg-planner__card">
<h2 class="sg-planner__card-title">Storage Preference</h2>
<div class="sg-planner__storage-options" id="storageOptions" role="radiogroup" aria-label="Storage preference">
<label class="sg-planner__storage-option is-selected">
<input type="radio" name="storage" value="wall" checked>
<div>
<div class="sg-planner__storage-label">Wall-mounted</div>
<div class="sg-planner__storage-desc">Saves floor space — best for small rooms</div>
</div>
</label>
<label class="sg-planner__storage-option">
<input type="radio" name="storage" value="rack">
<div>
<div class="sg-planner__storage-label">Freestanding Rack</div>
<div class="sg-planner__storage-desc">Flexible placement, easy to move</div>
</div>
</label>
<label class="sg-planner__storage-option">
<input type="radio" name="storage" value="underbed">
<div>
<div class="sg-planner__storage-label">Under-bed / Folded Storage</div>
<div class="sg-planner__storage-desc">Maximizes space, requires foldable equipment</div>
</div>
</label>
</div>
</div>
</div>
<!-- ===== RIGHT COLUMN: VISUAL OUTPUT ===== -->
<div class="sg-planner__output">
<!-- Floor Plan -->
<div class="sg-planner__card sg-planner__visual-wrap">
<h2 class="sg-planner__card-title">Floor Plan</h2>
<div class="sg-planner__floor-plan" id="floorPlan" role="img" aria-label="Floor plan visualization of your gym layout">
<span class="sg-planner__dim-label sg-planner__dim-label--top" id="dimLabelTop">10 ft</span>
<span class="sg-planner__dim-label sg-planner__dim-label--left" id="dimLabelLeft">8 ft</span>
<div class="sg-planner__door" aria-hidden="true"></div>
<!-- Equipment placed here by JS -->
</div>
<div class="sg-planner__legend">
<div class="sg-planner__legend-item">
<div class="sg-planner__legend-swatch" style="background:rgba(74,124,89,0.82)"></div>
Fits well
</div>
<div class="sg-planner__legend-item">
<div class="sg-planner__legend-swatch" style="background:rgba(212,160,23,0.82)"></div>
Tight fit
</div>
<div class="sg-planner__legend-item">
<div class="sg-planner__legend-swatch" style="background:rgba(192,57,43,0.82)"></div>
Won't fit
</div>
<div class="sg-planner__legend-item">
<div class="sg-planner__legend-swatch" style="background:rgba(107,159,122,0.55);border:1.5px dashed rgba(74,124,89,0.6)"></div>
Zero footprint
</div>
</div>
</div>
<!-- Stats -->
<div class="sg-planner__card">
<h2 class="sg-planner__card-title">Space Summary</h2>
<div class="sg-planner__stats">
<div class="sg-planner__stat">
<div class="sg-planner__stat-value" id="statTotalArea">80 sq ft</div>
<div class="sg-planner__stat-label">Total Room Area</div>
</div>
<div class="sg-planner__stat">
<div class="sg-planner__stat-value" id="statUsedArea">0 sq ft</div>
<div class="sg-planner__stat-label">Equipment Footprint</div>
</div>
<div class="sg-planner__stat">
<div class="sg-planner__stat-value" id="statPercent">0%</div>
<div class="sg-planner__stat-label">Space Used</div>
</div>
<div class="sg-planner__stat">
<div class="sg-planner__stat-value" id="statItems">0</div>
<div class="sg-planner__stat-label">Items Selected</div>
</div>
</div>
<div class="sg-planner__recommendation is-green" id="recommendation">
<div class="sg-planner__rec-title is-green" id="recTitle">Select equipment to get started</div>
<div class="sg-planner__rec-text" id="recText">Choose items from the list on the left to see your layout.</div>
</div>
<div class="sg-planner__cost" id="costEstimate" style="display:none;">
<div class="sg-planner__cost-label">Estimated Total Cost</div>
<div class="sg-planner__cost-value" id="costValue">$0 – $0</div>
<div class="sg-planner__cost-note">Based on typical prices for quality home-gym equipment</div>
</div>
</div>
</div>