Hugging Face's logo

Spaces:
MarkTheArtist
/
laserbox-wizard
Running

App Files Community
MarkTheArtist commited on
Commit
3980516
·
verified ·
1 Parent(s): 335139c

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

Browse files
Files changed (6) hide show
  1. README.md +8 -5
  2. components/footer.js +86 -0
  3. components/navbar.js +64 -0
  4. index.html +172 -19
  5. script.js +31 -0
  6. style.css +36 -18
README.md CHANGED
@@ -1,10 +1,13 @@
1
  ---
2
- title: Laserbox Wizard
3
- emoji: 👀
4
- colorFrom: gray
5
- colorTo: indigo
6
  sdk: static
7
  pinned: false
 
 
8
  ---
9
 
10
- Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
 
 
1
  ---
2
+ title: LaserBox Wizard 🧙‍♂️✨
3
+ colorFrom: purple
4
+ colorTo: blue
5
+ emoji: 🐳
6
  sdk: static
7
  pinned: false
8
+ tags:
9
+ - deepsite-v3
10
  ---
11
 
12
+ # Welcome to your new DeepSite project!
13
+ This project was created with [DeepSite](https://huggingface.co/deepsite).
components/footer.js ADDED
@@ -0,0 +1,86 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ class CustomFooter extends HTMLElement {
2
+ connectedCallback() {
3
+ this.attachShadow({ mode: 'open' });
4
+ this.shadowRoot.innerHTML = `
5
+ <style>
6
+ footer {
7
+ @apply bg-gray-800 text-white;
8
+ }
9
+ .container {
10
+ @apply max-w-7xl mx-auto py-12 px-4 sm:px-6 lg:px-8;
11
+ }
12
+ .footer-grid {
13
+ @apply grid grid-cols-2 md:grid-cols-4 gap-8;
14
+ }
15
+ .footer-title {
16
+ @apply text-sm font-semibold tracking-wider uppercase;
17
+ }
18
+ .footer-links {
19
+ @apply mt-4 space-y-4;
20
+ }
21
+ .footer-link {
22
+ @apply text-base text-gray-300 hover:text-white;
23
+ }
24
+ .copyright {
25
+ @apply mt-8 border-t border-gray-700 pt-8 flex justify-between;
26
+ }
27
+ .social-links {
28
+ @apply flex space-x-6;
29
+ }
30
+ </style>
31
+ <footer>
32
+ <div class="container">
33
+ <div class="footer-grid">
34
+ <div>
35
+ <h3 class="footer-title">Product</h3>
36
+ <div class="footer-links">
37
+ <a href="#" class="footer-link">Features</a>
38
+ <a href="#" class="footer-link">Templates</a>
39
+ <a href="#" class="footer-link">Pricing</a>
40
+ </div>
41
+ </div>
42
+ <div>
43
+ <h3 class="footer-title">Resources</h3>
44
+ <div class="footer-links">
45
+ <a href="#" class="footer-link">Documentation</a>
46
+ <a href="#" class="footer-link">Tutorials</a>
47
+ <a href="#" class="footer-link">API</a>
48
+ </div>
49
+ </div>
50
+ <div>
51
+ <h3 class="footer-title">Company</h3>
52
+ <div class="footer-links">
53
+ <a href="#" class="footer-link">About</a>
54
+ <a href="#" class="footer-link">Blog</a>
55
+ <a href="#" class="footer-link">Jobs</a>
56
+ </div>
57
+ </div>
58
+ <div>
59
+ <h3 class="footer-title">Legal</h3>
60
+ <div class="footer-links">
61
+ <a href="#" class="footer-link">Privacy</a>
62
+ <a href="#" class="footer-link">Terms</a>
63
+ <a href="#" class="footer-link">Cookie Policy</a>
64
+ </div>
65
+ </div>
66
+ </div>
67
+ <div class="copyright">
68
+ <p>© 2023 LaserBox Wizard. All rights reserved.</p>
69
+ <div class="social-links">
70
+ <a href="#" class="text-gray-400 hover:text-white">
71
+ <i data-feather="twitter"></i>
72
+ </a>
73
+ <a href="#" class="text-gray-400 hover:text-white">
74
+ <i data-feather="github"></i>
75
+ </a>
76
+ <a href="#" class="text-gray-400 hover:text-white">
77
+ <i data-feather="instagram"></i>
78
+ </a>
79
+ </div>
80
+ </div>
81
+ </div>
82
+ </footer>
83
+ `;
84
+ }
85
+ }
86
+ customElements.define('custom-footer', CustomFooter);
components/navbar.js ADDED
@@ -0,0 +1,64 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ class CustomNavbar extends HTMLElement {
2
+ connectedCallback() {
3
+ this.attachShadow({ mode: 'open' });
4
+ this.shadowRoot.innerHTML = `
5
+ <style>
6
+ nav {
7
+ @apply bg-white shadow-sm;
8
+ }
9
+ .container {
10
+ @apply max-w-7xl mx-auto px-4 sm:px-6 lg:px-8;
11
+ }
12
+ .nav-content {
13
+ @apply flex justify-between h-16;
14
+ }
15
+ .nav-links {
16
+ @apply flex space-x-8;
17
+ }
18
+ .nav-link {
19
+ @apply inline-flex items-center px-1 pt-1 border-b-2 border-transparent text-sm font-medium text-gray-500 hover:text-gray-700 hover:border-gray-300;
20
+ }
21
+ .nav-link.active {
22
+ @apply border-blue-500 text-gray-900;
23
+ }
24
+ .logo {
25
+ @apply flex-shrink-0 flex items-center;
26
+ }
27
+ .logo-text {
28
+ @apply text-xl font-bold text-blue-600;
29
+ }
30
+ .mobile-menu-button {
31
+ @apply inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-gray-500 hover:bg-gray-100;
32
+ }
33
+ </style>
34
+ <nav>
35
+ <div class="container">
36
+ <div class="nav-content">
37
+ <div class="flex items-center">
38
+ <div class="logo">
39
+ <span class="logo-text">LaserBox Wizard</span>
40
+ </div>
41
+ <div class="hidden md:ml-8 md:flex md:space-x-8">
42
+ <a href="#" class="nav-link active">Designer</a>
43
+ <a href="#" class="nav-link">Templates</a>
44
+ <a href="#" class="nav-link">My Designs</a>
45
+ <a href="#" class="nav-link">Help</a>
46
+ </div>
47
+ </div>
48
+ <div class="hidden md:flex items-center">
49
+ <button class="px-4 py-2 border border-transparent text-sm font-medium rounded-md text-white bg-blue-600 hover:bg-blue-700">
50
+ Sign In
51
+ </button>
52
+ </div>
53
+ <div class="-mr-2 flex items-center md:hidden">
54
+ <button class="mobile-menu-button">
55
+ <i data-feather="menu"></i>
56
+ </button>
57
+ </div>
58
+ </div>
59
+ </div>
60
+ </nav>
61
+ `;
62
+ }
63
+ }
64
+ customElements.define('custom-navbar', CustomNavbar);
index.html CHANGED
@@ -1,19 +1,172 @@
1
- <!doctype html>
2
- <html>
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width" />
6
- <title>My static Space</title>
7
- <link rel="stylesheet" href="style.css" />
8
- </head>
9
- <body>
10
- <div class="card">
11
- <h1>Welcome to your static Space!</h1>
12
- <p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
13
- <p>
14
- Also don't forget to check the
15
- <a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
16
- </p>
17
- </div>
18
- </body>
19
- </html>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>LaserBox Wizard - Design Custom Laser Cut Boxes</title>
7
+ <link rel="stylesheet" href="style.css">
8
+ <script src="https://cdn.tailwindcss.com"></script>
9
+ <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
10
+ <script src="https://unpkg.com/feather-icons"></script>
11
+ </head>
12
+ <body class="bg-gray-50 min-h-screen">
13
+ <custom-navbar></custom-navbar>
14
+
15
+ <main class="container mx-auto px-4 py-8">
16
+ <div class="text-center mb-12">
17
+ <h1 class="text-4xl font-bold text-gray-800 mb-4">Design Your Perfect Laser Cut Box</h1>
18
+ <p class="text-xl text-gray-600 max-w-3xl mx-auto">Customize dimensions, joints, and style to create boxes for any purpose</p>
19
+ </div>
20
+
21
+ <div class="grid grid-cols-1 lg:grid-cols-3 gap-8">
22
+ <!-- Design Panel -->
23
+ <div class="lg:col-span-2 bg-white rounded-xl shadow-lg p-6">
24
+ <div class="flex justify-between items-center mb-6">
25
+ <h2 class="text-2xl font-semibold text-gray-800">Box Designer</h2>
26
+ <div class="flex space-x-2">
27
+ <button class="px-4 py-2 bg-blue-500 text-white rounded-lg hover:bg-blue-600 transition">
28
+ <i data-feather="save" class="w-4 h-4 mr-2"></i> Save Design
29
+ </button>
30
+ <button class="px-4 py-2 bg-green-500 text-white rounded-lg hover:bg-green-600 transition">
31
+ <i data-feather="download" class="w-4 h-4 mr-2"></i> Export SVG
32
+ </button>
33
+ </div>
34
+ </div>
35
+
36
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-8">
37
+ <!-- Box Type Selection -->
38
+ <div>
39
+ <label class="block text-sm font-medium text-gray-700 mb-2">Box Type</label>
40
+ <div class="grid grid-cols-2 gap-2">
41
+ <button class="box-type-btn active" data-type="open">
42
+ <i data-feather="box" class="w-5 h-5 mr-2"></i> Open Box
43
+ </button>
44
+ <button class="box-type-btn" data-type="clothes">
45
+ <i data-feather="shirt" class="w-5 h-5 mr-2"></i> Clothes Box
46
+ </button>
47
+ </div>
48
+ </div>
49
+
50
+ <!-- Material Thickness -->
51
+ <div>
52
+ <label for="material-thickness" class="block text-sm font-medium text-gray-700 mb-2">Material Thickness (mm)</label>
53
+ <input type="range" id="material-thickness" min="1" max="10" step="0.5" value="3" class="w-full">
54
+ <div class="flex justify-between text-xs text-gray-500">
55
+ <span>1mm</span>
56
+ <span id="thickness-value">3mm</span>
57
+ <span>10mm</span>
58
+ </div>
59
+ </div>
60
+ </div>
61
+
62
+ <!-- Dimensions -->
63
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-4 mb-8">
64
+ <div>
65
+ <label for="box-length" class="block text-sm font-medium text-gray-700 mb-2">Length (mm)</label>
66
+ <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">
67
+ </div>
68
+ <div>
69
+ <label for="box-width" class="block text-sm font-medium text-gray-700 mb-2">Width (mm)</label>
70
+ <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">
71
+ </div>
72
+ <div>
73
+ <label for="box-height" class="block text-sm font-medium text-gray-700 mb-2">Height (mm)</label>
74
+ <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">
75
+ </div>
76
+ </div>
77
+
78
+ <!-- Joint Options -->
79
+ <div class="mb-8">
80
+ <label class="block text-sm font-medium text-gray-700 mb-2">Finger Joint Options</label>
81
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
82
+ <div>
83
+ <label for="joint-width" class="block text-xs text-gray-500 mb-1">Joint Width (mm)</label>
84
+ <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">
85
+ </div>
86
+ <div>
87
+ <label for="joint-count" class="block text-xs text-gray-500 mb-1">Joints per Side</label>
88
+ <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">
89
+ </div>
90
+ <div>
91
+ <label for="joint-style" class="block text-xs text-gray-500 mb-1">Joint Style</label>
92
+ <select id="joint-style" class="w-full px-3 py-2 border border-gray-300 rounded-md">
93
+ <option value="straight">Straight</option>
94
+ <option value="curved">Curved</option>
95
+ <option value="dovetail">Dovetail</option>
96
+ </select>
97
+ </div>
98
+ </div>
99
+ </div>
100
+
101
+ <!-- Preview Area -->
102
+ <div class="border-2 border-dashed border-gray-300 rounded-lg p-4 h-64 flex items-center justify-center bg-gray-50">
103
+ <p class="text-gray-400">Box preview will appear here</p>
104
+ </div>
105
+ </div>
106
+
107
+ <!-- Examples and Templates -->
108
+ <div class="bg-white rounded-xl shadow-lg p-6">
109
+ <h2 class="text-2xl font-semibold text-gray-800 mb-6">Templates & Examples</h2>
110
+
111
+ <div class="grid grid-cols-2 gap-4">
112
+ <div class="template-card" data-template="small-jewelry">
113
+ <div class="h-24 bg-blue-50 rounded-lg mb-2"></div>
114
+ <p class="text-sm font-medium">Small Jewelry Box</p>
115
+ <p class="text-xs text-gray-500">100×80×50mm</p>
116
+ </div>
117
+ <div class="template-card" data-template="medium-storage">
118
+ <div class="h-24 bg-green-50 rounded-lg mb-2"></div>
119
+ <p class="text-sm font-medium">Storage Box</p>
120
+ <p class="text-xs text-gray-500">250×180×120mm</p>
121
+ </div>
122
+ <div class="template-card" data-template="large-clothes">
123
+ <div class="h-24 bg-purple-50 rounded-lg mb-2"></div>
124
+ <p class="text-sm font-medium">Clothes Box</p>
125
+ <p class="text-xs text-gray-500">400×300×200mm</p>
126
+ </div>
127
+ <div class="template-card" data-template="custom">
128
+ <div class="h-24 bg-gray-100 rounded-lg mb-2 flex items-center justify-center">
129
+ <i data-feather="plus" class="text-gray-400"></i>
130
+ </div>
131
+ <p class="text-sm font-medium">Start from Scratch</p>
132
+ </div>
133
+ </div>
134
+
135
+ <div class="mt-8">
136
+ <h3 class="font-medium text-gray-700 mb-3">Recent Designs</h3>
137
+ <div class="space-y-2">
138
+ <div class="flex items-center p-2 hover:bg-gray-50 rounded-lg cursor-pointer">
139
+ <div class="w-10 h-10 bg-yellow-100 rounded mr-3"></div>
140
+ <div>
141
+ <p class="text-sm font-medium">Photo Storage Box</p>
142
+ <p class="text-xs text-gray-500">Last modified: 2 days ago</p>
143
+ </div>
144
+ </div>
145
+ <div class="flex items-center p-2 hover:bg-gray-50 rounded-lg cursor-pointer">
146
+ <div class="w-10 h-10 bg-red-100 rounded mr-3"></div>
147
+ <div>
148
+ <p class="text-sm font-medium">Tool Organizer</p>
149
+ <p class="text-xs text-gray-500">Last modified: 1 week ago</p>
150
+ </div>
151
+ </div>
152
+ </div>
153
+ </div>
154
+ </div>
155
+ </div>
156
+ </main>
157
+
158
+ <custom-footer></custom-footer>
159
+
160
+ <script src="components/navbar.js"></script>
161
+ <script src="components/footer.js"></script>
162
+ <script src="script.js"></script>
163
+ <script>
164
+ feather.replace();
165
+ // Initialize any specific page scripts here
166
+ document.getElementById('material-thickness').addEventListener('input', function() {
167
+ document.getElementById('thickness-value').textContent = this.value + 'mm';
168
+ });
169
+ </script>
170
+ <script src="https://huggingface.co/deepsite/deepsite-badge.js"></script>
171
+ </body>
172
+ </html>
script.js ADDED
@@ -0,0 +1,31 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ // Main application logic will go here
2
+ document.addEventListener('DOMContentLoaded', function() {
3
+ // Initialize template cards
4
+ const templateCards = document.querySelectorAll('.template-card');
5
+ templateCards.forEach(card => {
6
+ card.addEventListener('click', function() {
7
+ const template = this.getAttribute('data-template');
8
+ loadTemplate(template);
9
+ });
10
+ });
11
+
12
+ // Initialize box type buttons
13
+ const boxTypeButtons = document.querySelectorAll('.box-type-btn');
14
+ boxTypeButtons.forEach(button => {
15
+ button.addEventListener('click', function() {
16
+ boxTypeButtons.forEach(btn => btn.classList.remove('active'));
17
+ this.classList.add('active');
18
+ updateBoxType(this.getAttribute('data-type'));
19
+ });
20
+ });
21
+ });
22
+
23
+ function loadTemplate(template) {
24
+ console.log(`Loading template: ${template}`);
25
+ // In a real app, this would fetch template data and update the UI
26
+ }
27
+
28
+ function updateBoxType(type) {
29
+ console.log(`Box type changed to: ${type}`);
30
+ // Update UI based on box type
31
+ }
style.css CHANGED
@@ -1,28 +1,46 @@
 
1
  body {
2
- padding: 2rem;
3
- font-family: -apple-system, BlinkMacSystemFont, "Arial", sans-serif;
4
  }
5
 
6
- h1 {
7
- font-size: 16px;
8
- margin-top: 0;
9
  }
10
 
11
- p {
12
- color: rgb(107, 114, 128);
13
- font-size: 15px;
14
- margin-bottom: 10px;
15
- margin-top: 5px;
16
  }
17
 
18
- .card {
19
- max-width: 620px;
20
- margin: 0 auto;
21
- padding: 16px;
22
- border: 1px solid lightgray;
23
- border-radius: 16px;
24
  }
25
 
26
- .card p:last-child {
27
- margin-bottom: 0;
28
  }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ /* Base styles */
2
  body {
3
+ font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
 
4
  }
5
 
6
+ /* Box type button styles */
7
+ .box-type-btn {
8
+ @apply flex items-center justify-center p-3 border border-gray-300 rounded-lg text-gray-700 transition;
9
  }
10
 
11
+ .box-type-btn:hover {
12
+ @apply bg-gray-100;
 
 
 
13
  }
14
 
15
+ .box-type-btn.active {
16
+ @apply bg-blue-500 text-white border-blue-500;
 
 
 
 
17
  }
18
 
19
+ .box-type-btn.active:hover {
20
+ @apply bg-blue-600;
21
  }
22
+
23
+ /* Template card styles */
24
+ .template-card {
25
+ @apply p-2 rounded-lg cursor-pointer transition hover:bg-gray-50;
26
+ }
27
+
28
+ .template-card:hover {
29
+ @apply shadow-md;
30
+ }
31
+
32
+ /* Input range customization */
33
+ input[type="range"] {
34
+ @apply w-full h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer;
35
+ }
36
+
37
+ input[type="range"]::-webkit-slider-thumb {
38
+ @apply appearance-none w-4 h-4 bg-blue-500 rounded-full cursor-pointer;
39
+ }
40
+
41
+ /* Responsive adjustments */
42
+ @media (max-width: 768px) {
43
+ .box-type-btn {
44
+ @apply p-2 text-sm;
45
+ }
46
+ }