Hugging Face's logo

Spaces:
MarkTheArtist
/
test2
Running

App Files Community
test2
File size: 3,543 Bytes 
da0afa7
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
 
html
<!DOCTYPE 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>