Spaces:
Running
Running
| html | |
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF- 8"> | |
| <meta name="viewport" content="width=device-width, initial-scale= 1.0"> | |
| <title>Laser Cut Box Generator (Butt Joints)</title> | |
| <style> | |
| body { | |
| font-family: Arial, sans-serif; | |
| } | |
| #design-container { | |
| width: 800px; | |
| height: 600px; | |
| border: 1px solid #000; | |
| margin-top: 20px; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <h1>Laser Cut Box Generator (Butt Joints)</h1> | |
| <label for="length">Length (inches):</label> | |
| <input type="number" id="length" value="5" step="0.1"> | |
| <br> | |
| <label for="width">Width (inches):</label> | |
| <input type="number" id="width" value="3" step="0.1"> | |
| <br> | |
| <label for="height">Height (inches):</label> | |
| <input type="number" id="height" value="2" step="0.1"> | |
| <br> | |
| <label for="thickness">Material Thickness (inches):</label> | |
| <input type="number" id="thickness" value="0.125" step="0.01"> | |
| <br> | |
| <button onclick="generateBoxDesign()">Generate Design</button> | |
| <div id="design-container"> | |
| <svg id="box-design" width="100%" height="100%"></svg> | |
| </div> | |
| <script> | |
| function generateBoxDesign() { | |
| const length = parseFloat(document.getElementById('length').value); | |
| const width = parseFloat(document.getElementById('width').value); | |
| const height = parseFloat(document.getElementById('height').value); | |
| const thickness = parseFloat(document.getElementById('thickness').value); | |
| const svgNS = "http://www.w3.org/2000/svg"; | |
| const svg = document.getElementById('box-design'); | |
| svg.innerHTML = ''; // Clear previous design | |
| let x = 10; | |
| let y = 10; | |
| // Bottom panel | |
| drawRect(svg, x, y, length, width); | |
| y += width + 10; | |
| // Side panels | |
| drawRect(svg, x, y, length, height); | |
| x += length + 10; | |
| drawRect(svg, x, y, length, height); | |
| x -= length + 10; | |
| y += height + 10; | |
| // End panels | |
| drawRect(svg, x, y, width, height); | |
| x += width + thickness + 10; | |
| drawRect(svg, x, y, width, height); | |
| // Adjust SVG viewBox to fit the design | |
| const maxX = x + width + 20; | |
| const maxY = y + height + 20; | |
| svg.setAttribute('viewBox', `0 0 ${maxX} ${maxY}`); | |
| } | |
| function drawRect(svg, x, y, width, height) { | |
| const svgNS = "http://www.w3.org/2000/svg"; | |
| const rect = document.createElementNS(svgNS, 'rect'); | |
| rect.setAttribute('x', x); | |
| rect.setAttribute('y', y); | |
| rect.setAttribute('width', width); | |
| rect.setAttribute('height', height); | |
| rect.setAttribute('stroke', 'black'); | |
| rect.setAttribute('fill', 'none'); | |
| svg.appendChild(rect); | |
| } | |
| // Generate a default design on page load | |
| generateBoxDesign(); | |
| </script> | |
| <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=MarkTheArtist/test2" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |