Spaces:
Running
Running
Create a site that will allow you to design laser cut boxes that use finger joints either open boxes with a lid or clothes boxes account for the curve
3980516 verified | <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>LaserBox Wizard - Design Custom Laser Cut Boxes</title> | |
| <link rel="stylesheet" href="style.css"> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script> | |
| <script src="https://unpkg.com/feather-icons"></script> | |
| </head> | |
| <body class="bg-gray-50 min-h-screen"> | |
| <custom-navbar></custom-navbar> | |
| <main class="container mx-auto px-4 py-8"> | |
| <div class="text-center mb-12"> | |
| <h1 class="text-4xl font-bold text-gray-800 mb-4">Design Your Perfect Laser Cut Box</h1> | |
| <p class="text-xl text-gray-600 max-w-3xl mx-auto">Customize dimensions, joints, and style to create boxes for any purpose</p> | |
| </div> | |
| <div class="grid grid-cols-1 lg:grid-cols-3 gap-8"> | |
| <!-- Design Panel --> | |
| <div class="lg:col-span-2 bg-white rounded-xl shadow-lg p-6"> | |
| <div class="flex justify-between items-center mb-6"> | |
| <h2 class="text-2xl font-semibold text-gray-800">Box Designer</h2> | |
| <div class="flex space-x-2"> | |
| <button class="px-4 py-2 bg-blue-500 text-white rounded-lg hover:bg-blue-600 transition"> | |
| <i data-feather="save" class="w-4 h-4 mr-2"></i> Save Design | |
| </button> | |
| <button class="px-4 py-2 bg-green-500 text-white rounded-lg hover:bg-green-600 transition"> | |
| <i data-feather="download" class="w-4 h-4 mr-2"></i> Export SVG | |
| </button> | |
| </div> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-8"> | |
| <!-- Box Type Selection --> | |
| <div> | |
| <label class="block text-sm font-medium text-gray-700 mb-2">Box Type</label> | |
| <div class="grid grid-cols-2 gap-2"> | |
| <button class="box-type-btn active" data-type="open"> | |
| <i data-feather="box" class="w-5 h-5 mr-2"></i> Open Box | |
| </button> | |
| <button class="box-type-btn" data-type="clothes"> | |
| <i data-feather="shirt" class="w-5 h-5 mr-2"></i> Clothes Box | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Material Thickness --> | |
| <div> | |
| <label for="material-thickness" class="block text-sm font-medium text-gray-700 mb-2">Material Thickness (mm)</label> | |
| <input type="range" id="material-thickness" min="1" max="10" step="0.5" value="3" class="w-full"> | |
| <div class="flex justify-between text-xs text-gray-500"> | |
| <span>1mm</span> | |
| <span id="thickness-value">3mm</span> | |
| <span>10mm</span> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Dimensions --> | |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-4 mb-8"> | |
| <div> | |
| <label for="box-length" class="block text-sm font-medium text-gray-700 mb-2">Length (mm)</label> | |
| <input type="number" id="box-length" value="200" min="50" max="1000" class="w-full px-3 py-2 border border-gray-300 rounded-md"> | |
| </div> | |
| <div> | |
| <label for="box-width" class="block text-sm font-medium text-gray-700 mb-2">Width (mm)</label> | |
| <input type="number" id="box-width" value="150" min="50" max="1000" class="w-full px-3 py-2 border border-gray-300 rounded-md"> | |
| </div> | |
| <div> | |
| <label for="box-height" class="block text-sm font-medium text-gray-700 mb-2">Height (mm)</label> | |
| <input type="number" id="box-height" value="100" min="20" max="500" class="w-full px-3 py-2 border border-gray-300 rounded-md"> | |
| </div> | |
| </div> | |
| <!-- Joint Options --> | |
| <div class="mb-8"> | |
| <label class="block text-sm font-medium text-gray-700 mb-2">Finger Joint Options</label> | |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-4"> | |
| <div> | |
| <label for="joint-width" class="block text-xs text-gray-500 mb-1">Joint Width (mm)</label> | |
| <input type="number" id="joint-width" value="10" min="5" max="30" class="w-full px-3 py-2 border border-gray-300 rounded-md"> | |
| </div> | |
| <div> | |
| <label for="joint-count" class="block text-xs text-gray-500 mb-1">Joints per Side</label> | |
| <input type="number" id="joint-count" value="5" min="3" max="15" class="w-full px-3 py-2 border border-gray-300 rounded-md"> | |
| </div> | |
| <div> | |
| <label for="joint-style" class="block text-xs text-gray-500 mb-1">Joint Style</label> | |
| <select id="joint-style" class="w-full px-3 py-2 border border-gray-300 rounded-md"> | |
| <option value="straight">Straight</option> | |
| <option value="curved">Curved</option> | |
| <option value="dovetail">Dovetail</option> | |
| </select> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Preview Area --> | |
| <div class="border-2 border-dashed border-gray-300 rounded-lg p-4 h-64 flex items-center justify-center bg-gray-50"> | |
| <p class="text-gray-400">Box preview will appear here</p> | |
| </div> | |
| </div> | |
| <!-- Examples and Templates --> | |
| <div class="bg-white rounded-xl shadow-lg p-6"> | |
| <h2 class="text-2xl font-semibold text-gray-800 mb-6">Templates & Examples</h2> | |
| <div class="grid grid-cols-2 gap-4"> | |
| <div class="template-card" data-template="small-jewelry"> | |
| <div class="h-24 bg-blue-50 rounded-lg mb-2"></div> | |
| <p class="text-sm font-medium">Small Jewelry Box</p> | |
| <p class="text-xs text-gray-500">100×80×50mm</p> | |
| </div> | |
| <div class="template-card" data-template="medium-storage"> | |
| <div class="h-24 bg-green-50 rounded-lg mb-2"></div> | |
| <p class="text-sm font-medium">Storage Box</p> | |
| <p class="text-xs text-gray-500">250×180×120mm</p> | |
| </div> | |
| <div class="template-card" data-template="large-clothes"> | |
| <div class="h-24 bg-purple-50 rounded-lg mb-2"></div> | |
| <p class="text-sm font-medium">Clothes Box</p> | |
| <p class="text-xs text-gray-500">400×300×200mm</p> | |
| </div> | |
| <div class="template-card" data-template="custom"> | |
| <div class="h-24 bg-gray-100 rounded-lg mb-2 flex items-center justify-center"> | |
| <i data-feather="plus" class="text-gray-400"></i> | |
| </div> | |
| <p class="text-sm font-medium">Start from Scratch</p> | |
| </div> | |
| </div> | |
| <div class="mt-8"> | |
| <h3 class="font-medium text-gray-700 mb-3">Recent Designs</h3> | |
| <div class="space-y-2"> | |
| <div class="flex items-center p-2 hover:bg-gray-50 rounded-lg cursor-pointer"> | |
| <div class="w-10 h-10 bg-yellow-100 rounded mr-3"></div> | |
| <div> | |
| <p class="text-sm font-medium">Photo Storage Box</p> | |
| <p class="text-xs text-gray-500">Last modified: 2 days ago</p> | |
| </div> | |
| </div> | |
| <div class="flex items-center p-2 hover:bg-gray-50 rounded-lg cursor-pointer"> | |
| <div class="w-10 h-10 bg-red-100 rounded mr-3"></div> | |
| <div> | |
| <p class="text-sm font-medium">Tool Organizer</p> | |
| <p class="text-xs text-gray-500">Last modified: 1 week ago</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </main> | |
| <custom-footer></custom-footer> | |
| <script src="components/navbar.js"></script> | |
| <script src="components/footer.js"></script> | |
| <script src="script.js"></script> | |
| <script> | |
| feather.replace(); | |
| // Initialize any specific page scripts here | |
| document.getElementById('material-thickness').addEventListener('input', function() { | |
| document.getElementById('thickness-value').textContent = this.value + 'mm'; | |
| }); | |
| </script> | |
| <script src="https://huggingface.co/deepsite/deepsite-badge.js"></script> | |
| </body> | |
| </html> |