<?php include "../autoload.php"; ?>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.1/jspdf.umd.min.js"></script>
<style>
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600;700&display=swap');
.gradient-bg {
background: linear-gradient(135deg, #1e40af 0%, #60a5fa 100%);
}
.result-card {
background: linear-gradient(145deg, #ffffff, #f0f7ff);
box-shadow: 0 12px 24px rgba(0, 0, 0, 0.15);
transition: transform 0.3s ease, opacity 0.3s ease;
}
.result-card.hidden {
transform: translateY(20px);
opacity: 0;
}
.result-card:not(.hidden) {
transform: translateY(0);
opacity: 1;
}
.input-container {
background: linear-gradient(145deg, #ffffff, #f9fafb);
transition: all 0.3s ease;
}
.input-container:hover {
transform: translateY(-2px);
box-shadow: 0 6px 12px rgba(0, 0, 0, 0.1);
}
.range-input::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 20px;
height: 20px;
background: #1e40af;
border-radius: 50%;
cursor: pointer;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
}
.range-input::-moz-range-thumb {
width: 20px;
height: 20px;
background: #1e40af;
border-radius: 50%;
cursor: pointer;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
}
.btn-primary {
transition: all 0.3s ease;
}
.btn-primary:hover {
transform: translateY(-2px);
box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2);
}
.visual-container {
background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100"><rect fill="%23f3f4f6" width="100" height="100"/><circle cx="50" cy="50" r="30" fill="%23dbeafe" opacity="0.5"/></svg>') repeat;
border-radius: 12px;
box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.05);
}
select {
appearance: none;
background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24"><path fill="%234b5563" d="M7 10l5 5 5-5H7z"/></svg>');
background-repeat: no-repeat;
background-position: right 0.75rem center;
background-size: 12px;
}
</style>
<div class="x">
<div class="x">
<!-- Input Form -->
<div class="mb-12">
<h2 class="text-3xl font-semibold text-gray-800 mb-6">Enter Your Desk, Chair, & Workspace Details</h2>
<p class="text-gray-500 mb-8 text-lg">Input dimensions to check if your desk and chair setup fits comfortably in your workspace.</p>
<form id="deskFitForm" class="space-y-8">
<div class="grid grid-cols-1 md:grid-cols-4 gap-6">
<div class="space-y-3">
<label for="deskWidth" class="block text-sm font-medium text-gray-700">Desk Width (in)</label>
<div class="relative flex items-center">
<i data-lucide="table-2" class="absolute left-4 top-1/2 transform -translate-y-1/2 text-gray-400"></i>
<input type="number" id="deskWidth" class="pl-12 pr-4 py-3 block w-full rounded-lg border-gray-300 shadow-sm focus:border-blue-600 focus:ring focus:ring-blue-600 focus:ring-opacity-50 text-lg" placeholder="60.0" step="0.1" min="30" max="96" value="60.0" required>
</div>
<input type="range" id="deskWidthRange" class="range-input w-full h-2 bg-gray-200 rounded-lg cursor-pointer" min="30" max="96" step="0.1" value="60">
<p id="deskWidthValue" class="text-sm text-gray-500">60.0 in</p>
</div>
<div class="space-y-3">
<label for="deskDepth" class="block text-sm font-medium text-gray-700">Desk Depth (in)</label>
<div class="relative flex items-center">
<i data-lucide="expand" class="absolute left-4 top-1/2 transform -translate-y-1/2 text-gray-400"></i>
<input type="number" id="deskDepth" class="pl-12 pr-4 py-3 block w-full rounded-lg border-gray-300 shadow-sm focus:border-blue-600 focus:ring focus:ring-blue-600 focus:ring-opacity-50 text-lg" placeholder="30.0" step="0.1" min="20" max="48" value="30.0" required>
</div>
<input type="range" id="deskDepthRange" class="range-input w-full h-2 bg-gray-200 rounded-lg cursor-pointer" min="20" max="48" step="0.1" value="30">
<p id="deskDepthValue" class="text-sm text-gray-500">30.0 in</p>
</div>
<div class="space-y-3">
<label for="chairWidth" class="block text-sm font-medium text-gray-700">Chair Width (in)</label>
<div class="relative flex items-center">
<i data-lucide="armchair" class="absolute left-4 top-1/2 transform -translate-y-1/2 text-gray-400"></i>
<input type="number" id="chairWidth" class="pl-12 pr-4 py-3 block w-full rounded-lg border-gray-300 shadow-sm focus:border-blue-600 focus:ring focus:ring-blue-600 focus:ring-opacity-50 text-lg" placeholder="24.0" step="0.1" min="18" max="36" value="24.0" required>
</div>
<input type="range" id="chairWidthRange" class="range-input w-full h-2 bg-gray-200 rounded-lg cursor-pointer" min="18" max="36" step="0.1" value="24">
<p id="chairWidthValue" class="text-sm text-gray-500">24.0 in</p>
</div>
<div class="space-y-3">
<label for="roomWidth" class="block text-sm font-medium text-gray-700">Room Width (ft)</label>
<div class="relative flex items-center">
<i data-lucide="maximize" class="absolute left-4 top-1/2 transform -translate-y-1/2 text-gray-400"></i>
<input type="number" id="roomWidth" class="pl-12 pr-4 py-3 block w-full rounded-lg border-gray-300 shadow-sm focus:border-blue-600 focus:ring focus:ring-blue-600 focus:ring-opacity-50 text-lg" placeholder="12.0" step="0.1" min="8" max="24" value="12.0" required>
</div>
<input type="range" id="roomWidthRange" class="range-input w-full h-2 bg-gray-200 rounded-lg cursor-pointer" min="8" max="24" step="0.1" value="12">
<p id="roomWidthValue" class="text-sm text-gray-500">12.0 ft</p>
</div>
</div>
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
<div class="space-y-3">
<label for="roomDepth" class="block text-sm font-medium text-gray-700">Room Depth (ft)</label>
<div class="relative flex items-center">
<i data-lucide="ruler" class="absolute left-4 top-1/2 transform -translate-y-1/2 text-gray-400"></i>
<input type="number" id="roomDepth" class="pl-12 pr-4 py-3 block w-full rounded-lg border-gray-300 shadow-sm focus:border-blue-600 focus:ring focus:ring-blue-600 focus:ring-opacity-50 text-lg" placeholder="10.0" step="0.1" min="8" max="24" value="10.0" required>
</div>
<input type="range" id="roomDepthRange" class="range-input w-full h-2 bg-gray-200 rounded-lg cursor-pointer" min="8" max="24" step="0.1" value="10">
<p id="roomDepthValue" class="text-sm text-gray-500">10.0 ft</p>
</div>
<div class="space-y-3">
<label for="deskType" class="block text-sm font-medium text-gray-700">Desk Type</label>
<div class="relative flex items-center">
<i data-lucide="archive" class="absolute left-4 top-1/2 transform -translate-y-1/2 text-gray-400"></i>
<select id="deskType" class="pl-12 pr-10 py-3 block w-full rounded-lg border-gray-300 shadow-sm focus:border-blue-600 focus:ring focus:ring-blue-600 focus:ring-opacity-50 text-lg" required>
<option value="Standard" selected>Standard</option>
<option value="Standing">Standing</option>
</select>
</div>
</div>
</div>
<button type="submit" class="btn-primary w-full bg-blue-600 text-white py-4 px-8 rounded-xl hover:bg-blue-700 flex items-center justify-center text-lg">
<i data-lucide="search" class="mr-3 h-5 w-5"></i>
Check Desk Fit
</button>
</form>
</div>
<!-- Result Section -->
<div id="resultSection" class="result-card rounded-2xl p-10 hidden">
<h2 class="text-3xl font-semibold text-gray-800 mb-6 flex items-center">
<i data-lucide="check-circle-2" class="mr-3 text-green-500 h-7 w-7"></i>
Your Desk Fit Assessment
</h2>
<div id="resultOutput" class="text-gray-700 space-y-6 text-base">
<!-- Results will be dynamically inserted here -->
</div>
<div class="mt-10 flex flex-col md:flex-row justify-between items-center gap-6">
<div class="flex items-center text-blue-600">
<i data-lucide="info" class="mr-2 h-5 w-5"></i>
<p class="text-sm font-medium">Based on ergonomic and modern workspace design standards.</p>
</div>
<button id="downloadPdf" class="btn-primary bg-green-600 text-white py-3 px-8 rounded-xl hover:bg-green-700 flex items-center text-base">
<i data-lucide="download" class="mr-2 h-5 w-5"></i>
Download PDF Report
</button>
</div>
<!-- Visual Representation -->
<div class="mt-10 visual-container p-8">
<h3 class="text-xl font-medium text-gray-800 mb-4 flex items-center">
<i data-lucide="table-2" class="mr-3 text-blue-500 h-6 w-6"></i>
Interactive Desk & Workspace Visualization
</h3>
<div class="relative w-full h-96 bg-gray-200 rounded-xl overflow-hidden shadow-lg">
<canvas id="deskCanvas" class="w-full h-full"></canvas>
</div>
<p class="text-sm text-gray-600 mt-4">3D-like visualization showing the desk and chair scaled to your room width.</p>
</div>
<!-- Expert Insights -->
<div class="mt-10 bg-blue-50 p-8 rounded-xl shadow-sm">
<h3 class="text-xl font-medium text-gray-800 mb-4 flex items-center">
<i data-lucide="lightbulb" class="mr-3 text-yellow-500 h-6 w-6"></i>
Expert Insights for Workspace Setup
</h3>
<ul class="list-none space-y-4 text-gray-700 text-sm">
<li class="flex items-start">
<i data-lucide="check" class="mr-2 text-green-500 h-5 w-5"></i>
<span><strong>Clearance:</strong> Ensure 2 ft side clearance and 3.5 ft behind for chair movement.</span>
</li>
<li class="flex items-start">
<i data-lucide="check" class="mr-2 text-green-500 h-5 w-5"></i>
<span><strong>Ergonomics:</strong> Position monitor 20-30 in from eyes; consider standing desks for flexibility.</span>
</li>
<li class="flex items-start">
<i data-lucide="check" class="mr-2 text-green-500 h-5 w-5"></i>
<span><strong>Traffic Flow:</strong> Maintain 3 ft walkways to prevent congestion.</span>
</li>
<li class="flex items-start">
<i data-lucide="check" class="mr-2 text-green-500 h-5 w-5"></i>
<span><strong>Lighting:</strong> Use natural light with adjustable blinds to reduce glare.</span>
</li>
<li class="flex items-start">
<i data-lucide="check" class="mr-2 text-green-500 h-5 w-5"></i>
<span><strong>Tech Integration:</strong> Include cable management and outlets for a clean setup.</span>
</li>
</ul>
</div>
</div>
</div>
</div>
<script>
// Initialize Lucid Icons
lucide.createIcons();
// Sync range and number inputs
function syncInputs(numberId, rangeId, valueId, unit) {
const numberInput = document.getElementById(numberId);
const rangeInput = document.getElementById(rangeId);
const valueDisplay = document.getElementById(valueId);
numberInput.addEventListener('input', () => {
rangeInput.value = numberInput.value;
valueDisplay.textContent = `${parseFloat(numberInput.value).toFixed(1)} ${unit}`;
});
rangeInput.addEventListener('input', () => {
numberInput.value = rangeInput.value;
valueDisplay.textContent = `${parseFloat(rangeInput.value).toFixed(1)} ${unit}`;
});
}
syncInputs('deskWidth', 'deskWidthRange', 'deskWidthValue', 'in');
syncInputs('deskDepth', 'deskDepthRange', 'deskDepthValue', 'in');
syncInputs('chairWidth', 'chairWidthRange', 'chairWidthValue', 'in');
syncInputs('roomWidth', 'roomWidthRange', 'roomWidthValue', 'ft');
syncInputs('roomDepth', 'roomDepthRange', 'roomDepthValue', 'ft');
// Form Submission
document.getElementById('deskFitForm').addEventListener('submit', function (e) {
e.preventDefault();
calculateDeskFit();
});
function calculateDeskFit() {
const deskWidth = parseFloat(document.getElementById('deskWidth').value);
const deskDepth = parseFloat(document.getElementById('deskDepth').value);
const chairWidth = parseFloat(document.getElementById('chairWidth').value);
const roomWidth = parseFloat(document.getElementById('roomWidth').value);
const roomDepth = parseFloat(document.getElementById('roomDepth').value);
const deskType = document.getElementById('deskType').value;
if (!deskWidth || !deskDepth || !chairWidth || !roomWidth || !roomDepth ||
deskWidth < 30 || deskDepth < 20 || chairWidth < 18 || roomWidth < 8 || roomDepth < 8) {
alert('Please enter valid values (Desk Width ≥ 30 in, Depth ≥ 20 in, Chair Width ≥ 18 in, Room Width/Depth ≥ 8 ft).');
return;
}
// Convert room dimensions to inches
const roomWidthInches = roomWidth * 12;
const roomDepthInches = roomDepth * 12;
// Calculate total space needed (2 ft clearance on sides, 3.5 ft behind for chair movement)
const totalWidth = Math.max(deskWidth, chairWidth) + 48; // 2 ft each side
const totalDepth = deskDepth + 42; // 3.5 ft for chair
const proportionCheck = deskWidth / roomWidthInches <= 0.65; // Desk ≤ 65% room width for aesthetics
// Check fit
const widthClearance = roomWidthInches >= totalWidth;
const depthClearance = roomDepthInches >= totalDepth;
const deskFit = widthClearance && depthClearance && proportionCheck ? 'Yes' : 'No';
// Calculate clearance/overages
const widthClearanceFt = (roomWidthInches - Math.max(deskWidth, chairWidth)) / 12;
const depthClearanceFt = (roomDepthInches - deskDepth - 42) / 12;
// Generate output
const output = `
<div class="grid grid-cols-1 md:grid-cols-2 gap-6 bg-white p-6 rounded-xl shadow-sm">
<div>
<p class="font-medium text-gray-700">Desk Type</p>
<p class="text-lg">${deskType}</p>
</div>
<div>
<p class="font-medium text-gray-700">Desk & Chair Dimensions</p>
<p class="text-xl text-blue-600 font-semibold">Desk: ${deskWidth.toFixed(1)} x ${deskDepth.toFixed(1)} in, Chair: ${chairWidth.toFixed(1)} in wide</p>
</div>
<div>
<p class="font-medium text-gray-700">Room Dimensions</p>
<p class="text-lg">${roomWidth.toFixed(1)} x ${roomDepth.toFixed(1)} ft</p>
</div>
<div>
<p class="font-medium text-gray-700">Fit Assessment</p>
<p class="text-lg ${deskFit === 'Yes' ? 'text-green-600' : 'text-red-600'} font-semibold">
${deskFit === 'Yes' ? 'Perfect Fit' : 'May Not Fit Comfortably'}
</p>
<p class="text-sm text-gray-600">${
deskFit === 'Yes'
? `The setup fits with ${widthClearanceFt.toFixed(1)} ft width clearance and ${depthClearanceFt.toFixed(1)} ft depth clearance (after chair space).`
: `Issues: ${
!widthClearance ? `Insufficient width clearance (need ≥2 ft each side, have ${widthClearanceFt.toFixed(1)} ft). ` : ''
}${
!depthClearance ? `Insufficient depth clearance (need ≥3.5 ft for chair, have ${depthClearanceFt.toFixed(1)} ft). ` : ''
}${
!proportionCheck ? 'Desk too wide for room proportion (≤65% recommended).' : ''
}`
}</p>
</div>
</div>
<div class="bg-blue-50 p-4 rounded-lg">
<p class="text-sm"><span class="font-medium">Tip:</span> For standing desks, ensure extra height clearance for monitor arms or risers.</p>
</div>
`;
document.getElementById('resultOutput').innerHTML = output;
document.getElementById('resultSection').classList.remove('hidden');
// Draw visualization
drawVisualization(deskWidth, deskDepth, chairWidth, roomWidth);
// Setup PDF download
setupPDFDownload(deskType, deskWidth, deskDepth, chairWidth, roomWidth, roomDepth, deskFit, widthClearanceFt, depthClearanceFt);
}
function drawVisualization(deskWidth, deskDepth, chairWidth, roomWidth) {
const canvas = document.getElementById('deskCanvas');
const ctx = canvas.getContext('2d');
canvas.width = canvas.offsetWidth;
canvas.height = canvas.offsetHeight;
// Clear canvas
ctx.clearRect(0, 0, canvas.width, canvas.height);
// Scale factors
const scale = canvas.width / (roomWidth * 12 * 1.5); // Scale to fit canvas
const deskW = deskWidth * scale;
const deskH = deskDepth * scale;
const chairW = chairWidth * scale;
const chairH = 42 * scale; // 3.5 ft chair clearance
const roomW = roomWidth * 12 * scale;
// Draw background with floor texture
const gradient = ctx.createLinearGradient(0, 0, 0, canvas.height);
gradient.addColorStop(0, '#e5e7eb');
gradient.addColorStop(1, '#d1d5db');
ctx.fillStyle = gradient;
ctx.fillRect(0, 0, canvas.width, canvas.height);
// Draw floor
ctx.fillStyle = 'rgba(120, 113, 108, 0.2)';
ctx.fillRect(0, canvas.height * 0.7, canvas.width, canvas.height * 0.3);
// Draw room outline (dashed)
ctx.strokeStyle = '#1e40af';
ctx.lineWidth = 2;
ctx.setLineDash([5, 5]);
ctx.strokeRect(canvas.width * 0.55, canvas.height * 0.2, roomW, deskH + chairH);
ctx.fillStyle = '#bfdbfe';
ctx.globalAlpha = 0.3;
ctx.fillRect(canvas.width * 0.55, canvas.height * 0.2, roomW, deskH + chairH);
ctx.globalAlpha = 1.0;
ctx.setLineDash([]);
// Draw desk with 3D-like perspective
ctx.shadowColor = 'rgba(0, 0, 0, 0.4)';
ctx.shadowBlur = 15;
ctx.shadowOffsetX = 8;
ctx.shadowOffsetY = 8;
ctx.fillStyle = '#2d3748';
const deskX = canvas.width * 0.15;
const deskY = canvas.height * 0.2;
// Main desk surface
ctx.fillRect(deskX, deskY, deskW, deskH);
// 3D effect (side panel)
ctx.fillStyle = '#1f2937';
ctx.beginPath();
ctx.moveTo(deskX + deskW, deskY);
ctx.lineTo(deskX + deskW + 10, deskY - 10);
ctx.lineTo(deskX + deskW + 10, deskY + deskH - 10);
ctx.lineTo(deskX + deskW, deskY + deskH);
ctx.closePath();
ctx.fill();
// Desk texture
const deskGradient = ctx.createLinearGradient(deskX, deskY, deskX + deskW, deskY + deskH);
deskGradient.addColorStop(0, 'rgba(255, 255, 255, 0.15)');
deskGradient.addColorStop(1, 'rgba(255, 255, 255, 0.05)');
ctx.fillStyle = deskGradient;
ctx.fillRect(deskX + 5, deskY + 5, deskW - 10, deskH - 10);
// Draw chair clearance area
ctx.fillStyle = '#4b5563';
ctx.globalAlpha = 0.5;
const chairX = deskX + (deskW - chairW) / 2;
ctx.fillRect(chairX, deskY + deskH, chairW, chairH);
ctx.globalAlpha = 1.0;
// Draw text
ctx.shadowColor = 'transparent';
ctx.fillStyle = '#ffffff';
ctx.font = 'bold 18px Poppins';
ctx.textAlign = 'center';
ctx.fillText(`Desk (${deskWidth.toFixed(1)} x ${deskDepth.toFixed(1)} in)`, deskX + deskW / 2, deskY + deskH / 2);
ctx.fillStyle = '#ffffff';
ctx.font = '14px Poppins';
ctx.fillText(`Chair (${chairWidth.toFixed(1)} in, 3.5 ft)`, chairX + chairW / 2, deskY + deskH + chairH / 2);
ctx.fillStyle = '#1e40af';
ctx.fillText(`Room (${roomWidth.toFixed(1)} ft)`, canvas.width * 0.55 + roomW / 2, canvas.height * 0.2 + (deskH + chairH) / 2);
ctx.font = '14px Poppins';
ctx.fillStyle = '#4b5563';
ctx.fillText(`Desk & Chair vs. Room Width`, canvas.width / 2, canvas.height - 30);
}
function setupPDFDownload(deskType, deskWidth, deskDepth, chairWidth, roomWidth, roomDepth, deskFit, widthClearanceFt, depthClearanceFt) {
document.getElementById('downloadPdf').onclick = function () {
const { jsPDF } = window.jspdf;
const doc = new jsPDF();
// Header
doc.setFont('helvetica', 'bold');
doc.setFontSize(20);
doc.setTextColor(31, 64, 175);
doc.text('HomeFit Tools - Desk Fit Assessment Report', 20, 20);
doc.setFont('helvetica', 'normal');
doc.setFontSize(10);
doc.setTextColor(100, 100, 100);
doc.text(`Generated on: ${new Date().toLocaleString()}`, 20, 28);
// Results
doc.setFontSize(14);
doc.setTextColor(0, 0, 0);
doc.text('Your Desk Fit Assessment', 20, 40);
doc.setFontSize(11);
doc.text(`Desk Type: ${deskType}`, 20, 50);
doc.text(`Desk Dimensions: ${deskWidth.toFixed(1)} x ${deskDepth.toFixed(1)} in`, 20, 58);
doc.text(`Chair Width: ${chairWidth.toFixed(1)} in`, 20, 66);
doc.text(`Room Dimensions: ${roomWidth.toFixed(1)} x ${roomDepth.toFixed(1)} ft`, 20, 74);
doc.text(`Fit Assessment: ${deskFit === 'Yes' ? 'Perfect Fit' : 'May Not Fit Comfortably'}`, 20, 82);
doc.text(`Clearance: ${widthClearanceFt.toFixed(1)} ft (width), ${depthClearanceFt.toFixed(1)} ft (depth, after chair)`, 20, 90);
doc.text(`Recommendation: ${
deskFit === 'Yes'
? 'Your desk and chair setup is suitable for this workspace.'
: 'Consider a smaller desk/chair or repositioning for better clearance.'
}`, 20, 98);
// Expert Insights
doc.setFont('helvetica', 'bold');
doc.setFontSize(12);
doc.text('Expert Insights', 20, 110);
doc.setFont('helvetica', 'normal');
doc.setFontSize(10);
doc.text('• Clearance: Ensure 2 ft side clearance and 3.5 ft behind for chair.', 20, 118);
doc.text('• Ergonomics: Monitor 20-30 in from eyes; consider standing desks.', 20, 126);
doc.text('• Traffic Flow: Maintain 3 ft walkways to avoid congestion.', 20, 134);
doc.text('• Lighting: Use natural light with adjustable blinds.', 20, 142);
doc.text('• Tech Integration: Include cable management and outlets.', 20, 150);
doc.save('HomeFit_Desk_Fit_Assessment.pdf');
};
}
</script>