|
|
<!DOCTYPE html> |
|
|
<html lang="en"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
<title>BoxCraft - Laser Cut Box Generator</title> |
|
|
<script src="https://cdn.tailwindcss.com"></script> |
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> |
|
|
<style> |
|
|
.preview-container { |
|
|
perspective: 1000px; |
|
|
} |
|
|
.box-preview { |
|
|
transform-style: preserve-3d; |
|
|
transition: transform 1s; |
|
|
} |
|
|
.box-face { |
|
|
position: absolute; |
|
|
border: 1px solid #ccc; |
|
|
background-color: rgba(255, 255, 255, 0.8); |
|
|
display: flex; |
|
|
align-items: center; |
|
|
justify-content: center; |
|
|
box-shadow: inset 0 0 10px rgba(0,0,0,0.1); |
|
|
} |
|
|
.tab { |
|
|
background-color: #f0f0f0; |
|
|
border: 1px solid #ddd; |
|
|
} |
|
|
.material-preview { |
|
|
transition: all 0.3s ease; |
|
|
} |
|
|
.material-preview:hover { |
|
|
transform: scale(1.05); |
|
|
box-shadow: 0 10px 20px rgba(0,0,0,0.1); |
|
|
} |
|
|
.material-preview.selected { |
|
|
border: 3px solid #3b82f6; |
|
|
} |
|
|
#preview-svg { |
|
|
width: 100%; |
|
|
height: auto; |
|
|
} |
|
|
.download-btn { |
|
|
transition: all 0.3s ease; |
|
|
} |
|
|
.download-btn:hover { |
|
|
transform: translateY(-2px); |
|
|
} |
|
|
</style> |
|
|
</head> |
|
|
<body class="bg-gray-50"> |
|
|
<header class="bg-white shadow-sm"> |
|
|
<div class="container mx-auto px-4 py-6"> |
|
|
<div class="flex justify-between items-center"> |
|
|
<div class="flex items-center space-x-2"> |
|
|
<i class="fas fa-box-open text-blue-500 text-3xl"></i> |
|
|
<h1 class="text-2xl font-bold text-gray-800">BoxCraft</h1> |
|
|
</div> |
|
|
<nav class="hidden md:flex space-x-6"> |
|
|
<a href="#" class="text-blue-500 font-medium">Home</a> |
|
|
<a href="#" class="text-gray-600 hover:text-blue-500">Templates</a> |
|
|
<a href="#" class="text-gray-600 hover:text-blue-500">Materials</a> |
|
|
<a href="#" class="text-gray-600 hover:text-blue-500">Pricing</a> |
|
|
<a href="#" class="text-gray-600 hover:text-blue-500">About</a> |
|
|
</nav> |
|
|
<button class="md:hidden text-gray-600"> |
|
|
<i class="fas fa-bars text-2xl"></i> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</header> |
|
|
|
|
|
<main class="container mx-auto px-4 py-8"> |
|
|
<div class="text-center mb-12"> |
|
|
<h2 class="text-4xl font-bold text-gray-800 mb-4">Laser Cut Box Generator</h2> |
|
|
<p class="text-xl text-gray-600 max-w-3xl mx-auto">Design custom laser-cut boxes in minutes. Perfect for packaging, storage, or creative projects.</p> |
|
|
</div> |
|
|
|
|
|
<div class="grid grid-cols-1 lg:grid-cols-3 gap-8"> |
|
|
|
|
|
<div class="bg-white rounded-xl shadow-md p-6 lg:col-span-1"> |
|
|
<h3 class="text-xl font-semibold text-gray-800 mb-6">Box Configuration</h3> |
|
|
|
|
|
<div class="space-y-6"> |
|
|
|
|
|
<div> |
|
|
<h4 class="text-lg font-medium text-gray-700 mb-3">Dimensions (mm)</h4> |
|
|
<div class="grid grid-cols-3 gap-3"> |
|
|
<div> |
|
|
<label class="block text-sm font-medium text-gray-600 mb-1">Length</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 focus:outline-none focus:ring-2 focus:ring-blue-500"> |
|
|
</div> |
|
|
<div> |
|
|
<label class="block text-sm font-medium text-gray-600 mb-1">Width</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 focus:outline-none focus:ring-2 focus:ring-blue-500"> |
|
|
</div> |
|
|
<div> |
|
|
<label class="block text-sm font-medium text-gray-600 mb-1">Height</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 focus:outline-none focus:ring-2 focus:ring-blue-500"> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div> |
|
|
<h4 class="text-lg font-medium text-gray-700 mb-3">Material Thickness (mm)</h4> |
|
|
<input type="number" id="material-thickness" value="3" min="1" max="20" step="0.5" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div> |
|
|
<h4 class="text-lg font-medium text-gray-700 mb-3">Joint Type</h4> |
|
|
<div class="grid grid-cols-2 gap-3"> |
|
|
<button id="finger-joint" class="joint-btn py-2 px-4 border border-blue-500 bg-blue-50 text-blue-600 rounded-md font-medium active">Finger Joint</button> |
|
|
<button id="tab-slot" class="joint-btn py-2 px-4 border border-gray-300 bg-white text-gray-700 rounded-md font-medium">Tab & Slot</button> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div id="finger-joint-options"> |
|
|
<h4 class="text-lg font-medium text-gray-700 mb-3">Finger Joint Options</h4> |
|
|
<div class="grid grid-cols-2 gap-3"> |
|
|
<div> |
|
|
<label class="block text-sm font-medium text-gray-600 mb-1">Finger Width (mm)</label> |
|
|
<input type="number" id="finger-width" value="10" min="5" max="30" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"> |
|
|
</div> |
|
|
<div> |
|
|
<label class="block text-sm font-medium text-gray-600 mb-1">Finger Count</label> |
|
|
<input type="number" id="finger-count" value="5" min="3" max="20" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div id="tab-slot-options" class="hidden"> |
|
|
<h4 class="text-lg font-medium text-gray-700 mb-3">Tab & Slot Options</h4> |
|
|
<div class="grid grid-cols-2 gap-3"> |
|
|
<div> |
|
|
<label class="block text-sm font-medium text-gray-600 mb-1">Tab Width (mm)</label> |
|
|
<input type="number" id="tab-width" value="15" min="5" max="30" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"> |
|
|
</div> |
|
|
<div> |
|
|
<label class="block text-sm font-medium text-gray-600 mb-1">Tab Length (mm)</label> |
|
|
<input type="number" id="tab-length" value="10" min="5" max="30" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div> |
|
|
<h4 class="text-lg font-medium text-gray-700 mb-3">Lid Options</h4> |
|
|
<div class="space-y-2"> |
|
|
<div class="flex items-center"> |
|
|
<input type="radio" id="no-lid" name="lid-type" value="none" class="h-4 w-4 text-blue-600 focus:ring-blue-500" checked> |
|
|
<label for="no-lid" class="ml-2 text-sm text-gray-700">No Lid</label> |
|
|
</div> |
|
|
<div class="flex items-center"> |
|
|
<input type="radio" id="separate-lid" name="lid-type" value="separate" class="h-4 w-4 text-blue-600 focus:ring-blue-500"> |
|
|
<label for="separate-lid" class="ml-2 text-sm text-gray-700">Separate Lid</label> |
|
|
</div> |
|
|
<div class="flex items-center"> |
|
|
<input type="radio" id="hinged-lid" name="lid-type" value="hinged" class="h-4 w-4 text-blue-600 focus:ring-blue-500"> |
|
|
<label for="hinged-lid" class="ml-2 text-sm text-gray-700">Hinged Lid</label> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div> |
|
|
<h4 class="text-lg font-medium text-gray-700 mb-3">Material</h4> |
|
|
<div class="grid grid-cols-3 gap-3"> |
|
|
<div class="material-preview p-3 rounded-lg cursor-pointer border border-gray-200 selected" data-material="plywood"> |
|
|
<div class="h-12 bg-amber-100 rounded-md mb-2"></div> |
|
|
<p class="text-sm text-center">Plywood</p> |
|
|
</div> |
|
|
<div class="material-preview p-3 rounded-lg cursor-pointer border border-gray-200" data-material="acrylic"> |
|
|
<div class="h-12 bg-blue-100 rounded-md mb-2"></div> |
|
|
<p class="text-sm text-center">Acrylic</p> |
|
|
</div> |
|
|
<div class="material-preview p-3 rounded-lg cursor-pointer border border-gray-200" data-material="mdf"> |
|
|
<div class="h-12 bg-gray-200 rounded-md mb-2"></div> |
|
|
<p class="text-sm text-center">MDF</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div> |
|
|
<h4 class="text-lg font-medium text-gray-700 mb-3">Decorative Elements</h4> |
|
|
<div class="space-y-3"> |
|
|
<div class="flex items-center justify-between"> |
|
|
<label class="text-sm text-gray-600">Ventilation Holes</label> |
|
|
<label class="relative inline-flex items-center cursor-pointer"> |
|
|
<input type="checkbox" id="ventilation-holes" class="sr-only peer"> |
|
|
<div class="w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-blue-300 rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-blue-600"></div> |
|
|
</label> |
|
|
</div> |
|
|
<div class="flex items-center justify-between"> |
|
|
<label class="text-sm text-gray-600">Engraved Text</label> |
|
|
<label class="relative inline-flex items-center cursor-pointer"> |
|
|
<input type="checkbox" id="engraved-text" class="sr-only peer"> |
|
|
<div class="w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-blue-300 rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-blue-600"></div> |
|
|
</label> |
|
|
</div> |
|
|
<div id="text-options" class="hidden mt-2"> |
|
|
<input type="text" id="engraving-text" placeholder="Enter text to engrave" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"> |
|
|
<div class="mt-2"> |
|
|
<label class="block text-sm font-medium text-gray-600 mb-1">Font Size (mm)</label> |
|
|
<input type="number" id="font-size" value="10" min="5" max="50" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-white rounded-xl shadow-md p-6 lg:col-span-2"> |
|
|
<div class="flex justify-between items-center mb-6"> |
|
|
<h3 class="text-xl font-semibold text-gray-800">Preview</h3> |
|
|
<div class="flex space-x-3"> |
|
|
<button id="rotate-left" class="p-2 rounded-full bg-gray-100 text-gray-600 hover:bg-gray-200"> |
|
|
<i class="fas fa-undo"></i> |
|
|
</button> |
|
|
<button id="rotate-right" class="p-2 rounded-full bg-gray-100 text-gray-600 hover:bg-gray-200"> |
|
|
<i class="fas fa-redo"></i> |
|
|
</button> |
|
|
<button id="reset-view" class="p-2 rounded-full bg-gray-100 text-gray-600 hover:bg-gray-200"> |
|
|
<i class="fas fa-sync-alt"></i> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="preview-container mb-8 h-64 md:h-80 bg-gray-100 rounded-lg flex items-center justify-center"> |
|
|
<div class="box-preview relative w-40 h-40"> |
|
|
|
|
|
<div class="box-face front w-40 h-20" style="transform: rotateX(0deg) translateZ(10px);"> |
|
|
<span class="text-xs text-gray-500">Front</span> |
|
|
</div> |
|
|
|
|
|
<div class="box-face back w-40 h-20" style="transform: rotateX(180deg) translateZ(10px);"> |
|
|
<span class="text-xs text-gray-500">Back</span> |
|
|
</div> |
|
|
|
|
|
<div class="box-face right w-20 h-20" style="transform: rotateY(90deg) translateZ(30px);"> |
|
|
<span class="text-xs text-gray-500">Right</span> |
|
|
</div> |
|
|
|
|
|
<div class="box-face left w-20 h-20" style="transform: rotateY(-90deg) translateZ(30px);"> |
|
|
<span class="text-xs text-gray-500">Left</span> |
|
|
</div> |
|
|
|
|
|
<div class="box-face top w-40 h-20" style="transform: rotateX(90deg) translateZ(10px);"> |
|
|
<span class="text-xs text-gray-500">Top</span> |
|
|
</div> |
|
|
|
|
|
<div class="box-face bottom w-40 h-20" style="transform: rotateX(-90deg) translateZ(10px);"> |
|
|
<span class="text-xs text-gray-500">Bottom</span> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="mb-6"> |
|
|
<h4 class="text-lg font-medium text-gray-700 mb-3">Cutting Pattern</h4> |
|
|
<div class="bg-gray-100 rounded-lg p-4"> |
|
|
<svg id="preview-svg" viewBox="0 0 500 300" xmlns="http://www.w3.org/2000/svg"> |
|
|
|
|
|
<rect x="10" y="10" width="150" height="100" fill="none" stroke="#3b82f6" stroke |
|
|
</html> |
