cyclecad 0.2.3 → 0.3.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/app/index.html +213 -8
- package/app/js/cad-vr.js +917 -0
- package/app/js/cam-operations.js +638 -0
- package/app/js/gcode-generator.js +485 -0
- package/app/js/gdt-training.js +1144 -0
- package/app/js/machine-profiles.js +534 -0
- package/app/js/marketplace-v2.js +766 -0
- package/app/js/misumi-catalog.js +904 -0
- package/app/js/section-view.js +666 -0
- package/app/js/sketch-enhance.js +779 -0
- package/app/js/stock-manager.js +482 -0
- package/app/js/text-to-cad.js +806 -0
- package/app/js/tool-library.js +593 -0
- package/app/tutorials/advanced.html +1924 -0
- package/app/tutorials/basic.html +1160 -0
- package/app/tutorials/intermediate.html +1456 -0
- package/cycleCAD-Architecture.pptx +0 -0
- package/cycleCAD-Investor-Deck.pptx +0 -0
- package/linkedin-post-combined.md +31 -0
- package/package.json +1 -1
|
@@ -0,0 +1,1160 @@
|
|
|
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>Basic Tutorial - cycleCAD</title>
|
|
7
|
+
<link rel="preconnect" href="https://fonts.googleapis.com">
|
|
8
|
+
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
|
9
|
+
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
|
|
10
|
+
<style>
|
|
11
|
+
:root {
|
|
12
|
+
--bg-primary: #1e1e1e;
|
|
13
|
+
--bg-secondary: #2d2d2d;
|
|
14
|
+
--bg-tertiary: #3e3e3e;
|
|
15
|
+
--text-primary: #e0e0e0;
|
|
16
|
+
--text-secondary: #a0a0a0;
|
|
17
|
+
--accent: #58a6ff;
|
|
18
|
+
--accent-dark: #0d47a1;
|
|
19
|
+
--success: #3fb950;
|
|
20
|
+
--warning: #d29922;
|
|
21
|
+
--info: #79c0ff;
|
|
22
|
+
--danger: #f85149;
|
|
23
|
+
--border: #404040;
|
|
24
|
+
}
|
|
25
|
+
|
|
26
|
+
* {
|
|
27
|
+
margin: 0;
|
|
28
|
+
padding: 0;
|
|
29
|
+
box-sizing: border-box;
|
|
30
|
+
}
|
|
31
|
+
|
|
32
|
+
html {
|
|
33
|
+
scroll-behavior: smooth;
|
|
34
|
+
}
|
|
35
|
+
|
|
36
|
+
body {
|
|
37
|
+
font-family: 'Inter', sans-serif;
|
|
38
|
+
background-color: var(--bg-primary);
|
|
39
|
+
color: var(--text-primary);
|
|
40
|
+
line-height: 1.6;
|
|
41
|
+
font-size: 14px;
|
|
42
|
+
}
|
|
43
|
+
|
|
44
|
+
/* Top Navigation Bar */
|
|
45
|
+
.nav-bar {
|
|
46
|
+
position: sticky;
|
|
47
|
+
top: 0;
|
|
48
|
+
background-color: var(--bg-secondary);
|
|
49
|
+
border-bottom: 1px solid var(--border);
|
|
50
|
+
padding: 12px 20px;
|
|
51
|
+
display: flex;
|
|
52
|
+
align-items: center;
|
|
53
|
+
gap: 30px;
|
|
54
|
+
z-index: 100;
|
|
55
|
+
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
|
|
56
|
+
}
|
|
57
|
+
|
|
58
|
+
.nav-back {
|
|
59
|
+
display: flex;
|
|
60
|
+
align-items: center;
|
|
61
|
+
gap: 8px;
|
|
62
|
+
color: var(--accent);
|
|
63
|
+
text-decoration: none;
|
|
64
|
+
font-weight: 500;
|
|
65
|
+
font-size: 13px;
|
|
66
|
+
transition: color 0.2s;
|
|
67
|
+
}
|
|
68
|
+
|
|
69
|
+
.nav-back:hover {
|
|
70
|
+
color: var(--info);
|
|
71
|
+
}
|
|
72
|
+
|
|
73
|
+
.nav-breadcrumbs {
|
|
74
|
+
display: flex;
|
|
75
|
+
gap: 16px;
|
|
76
|
+
flex: 1;
|
|
77
|
+
}
|
|
78
|
+
|
|
79
|
+
.nav-breadcrumb {
|
|
80
|
+
padding: 6px 12px;
|
|
81
|
+
border-radius: 4px;
|
|
82
|
+
font-size: 13px;
|
|
83
|
+
font-weight: 500;
|
|
84
|
+
color: var(--text-secondary);
|
|
85
|
+
text-decoration: none;
|
|
86
|
+
transition: background-color 0.2s, color 0.2s;
|
|
87
|
+
}
|
|
88
|
+
|
|
89
|
+
.nav-breadcrumb:hover {
|
|
90
|
+
background-color: var(--bg-tertiary);
|
|
91
|
+
color: var(--accent);
|
|
92
|
+
}
|
|
93
|
+
|
|
94
|
+
.nav-breadcrumb.active {
|
|
95
|
+
background-color: var(--accent);
|
|
96
|
+
color: var(--bg-primary);
|
|
97
|
+
}
|
|
98
|
+
|
|
99
|
+
/* Main Layout */
|
|
100
|
+
.container {
|
|
101
|
+
display: flex;
|
|
102
|
+
min-height: calc(100vh - 60px);
|
|
103
|
+
}
|
|
104
|
+
|
|
105
|
+
/* Progress Sidebar */
|
|
106
|
+
.progress-sidebar {
|
|
107
|
+
width: 240px;
|
|
108
|
+
background-color: var(--bg-secondary);
|
|
109
|
+
border-right: 1px solid var(--border);
|
|
110
|
+
padding: 24px 0;
|
|
111
|
+
overflow-y: auto;
|
|
112
|
+
max-height: calc(100vh - 60px);
|
|
113
|
+
position: sticky;
|
|
114
|
+
top: 60px;
|
|
115
|
+
}
|
|
116
|
+
|
|
117
|
+
.progress-title {
|
|
118
|
+
padding: 0 20px;
|
|
119
|
+
font-size: 13px;
|
|
120
|
+
font-weight: 600;
|
|
121
|
+
text-transform: uppercase;
|
|
122
|
+
color: var(--text-secondary);
|
|
123
|
+
margin-bottom: 16px;
|
|
124
|
+
letter-spacing: 0.5px;
|
|
125
|
+
}
|
|
126
|
+
|
|
127
|
+
.progress-item {
|
|
128
|
+
padding: 10px 20px;
|
|
129
|
+
cursor: pointer;
|
|
130
|
+
font-size: 13px;
|
|
131
|
+
color: var(--text-secondary);
|
|
132
|
+
transition: background-color 0.2s, color 0.2s, left 0.2s;
|
|
133
|
+
position: relative;
|
|
134
|
+
border-left: 3px solid transparent;
|
|
135
|
+
}
|
|
136
|
+
|
|
137
|
+
.progress-item:hover {
|
|
138
|
+
background-color: var(--bg-tertiary);
|
|
139
|
+
color: var(--accent);
|
|
140
|
+
}
|
|
141
|
+
|
|
142
|
+
.progress-item.active {
|
|
143
|
+
background-color: var(--bg-tertiary);
|
|
144
|
+
color: var(--accent);
|
|
145
|
+
border-left-color: var(--accent);
|
|
146
|
+
}
|
|
147
|
+
|
|
148
|
+
.progress-item.complete {
|
|
149
|
+
color: var(--success);
|
|
150
|
+
}
|
|
151
|
+
|
|
152
|
+
.progress-item.complete::before {
|
|
153
|
+
content: "✓";
|
|
154
|
+
position: absolute;
|
|
155
|
+
left: 8px;
|
|
156
|
+
font-weight: 600;
|
|
157
|
+
font-size: 11px;
|
|
158
|
+
}
|
|
159
|
+
|
|
160
|
+
/* Main Content */
|
|
161
|
+
.content {
|
|
162
|
+
flex: 1;
|
|
163
|
+
padding: 40px 60px;
|
|
164
|
+
max-width: 900px;
|
|
165
|
+
margin: 0 auto;
|
|
166
|
+
}
|
|
167
|
+
|
|
168
|
+
/* Section */
|
|
169
|
+
.section {
|
|
170
|
+
margin-bottom: 60px;
|
|
171
|
+
scroll-margin-top: 80px;
|
|
172
|
+
}
|
|
173
|
+
|
|
174
|
+
.section-header {
|
|
175
|
+
display: flex;
|
|
176
|
+
align-items: baseline;
|
|
177
|
+
gap: 16px;
|
|
178
|
+
margin-bottom: 24px;
|
|
179
|
+
}
|
|
180
|
+
|
|
181
|
+
.section-number {
|
|
182
|
+
font-size: 28px;
|
|
183
|
+
font-weight: 700;
|
|
184
|
+
color: var(--accent);
|
|
185
|
+
min-width: 40px;
|
|
186
|
+
}
|
|
187
|
+
|
|
188
|
+
.section-title {
|
|
189
|
+
font-size: 32px;
|
|
190
|
+
font-weight: 700;
|
|
191
|
+
color: var(--text-primary);
|
|
192
|
+
}
|
|
193
|
+
|
|
194
|
+
.section-subtitle {
|
|
195
|
+
font-size: 14px;
|
|
196
|
+
color: var(--text-secondary);
|
|
197
|
+
margin-top: 12px;
|
|
198
|
+
}
|
|
199
|
+
|
|
200
|
+
/* Content Boxes */
|
|
201
|
+
.tip-box, .warning-box, .note-box {
|
|
202
|
+
padding: 16px 16px;
|
|
203
|
+
border-radius: 6px;
|
|
204
|
+
margin: 20px 0;
|
|
205
|
+
border-left: 4px solid var(--accent);
|
|
206
|
+
background-color: rgba(88, 166, 255, 0.08);
|
|
207
|
+
}
|
|
208
|
+
|
|
209
|
+
.warning-box {
|
|
210
|
+
border-left-color: var(--warning);
|
|
211
|
+
background-color: rgba(210, 153, 34, 0.08);
|
|
212
|
+
}
|
|
213
|
+
|
|
214
|
+
.note-box {
|
|
215
|
+
border-left-color: var(--text-secondary);
|
|
216
|
+
background-color: rgba(160, 160, 160, 0.08);
|
|
217
|
+
}
|
|
218
|
+
|
|
219
|
+
.tip-title, .warning-title, .note-title {
|
|
220
|
+
font-weight: 600;
|
|
221
|
+
font-size: 13px;
|
|
222
|
+
text-transform: uppercase;
|
|
223
|
+
letter-spacing: 0.5px;
|
|
224
|
+
margin-bottom: 8px;
|
|
225
|
+
color: var(--accent);
|
|
226
|
+
}
|
|
227
|
+
|
|
228
|
+
.warning-title {
|
|
229
|
+
color: var(--warning);
|
|
230
|
+
}
|
|
231
|
+
|
|
232
|
+
.note-title {
|
|
233
|
+
color: var(--text-secondary);
|
|
234
|
+
}
|
|
235
|
+
|
|
236
|
+
/* Keyboard Shortcut Badge */
|
|
237
|
+
.kbd {
|
|
238
|
+
display: inline-block;
|
|
239
|
+
padding: 4px 8px;
|
|
240
|
+
background-color: var(--bg-tertiary);
|
|
241
|
+
border: 1px solid var(--border);
|
|
242
|
+
border-radius: 3px;
|
|
243
|
+
font-family: 'Courier New', monospace;
|
|
244
|
+
font-size: 12px;
|
|
245
|
+
font-weight: 500;
|
|
246
|
+
color: var(--accent);
|
|
247
|
+
margin: 0 4px;
|
|
248
|
+
vertical-align: baseline;
|
|
249
|
+
}
|
|
250
|
+
|
|
251
|
+
/* Screenshot Placeholder */
|
|
252
|
+
.screenshot-placeholder {
|
|
253
|
+
width: 100%;
|
|
254
|
+
height: 320px;
|
|
255
|
+
background-color: var(--bg-tertiary);
|
|
256
|
+
border: 2px dashed var(--border);
|
|
257
|
+
border-radius: 6px;
|
|
258
|
+
display: flex;
|
|
259
|
+
align-items: center;
|
|
260
|
+
justify-content: center;
|
|
261
|
+
margin: 24px 0;
|
|
262
|
+
color: var(--text-secondary);
|
|
263
|
+
font-size: 14px;
|
|
264
|
+
text-align: center;
|
|
265
|
+
padding: 24px;
|
|
266
|
+
flex-direction: column;
|
|
267
|
+
gap: 12px;
|
|
268
|
+
}
|
|
269
|
+
|
|
270
|
+
.screenshot-icon {
|
|
271
|
+
font-size: 48px;
|
|
272
|
+
opacity: 0.5;
|
|
273
|
+
}
|
|
274
|
+
|
|
275
|
+
/* Step List */
|
|
276
|
+
.step-list {
|
|
277
|
+
list-style: none;
|
|
278
|
+
margin: 20px 0;
|
|
279
|
+
padding-left: 0;
|
|
280
|
+
}
|
|
281
|
+
|
|
282
|
+
.step-list li {
|
|
283
|
+
padding: 12px 16px;
|
|
284
|
+
margin-bottom: 12px;
|
|
285
|
+
background-color: var(--bg-secondary);
|
|
286
|
+
border-radius: 4px;
|
|
287
|
+
border-left: 3px solid var(--accent);
|
|
288
|
+
display: flex;
|
|
289
|
+
gap: 12px;
|
|
290
|
+
}
|
|
291
|
+
|
|
292
|
+
.step-list li::before {
|
|
293
|
+
content: counter(step-counter);
|
|
294
|
+
counter-increment: step-counter;
|
|
295
|
+
display: flex;
|
|
296
|
+
align-items: center;
|
|
297
|
+
justify-content: center;
|
|
298
|
+
width: 28px;
|
|
299
|
+
height: 28px;
|
|
300
|
+
background-color: var(--accent);
|
|
301
|
+
color: var(--bg-primary);
|
|
302
|
+
border-radius: 50%;
|
|
303
|
+
font-weight: 600;
|
|
304
|
+
font-size: 12px;
|
|
305
|
+
flex-shrink: 0;
|
|
306
|
+
}
|
|
307
|
+
|
|
308
|
+
.step-list {
|
|
309
|
+
counter-reset: step-counter;
|
|
310
|
+
}
|
|
311
|
+
|
|
312
|
+
/* Shortcuts Table */
|
|
313
|
+
.shortcuts-table {
|
|
314
|
+
width: 100%;
|
|
315
|
+
border-collapse: collapse;
|
|
316
|
+
margin: 20px 0;
|
|
317
|
+
background-color: var(--bg-secondary);
|
|
318
|
+
border-radius: 6px;
|
|
319
|
+
overflow: hidden;
|
|
320
|
+
}
|
|
321
|
+
|
|
322
|
+
.shortcuts-table thead {
|
|
323
|
+
background-color: var(--bg-tertiary);
|
|
324
|
+
}
|
|
325
|
+
|
|
326
|
+
.shortcuts-table th {
|
|
327
|
+
padding: 12px 16px;
|
|
328
|
+
text-align: left;
|
|
329
|
+
font-weight: 600;
|
|
330
|
+
font-size: 12px;
|
|
331
|
+
text-transform: uppercase;
|
|
332
|
+
color: var(--accent);
|
|
333
|
+
border-bottom: 1px solid var(--border);
|
|
334
|
+
}
|
|
335
|
+
|
|
336
|
+
.shortcuts-table td {
|
|
337
|
+
padding: 12px 16px;
|
|
338
|
+
border-bottom: 1px solid var(--border);
|
|
339
|
+
}
|
|
340
|
+
|
|
341
|
+
.shortcuts-table tr:last-child td {
|
|
342
|
+
border-bottom: none;
|
|
343
|
+
}
|
|
344
|
+
|
|
345
|
+
.shortcuts-table code {
|
|
346
|
+
background-color: var(--bg-primary);
|
|
347
|
+
padding: 2px 6px;
|
|
348
|
+
border-radius: 3px;
|
|
349
|
+
font-family: 'Courier New', monospace;
|
|
350
|
+
color: var(--accent);
|
|
351
|
+
font-size: 12px;
|
|
352
|
+
}
|
|
353
|
+
|
|
354
|
+
/* Mark Complete Button */
|
|
355
|
+
.mark-complete-btn {
|
|
356
|
+
background-color: var(--success);
|
|
357
|
+
color: var(--bg-primary);
|
|
358
|
+
border: none;
|
|
359
|
+
padding: 10px 20px;
|
|
360
|
+
border-radius: 4px;
|
|
361
|
+
font-weight: 600;
|
|
362
|
+
font-size: 13px;
|
|
363
|
+
cursor: pointer;
|
|
364
|
+
margin-top: 20px;
|
|
365
|
+
transition: background-color 0.2s, transform 0.1s;
|
|
366
|
+
}
|
|
367
|
+
|
|
368
|
+
.mark-complete-btn:hover:not(.completed) {
|
|
369
|
+
background-color: #35d957;
|
|
370
|
+
}
|
|
371
|
+
|
|
372
|
+
.mark-complete-btn:active {
|
|
373
|
+
transform: scale(0.98);
|
|
374
|
+
}
|
|
375
|
+
|
|
376
|
+
.mark-complete-btn.completed {
|
|
377
|
+
background-color: var(--text-secondary);
|
|
378
|
+
cursor: default;
|
|
379
|
+
opacity: 0.6;
|
|
380
|
+
}
|
|
381
|
+
|
|
382
|
+
/* Next Steps Button */
|
|
383
|
+
.next-steps-section {
|
|
384
|
+
background-color: var(--bg-secondary);
|
|
385
|
+
padding: 32px;
|
|
386
|
+
border-radius: 6px;
|
|
387
|
+
border: 1px solid var(--border);
|
|
388
|
+
text-align: center;
|
|
389
|
+
margin-top: 40px;
|
|
390
|
+
}
|
|
391
|
+
|
|
392
|
+
.next-steps-section a {
|
|
393
|
+
display: inline-block;
|
|
394
|
+
background-color: var(--accent);
|
|
395
|
+
color: var(--bg-primary);
|
|
396
|
+
padding: 12px 32px;
|
|
397
|
+
border-radius: 4px;
|
|
398
|
+
text-decoration: none;
|
|
399
|
+
font-weight: 600;
|
|
400
|
+
margin-top: 16px;
|
|
401
|
+
transition: background-color 0.2s;
|
|
402
|
+
}
|
|
403
|
+
|
|
404
|
+
.next-steps-section a:hover {
|
|
405
|
+
background-color: var(--info);
|
|
406
|
+
}
|
|
407
|
+
|
|
408
|
+
/* Scrollbar Styling */
|
|
409
|
+
.progress-sidebar::-webkit-scrollbar {
|
|
410
|
+
width: 6px;
|
|
411
|
+
}
|
|
412
|
+
|
|
413
|
+
.progress-sidebar::-webkit-scrollbar-track {
|
|
414
|
+
background-color: transparent;
|
|
415
|
+
}
|
|
416
|
+
|
|
417
|
+
.progress-sidebar::-webkit-scrollbar-thumb {
|
|
418
|
+
background-color: var(--border);
|
|
419
|
+
border-radius: 3px;
|
|
420
|
+
}
|
|
421
|
+
|
|
422
|
+
.progress-sidebar::-webkit-scrollbar-thumb:hover {
|
|
423
|
+
background-color: var(--text-secondary);
|
|
424
|
+
}
|
|
425
|
+
|
|
426
|
+
/* Responsive */
|
|
427
|
+
@media (max-width: 1200px) {
|
|
428
|
+
.progress-sidebar {
|
|
429
|
+
width: 200px;
|
|
430
|
+
}
|
|
431
|
+
|
|
432
|
+
.content {
|
|
433
|
+
padding: 30px 40px;
|
|
434
|
+
}
|
|
435
|
+
}
|
|
436
|
+
|
|
437
|
+
@media (max-width: 768px) {
|
|
438
|
+
.progress-sidebar {
|
|
439
|
+
display: none;
|
|
440
|
+
}
|
|
441
|
+
|
|
442
|
+
.content {
|
|
443
|
+
padding: 24px 20px;
|
|
444
|
+
max-width: 100%;
|
|
445
|
+
}
|
|
446
|
+
|
|
447
|
+
.section-title {
|
|
448
|
+
font-size: 24px;
|
|
449
|
+
}
|
|
450
|
+
|
|
451
|
+
.nav-breadcrumbs {
|
|
452
|
+
display: none;
|
|
453
|
+
}
|
|
454
|
+
}
|
|
455
|
+
</style>
|
|
456
|
+
</head>
|
|
457
|
+
<body>
|
|
458
|
+
<!-- Top Navigation -->
|
|
459
|
+
<div class="nav-bar">
|
|
460
|
+
<a href="../" class="nav-back">← Back to App</a>
|
|
461
|
+
<div class="nav-breadcrumbs">
|
|
462
|
+
<span class="nav-breadcrumb active">Basic</span>
|
|
463
|
+
<a href="intermediate.html" class="nav-breadcrumb">Intermediate</a>
|
|
464
|
+
<a href="advanced.html" class="nav-breadcrumb">Advanced</a>
|
|
465
|
+
</div>
|
|
466
|
+
</div>
|
|
467
|
+
|
|
468
|
+
<div class="container">
|
|
469
|
+
<!-- Progress Sidebar -->
|
|
470
|
+
<div class="progress-sidebar">
|
|
471
|
+
<div class="progress-title">Progress</div>
|
|
472
|
+
<div class="progress-item" data-section="welcome">Welcome</div>
|
|
473
|
+
<div class="progress-item" data-section="interface">Interface</div>
|
|
474
|
+
<div class="progress-item" data-section="first-part">First Part</div>
|
|
475
|
+
<div class="progress-item" data-section="viewport">Viewport Nav</div>
|
|
476
|
+
<div class="progress-item" data-section="sketches">Sketches</div>
|
|
477
|
+
<div class="progress-item" data-section="operations">Operations</div>
|
|
478
|
+
<div class="progress-item" data-section="tree">Feature Tree</div>
|
|
479
|
+
<div class="progress-item" data-section="export">Export</div>
|
|
480
|
+
<div class="progress-item" data-section="shortcuts">Shortcuts</div>
|
|
481
|
+
<div class="progress-item" data-section="next">Next Steps</div>
|
|
482
|
+
</div>
|
|
483
|
+
|
|
484
|
+
<!-- Main Content -->
|
|
485
|
+
<div class="content">
|
|
486
|
+
<!-- Section 1: Welcome -->
|
|
487
|
+
<div class="section" id="welcome">
|
|
488
|
+
<div class="section-header">
|
|
489
|
+
<div class="section-number">1</div>
|
|
490
|
+
<div>
|
|
491
|
+
<div class="section-title">Welcome to cycleCAD</div>
|
|
492
|
+
<div class="section-subtitle">Learn the basics of browser-based parametric 3D CAD modeling</div>
|
|
493
|
+
</div>
|
|
494
|
+
</div>
|
|
495
|
+
|
|
496
|
+
<p>
|
|
497
|
+
cycleCAD is a modern, open-source CAD modeler that runs directly in your browser. Like Fusion 360 or OnShape,
|
|
498
|
+
it lets you create parametric 3D parts using sketches, extrusions, and advanced operations — all without installing
|
|
499
|
+
desktop software.
|
|
500
|
+
</p>
|
|
501
|
+
|
|
502
|
+
<div class="tip-box">
|
|
503
|
+
<div class="tip-title">What You'll Learn</div>
|
|
504
|
+
This tutorial covers the essentials: navigating the 3D view, drawing sketches, creating your first part,
|
|
505
|
+
and exporting your work. Plan on 20-30 minutes.
|
|
506
|
+
</div>
|
|
507
|
+
|
|
508
|
+
<p style="margin-top: 20px;">
|
|
509
|
+
By the end, you'll have built a simple rectangular box from scratch. After that, the
|
|
510
|
+
<strong>Intermediate</strong> tutorial will teach you more complex shapes and operations.
|
|
511
|
+
</p>
|
|
512
|
+
|
|
513
|
+
<button class="mark-complete-btn" data-section="welcome">✓ Mark Complete</button>
|
|
514
|
+
</div>
|
|
515
|
+
|
|
516
|
+
<!-- Section 2: Interface Overview -->
|
|
517
|
+
<div class="section" id="interface">
|
|
518
|
+
<div class="section-header">
|
|
519
|
+
<div class="section-number">2</div>
|
|
520
|
+
<div>
|
|
521
|
+
<div class="section-title">Interface Overview</div>
|
|
522
|
+
<div class="section-subtitle">Tour the main UI layout and panels</div>
|
|
523
|
+
</div>
|
|
524
|
+
</div>
|
|
525
|
+
|
|
526
|
+
<p>
|
|
527
|
+
cycleCAD is laid out like a professional CAD tool with a central 3D viewport, toolbars, and side panels.
|
|
528
|
+
</p>
|
|
529
|
+
|
|
530
|
+
<div class="screenshot-placeholder">
|
|
531
|
+
<div class="screenshot-icon">⚙️</div>
|
|
532
|
+
<div>Main interface showing 3D viewport, toolbar, and side panels</div>
|
|
533
|
+
</div>
|
|
534
|
+
|
|
535
|
+
<h3 style="margin-top: 28px; margin-bottom: 16px; font-size: 18px; font-weight: 600;">Key Areas:</h3>
|
|
536
|
+
|
|
537
|
+
<ul class="step-list">
|
|
538
|
+
<li>
|
|
539
|
+
<strong>Top Toolbar</strong> — Sketch, Extrude, Revolve, Fillet, Chamfer, Pattern, Assembly, and other tools.
|
|
540
|
+
Tabs let you switch between View, Analyze, Create, Export, and AI Tools.
|
|
541
|
+
</li>
|
|
542
|
+
<li>
|
|
543
|
+
<strong>Left Panel</strong> — Model Tree showing all features and components. You can rename, suppress, or delete
|
|
544
|
+
features here.
|
|
545
|
+
</li>
|
|
546
|
+
<li>
|
|
547
|
+
<strong>3D Viewport (center)</strong> — Where your model lives. Rotate, pan, zoom, and select parts here.
|
|
548
|
+
</li>
|
|
549
|
+
<li>
|
|
550
|
+
<strong>Right Panel</strong> — Properties/parameters tab, AI Chat tab, and Guide tab. Change dimensions and
|
|
551
|
+
material properties here.
|
|
552
|
+
</li>
|
|
553
|
+
<li>
|
|
554
|
+
<strong>Status Bar (bottom)</strong> — Shows selection info, operation status, and keyboard hint.
|
|
555
|
+
</li>
|
|
556
|
+
</ul>
|
|
557
|
+
|
|
558
|
+
<button class="mark-complete-btn" data-section="interface">✓ Mark Complete</button>
|
|
559
|
+
</div>
|
|
560
|
+
|
|
561
|
+
<!-- Section 3: Your First 3D Part -->
|
|
562
|
+
<div class="section" id="first-part">
|
|
563
|
+
<div class="section-header">
|
|
564
|
+
<div class="section-number">3</div>
|
|
565
|
+
<div>
|
|
566
|
+
<div class="section-title">Your First 3D Part</div>
|
|
567
|
+
<div class="section-subtitle">Build a simple 50mm tall box step by step</div>
|
|
568
|
+
</div>
|
|
569
|
+
</div>
|
|
570
|
+
|
|
571
|
+
<p>
|
|
572
|
+
Let's make a rectangular box. The pattern is: sketch a rectangle → extrude it → done.
|
|
573
|
+
In cycleCAD, every 3D part starts as a 2D sketch.
|
|
574
|
+
</p>
|
|
575
|
+
|
|
576
|
+
<h3 style="margin-top: 28px; margin-bottom: 16px; font-size: 18px; font-weight: 600;">Step-by-Step:</h3>
|
|
577
|
+
|
|
578
|
+
<ol class="step-list">
|
|
579
|
+
<li><strong>Click "Sketch"</strong> in the toolbar. You'll switch to 2D sketch mode (the viewport turns blue).</li>
|
|
580
|
+
<li><strong>Click the rectangle tool</strong> (or press <span class="kbd">R</span>). Your cursor will show a crosshair.</li>
|
|
581
|
+
<li><strong>Draw a rectangle</strong> by clicking two opposite corners: first at (0, 0), then at (100, 80). The grid helps you snap to round numbers.</li>
|
|
582
|
+
<li><strong>Exit sketch mode</strong> by pressing <span class="kbd">Esc</span> or clicking the checkmark. The rectangle is now a flat sketch.</li>
|
|
583
|
+
<li><strong>Click "Extrude"</strong> in the toolbar. A panel appears on the right asking for the height.</li>
|
|
584
|
+
<li><strong>Type 50</strong> in the height field. You'll see the box rise to 50mm tall in the viewport.</li>
|
|
585
|
+
<li><strong>Click OK</strong>. Your first 3D part is complete!</li>
|
|
586
|
+
</ol>
|
|
587
|
+
|
|
588
|
+
<div class="tip-box">
|
|
589
|
+
<div class="tip-title">Tip: Undo is Your Friend</div>
|
|
590
|
+
Made a mistake? Press <span class="kbd">Ctrl+Z</span> to undo. You can undo as many times as needed.
|
|
591
|
+
</div>
|
|
592
|
+
|
|
593
|
+
<div class="note-box">
|
|
594
|
+
<div class="note-title">Note: Units</div>
|
|
595
|
+
cycleCAD uses millimeters (mm) by default. All dimensions are in mm.
|
|
596
|
+
</div>
|
|
597
|
+
|
|
598
|
+
<button class="mark-complete-btn" data-section="first-part">✓ Mark Complete</button>
|
|
599
|
+
</div>
|
|
600
|
+
|
|
601
|
+
<!-- Section 4: Navigating the 3D Viewport -->
|
|
602
|
+
<div class="section" id="viewport">
|
|
603
|
+
<div class="section-header">
|
|
604
|
+
<div class="section-number">4</div>
|
|
605
|
+
<div>
|
|
606
|
+
<div class="section-title">Navigating the 3D Viewport</div>
|
|
607
|
+
<div class="section-subtitle">Master camera control with your mouse and keyboard</div>
|
|
608
|
+
</div>
|
|
609
|
+
</div>
|
|
610
|
+
|
|
611
|
+
<p>
|
|
612
|
+
The 3D viewport uses industry-standard controls. Once you learn them, they'll feel natural.
|
|
613
|
+
</p>
|
|
614
|
+
|
|
615
|
+
<div class="screenshot-placeholder">
|
|
616
|
+
<div class="screenshot-icon">🎯</div>
|
|
617
|
+
<div>3D viewport with your box displayed</div>
|
|
618
|
+
</div>
|
|
619
|
+
|
|
620
|
+
<h3 style="margin-top: 28px; margin-bottom: 16px; font-size: 18px; font-weight: 600;">Mouse Controls:</h3>
|
|
621
|
+
|
|
622
|
+
<ul class="step-list">
|
|
623
|
+
<li><strong>Rotate:</strong> Left-click and drag. The model spins under your cursor.</li>
|
|
624
|
+
<li><strong>Pan:</strong> Right-click and drag (or <span class="kbd">Shift</span> + left-drag). The model slides sideways.</li>
|
|
625
|
+
<li><strong>Zoom:</strong> Scroll your mouse wheel up (zoom in) or down (zoom out).</li>
|
|
626
|
+
</ul>
|
|
627
|
+
|
|
628
|
+
<h3 style="margin-top: 28px; margin-bottom: 16px; font-size: 18px; font-weight: 600;">Preset Views (Press Number Keys):</h3>
|
|
629
|
+
|
|
630
|
+
<ul class="step-list">
|
|
631
|
+
<li><span class="kbd">1</span> — Front view</li>
|
|
632
|
+
<li><span class="kbd">2</span> — Top view</li>
|
|
633
|
+
<li><span class="kbd">3</span> — Right-side view</li>
|
|
634
|
+
<li><span class="kbd">7</span> — Isometric (3D perspective)</li>
|
|
635
|
+
<li><span class="kbd">0</span> (zero) — Fit all (zoom to see entire model)</li>
|
|
636
|
+
</ul>
|
|
637
|
+
|
|
638
|
+
<div class="warning-box">
|
|
639
|
+
<div class="warning-title">Warning: Orthographic vs Perspective</div>
|
|
640
|
+
Preset views (Front, Top, Right) are orthographic (flat, no perspective). Isometric (7) is a 3D view.
|
|
641
|
+
Switch between them to understand your model's shape.
|
|
642
|
+
</div>
|
|
643
|
+
|
|
644
|
+
<button class="mark-complete-btn" data-section="viewport">✓ Mark Complete</button>
|
|
645
|
+
</div>
|
|
646
|
+
|
|
647
|
+
<!-- Section 5: Drawing Sketches -->
|
|
648
|
+
<div class="section" id="sketches">
|
|
649
|
+
<div class="section-header">
|
|
650
|
+
<div class="section-number">5</div>
|
|
651
|
+
<div>
|
|
652
|
+
<div class="section-title">Drawing Sketches</div>
|
|
653
|
+
<div class="section-subtitle">Master 2D sketch tools and constraints</div>
|
|
654
|
+
</div>
|
|
655
|
+
</div>
|
|
656
|
+
|
|
657
|
+
<p>
|
|
658
|
+
Sketches are the foundation of 3D modeling. Every extrusion, revolution, or sweep starts with a 2D sketch.
|
|
659
|
+
cycleCAD provides tools for drawing lines, rectangles, circles, and arcs with automatic constraint detection.
|
|
660
|
+
</p>
|
|
661
|
+
|
|
662
|
+
<h3 style="margin-top: 28px; margin-bottom: 16px; font-size: 18px; font-weight: 600;">Sketch Tools:</h3>
|
|
663
|
+
|
|
664
|
+
<ul class="step-list">
|
|
665
|
+
<li><strong>Line Tool</strong> (<span class="kbd">L</span>) — Click to place points. Press <span class="kbd">Esc</span> to finish.</li>
|
|
666
|
+
<li><strong>Rectangle Tool</strong> (<span class="kbd">R</span>) — Click two opposite corners to draw a rectangle.</li>
|
|
667
|
+
<li><strong>Circle Tool</strong> (<span class="kbd">C</span>) — Click center, then drag to set radius.</li>
|
|
668
|
+
<li><strong>Arc Tool</strong> (<span class="kbd">A</span>) — Click start, center, and end points.</li>
|
|
669
|
+
<li><strong>Polyline Tool</strong> — Draw connected line segments. Press <span class="kbd">Esc</span> to finish.</li>
|
|
670
|
+
</ul>
|
|
671
|
+
|
|
672
|
+
<h3 style="margin-top: 28px; margin-bottom: 16px; font-size: 18px; font-weight: 600;">Grid and Snapping:</h3>
|
|
673
|
+
|
|
674
|
+
<ul class="step-list">
|
|
675
|
+
<li><strong>Toggle Grid:</strong> Press <span class="kbd">G</span> to show/hide the grid.</li>
|
|
676
|
+
<li><strong>Snap to Grid:</strong> When you draw, your cursor automatically snaps to the nearest 10mm grid point.</li>
|
|
677
|
+
<li><strong>Precision Drawing:</strong> Type exact coordinates in the properties panel if you need exact dimensions.</li>
|
|
678
|
+
</ul>
|
|
679
|
+
|
|
680
|
+
<div class="tip-box">
|
|
681
|
+
<div class="tip-title">Tip: Automatic Constraints</div>
|
|
682
|
+
When you draw a vertical or horizontal line, cycleCAD automatically applies vertical/horizontal constraints.
|
|
683
|
+
When two lines meet at the same point, it applies a coincident constraint. These constraints keep your sketch
|
|
684
|
+
from accidentally moving.
|
|
685
|
+
</div>
|
|
686
|
+
|
|
687
|
+
<button class="mark-complete-btn" data-section="sketches">✓ Mark Complete</button>
|
|
688
|
+
</div>
|
|
689
|
+
|
|
690
|
+
<!-- Section 6: Basic Operations -->
|
|
691
|
+
<div class="section" id="operations">
|
|
692
|
+
<div class="section-header">
|
|
693
|
+
<div class="section-number">6</div>
|
|
694
|
+
<div>
|
|
695
|
+
<div class="section-title">Basic Operations</div>
|
|
696
|
+
<div class="section-subtitle">Extrude and revolve to create 3D shapes</div>
|
|
697
|
+
</div>
|
|
698
|
+
</div>
|
|
699
|
+
|
|
700
|
+
<p>
|
|
701
|
+
Two operations form the foundation of most models: extrude (pull a sketch into a 3D box) and revolve
|
|
702
|
+
(spin a sketch around an axis).
|
|
703
|
+
</p>
|
|
704
|
+
|
|
705
|
+
<h3 style="margin-top: 28px; margin-bottom: 16px; font-size: 18px; font-weight: 600;">Extrude:</h3>
|
|
706
|
+
|
|
707
|
+
<ul class="step-list">
|
|
708
|
+
<li>Create a sketch and exit sketch mode.</li>
|
|
709
|
+
<li>Click <strong>"Extrude"</strong> in the toolbar (or press <span class="kbd">E</span>).</li>
|
|
710
|
+
<li>In the right panel, enter the height (e.g., 50 mm).</li>
|
|
711
|
+
<li>Optionally, enable <strong>"Two Direction"</strong> to extrude both sides equally.</li>
|
|
712
|
+
<li>Click OK. Your sketch is now a 3D solid.</li>
|
|
713
|
+
</ul>
|
|
714
|
+
|
|
715
|
+
<h3 style="margin-top: 28px; margin-bottom: 16px; font-size: 18px; font-weight: 600;">Revolve:</h3>
|
|
716
|
+
|
|
717
|
+
<ul class="step-list">
|
|
718
|
+
<li>Create a sketch of half your final shape (e.g., a triangle for a cone).</li>
|
|
719
|
+
<li>Click <strong>"Revolve"</strong> in the toolbar (or press <span class="kbd">R</span>).</li>
|
|
720
|
+
<li>Select the axis of rotation (usually a vertical or horizontal line in your sketch).</li>
|
|
721
|
+
<li>Set the angle to 360° for a complete rotation, or less for a partial cone/wedge.</li>
|
|
722
|
+
<li>Click OK. Your sketch is now a 3D solid of revolution.</li>
|
|
723
|
+
</ul>
|
|
724
|
+
|
|
725
|
+
<div class="note-box">
|
|
726
|
+
<div class="note-title">Note: Sketch Orientation</div>
|
|
727
|
+
When you extrude, the sketch extrudes perpendicular to its plane (the Z direction if you drew on the XY plane).
|
|
728
|
+
When you revolve, the axis must lie on the sketch plane.
|
|
729
|
+
</div>
|
|
730
|
+
|
|
731
|
+
<button class="mark-complete-btn" data-section="operations">✓ Mark Complete</button>
|
|
732
|
+
</div>
|
|
733
|
+
|
|
734
|
+
<!-- Section 7: Feature Tree -->
|
|
735
|
+
<div class="section" id="tree">
|
|
736
|
+
<div class="section-header">
|
|
737
|
+
<div class="section-number">7</div>
|
|
738
|
+
<div>
|
|
739
|
+
<div class="section-title">Feature Tree</div>
|
|
740
|
+
<div class="section-subtitle">Manage and organize your model's features</div>
|
|
741
|
+
</div>
|
|
742
|
+
</div>
|
|
743
|
+
|
|
744
|
+
<p>
|
|
745
|
+
The Feature Tree (left panel) shows every sketch, extrusion, and operation in your model, in the order you created them.
|
|
746
|
+
It's like a recipe: each step depends on the previous one.
|
|
747
|
+
</p>
|
|
748
|
+
|
|
749
|
+
<div class="screenshot-placeholder">
|
|
750
|
+
<div class="screenshot-icon">🌳</div>
|
|
751
|
+
<div>Feature tree showing Sketch1 and Extrude1 as a hierarchical list</div>
|
|
752
|
+
</div>
|
|
753
|
+
|
|
754
|
+
<h3 style="margin-top: 28px; margin-bottom: 16px; font-size: 18px; font-weight: 600;">Tree Operations:</h3>
|
|
755
|
+
|
|
756
|
+
<ul class="step-list">
|
|
757
|
+
<li><strong>Click a feature:</strong> Highlights that feature in the 3D view.</li>
|
|
758
|
+
<li><strong>Double-click a feature:</strong> Edits it (change the extrude height, for example).</li>
|
|
759
|
+
<li><strong>Right-click a feature:</strong> Context menu with Rename, Suppress, Delete options.</li>
|
|
760
|
+
<li><strong>Suppress:</strong> Temporarily hides the feature and all features after it. Useful for testing changes.</li>
|
|
761
|
+
<li><strong>Delete:</strong> Removes the feature and updates the model accordingly.</li>
|
|
762
|
+
</ul>
|
|
763
|
+
|
|
764
|
+
<div class="tip-box">
|
|
765
|
+
<div class="tip-title">Tip: Naming Features</div>
|
|
766
|
+
Right-click any feature and choose "Rename" to give it a meaningful name like "Main Body" or "Mounting Hole".
|
|
767
|
+
This makes your tree easier to understand.
|
|
768
|
+
</div>
|
|
769
|
+
|
|
770
|
+
<button class="mark-complete-btn" data-section="tree">✓ Mark Complete</button>
|
|
771
|
+
</div>
|
|
772
|
+
|
|
773
|
+
<!-- Section 8: Exporting Your Model -->
|
|
774
|
+
<div class="section" id="export">
|
|
775
|
+
<div class="section-header">
|
|
776
|
+
<div class="section-number">8</div>
|
|
777
|
+
<div>
|
|
778
|
+
<div class="section-title">Exporting Your Model</div>
|
|
779
|
+
<div class="section-subtitle">Save your work in multiple formats</div>
|
|
780
|
+
</div>
|
|
781
|
+
</div>
|
|
782
|
+
|
|
783
|
+
<p>
|
|
784
|
+
Once you've created your model, you'll want to save it. cycleCAD supports several export formats
|
|
785
|
+
for different purposes: 3D printing, CAM, visualization, or collaboration.
|
|
786
|
+
</p>
|
|
787
|
+
|
|
788
|
+
<h3 style="margin-top: 28px; margin-bottom: 16px; font-size: 18px; font-weight: 600;">Export Formats:</h3>
|
|
789
|
+
|
|
790
|
+
<ul class="step-list">
|
|
791
|
+
<li>
|
|
792
|
+
<strong>STL (Stereolithography)</strong> — 3D printable mesh format. Use this for 3D printing,
|
|
793
|
+
simulation, or sharing a solid model.
|
|
794
|
+
</li>
|
|
795
|
+
<li>
|
|
796
|
+
<strong>OBJ (Wavefront OBJ)</strong> — Universal 3D mesh format. Good for visualization in other software
|
|
797
|
+
or game engines.
|
|
798
|
+
</li>
|
|
799
|
+
<li>
|
|
800
|
+
<strong>glTF 2.0 (GL Transmission Format)</strong> — Modern 3D format with support for materials and
|
|
801
|
+
animations. Best for web viewers and AR.
|
|
802
|
+
</li>
|
|
803
|
+
<li>
|
|
804
|
+
<strong>cycleCAD JSON</strong> — Save your full feature history and parameters. Load it back to edit later.
|
|
805
|
+
</li>
|
|
806
|
+
</ul>
|
|
807
|
+
|
|
808
|
+
<h3 style="margin-top: 28px; margin-bottom: 16px; font-size: 18px; font-weight: 600;">How to Export:</h3>
|
|
809
|
+
|
|
810
|
+
<ol class="step-list">
|
|
811
|
+
<li>Click the <strong>"Export"</strong> tab in the toolbar.</li>
|
|
812
|
+
<li>Choose your format (STL, OBJ, glTF, or JSON).</li>
|
|
813
|
+
<li>Click the format button. A file dialog appears.</li>
|
|
814
|
+
<li>Name your file and click Save.</li>
|
|
815
|
+
</ol>
|
|
816
|
+
|
|
817
|
+
<div class="warning-box">
|
|
818
|
+
<div class="warning-title">Warning: Lost Parametric Data</div>
|
|
819
|
+
When you export to STL/OBJ/glTF, the file contains only the final 3D geometry (a "snapshot").
|
|
820
|
+
You can't edit the sketch or parameters later. To preserve your work, export as cycleCAD JSON first,
|
|
821
|
+
then export as STL when you're ready to share.
|
|
822
|
+
</div>
|
|
823
|
+
|
|
824
|
+
<button class="mark-complete-btn" data-section="export">✓ Mark Complete</button>
|
|
825
|
+
</div>
|
|
826
|
+
|
|
827
|
+
<!-- Section 9: Keyboard Shortcuts Reference -->
|
|
828
|
+
<div class="section" id="shortcuts">
|
|
829
|
+
<div class="section-header">
|
|
830
|
+
<div class="section-number">9</div>
|
|
831
|
+
<div>
|
|
832
|
+
<div class="section-title">Keyboard Shortcuts Reference</div>
|
|
833
|
+
<div class="section-subtitle">Speed up your workflow with keyboard commands</div>
|
|
834
|
+
</div>
|
|
835
|
+
</div>
|
|
836
|
+
|
|
837
|
+
<p>
|
|
838
|
+
Memorizing a few shortcuts will dramatically speed up your modeling. Here's a complete reference.
|
|
839
|
+
</p>
|
|
840
|
+
|
|
841
|
+
<h3 style="margin-top: 28px; margin-bottom: 16px; font-size: 18px; font-weight: 600;">General:</h3>
|
|
842
|
+
|
|
843
|
+
<table class="shortcuts-table">
|
|
844
|
+
<thead>
|
|
845
|
+
<tr>
|
|
846
|
+
<th>Shortcut</th>
|
|
847
|
+
<th>Action</th>
|
|
848
|
+
</tr>
|
|
849
|
+
</thead>
|
|
850
|
+
<tbody>
|
|
851
|
+
<tr>
|
|
852
|
+
<td><code>Ctrl+Z</code> / <code>Cmd+Z</code></td>
|
|
853
|
+
<td>Undo last action</td>
|
|
854
|
+
</tr>
|
|
855
|
+
<tr>
|
|
856
|
+
<td><code>Ctrl+Y</code> / <code>Cmd+Shift+Z</code></td>
|
|
857
|
+
<td>Redo</td>
|
|
858
|
+
</tr>
|
|
859
|
+
<tr>
|
|
860
|
+
<td><code>Ctrl+S</code> / <code>Cmd+S</code></td>
|
|
861
|
+
<td>Save (cycleCAD JSON)</td>
|
|
862
|
+
</tr>
|
|
863
|
+
<tr>
|
|
864
|
+
<td><code>Ctrl+O</code> / <code>Cmd+O</code></td>
|
|
865
|
+
<td>Open saved file</td>
|
|
866
|
+
</tr>
|
|
867
|
+
<tr>
|
|
868
|
+
<td><code>Esc</code></td>
|
|
869
|
+
<td>Cancel current operation, exit sketch mode</td>
|
|
870
|
+
</tr>
|
|
871
|
+
<tr>
|
|
872
|
+
<td><code>Del</code></td>
|
|
873
|
+
<td>Delete selected feature or part</td>
|
|
874
|
+
</tr>
|
|
875
|
+
</tbody>
|
|
876
|
+
</table>
|
|
877
|
+
|
|
878
|
+
<h3 style="margin-top: 28px; margin-bottom: 16px; font-size: 18px; font-weight: 600;">Sketch Tools:</h3>
|
|
879
|
+
|
|
880
|
+
<table class="shortcuts-table">
|
|
881
|
+
<thead>
|
|
882
|
+
<tr>
|
|
883
|
+
<th>Shortcut</th>
|
|
884
|
+
<th>Action</th>
|
|
885
|
+
</tr>
|
|
886
|
+
</thead>
|
|
887
|
+
<tbody>
|
|
888
|
+
<tr>
|
|
889
|
+
<td><code>S</code></td>
|
|
890
|
+
<td>Enter Sketch mode</td>
|
|
891
|
+
</tr>
|
|
892
|
+
<tr>
|
|
893
|
+
<td><code>L</code></td>
|
|
894
|
+
<td>Line tool</td>
|
|
895
|
+
</tr>
|
|
896
|
+
<tr>
|
|
897
|
+
<td><code>R</code></td>
|
|
898
|
+
<td>Rectangle tool</td>
|
|
899
|
+
</tr>
|
|
900
|
+
<tr>
|
|
901
|
+
<td><code>C</code></td>
|
|
902
|
+
<td>Circle tool</td>
|
|
903
|
+
</tr>
|
|
904
|
+
<tr>
|
|
905
|
+
<td><code>A</code></td>
|
|
906
|
+
<td>Arc tool</td>
|
|
907
|
+
</tr>
|
|
908
|
+
<tr>
|
|
909
|
+
<td><code>G</code></td>
|
|
910
|
+
<td>Toggle grid on/off</td>
|
|
911
|
+
</tr>
|
|
912
|
+
</tbody>
|
|
913
|
+
</table>
|
|
914
|
+
|
|
915
|
+
<h3 style="margin-top: 28px; margin-bottom: 16px; font-size: 18px; font-weight: 600;">3D Operations:</h3>
|
|
916
|
+
|
|
917
|
+
<table class="shortcuts-table">
|
|
918
|
+
<thead>
|
|
919
|
+
<tr>
|
|
920
|
+
<th>Shortcut</th>
|
|
921
|
+
<th>Action</th>
|
|
922
|
+
</tr>
|
|
923
|
+
</thead>
|
|
924
|
+
<tbody>
|
|
925
|
+
<tr>
|
|
926
|
+
<td><code>E</code></td>
|
|
927
|
+
<td>Extrude sketch</td>
|
|
928
|
+
</tr>
|
|
929
|
+
<tr>
|
|
930
|
+
<td><code>V</code></td>
|
|
931
|
+
<td>Revolve sketch</td>
|
|
932
|
+
</tr>
|
|
933
|
+
<tr>
|
|
934
|
+
<td><code>F</code></td>
|
|
935
|
+
<td>Fillet edges</td>
|
|
936
|
+
</tr>
|
|
937
|
+
<tr>
|
|
938
|
+
<td><code>H</code></td>
|
|
939
|
+
<td>Chamfer edges</td>
|
|
940
|
+
</tr>
|
|
941
|
+
<tr>
|
|
942
|
+
<td><code>P</code></td>
|
|
943
|
+
<td>Pattern (array)</td>
|
|
944
|
+
</tr>
|
|
945
|
+
<tr>
|
|
946
|
+
<td><code>B</code></td>
|
|
947
|
+
<td>Boolean operation (union, cut, intersect)</td>
|
|
948
|
+
</tr>
|
|
949
|
+
</tbody>
|
|
950
|
+
</table>
|
|
951
|
+
|
|
952
|
+
<h3 style="margin-top: 28px; margin-bottom: 16px; font-size: 18px; font-weight: 600;">Viewport Navigation:</h3>
|
|
953
|
+
|
|
954
|
+
<table class="shortcuts-table">
|
|
955
|
+
<thead>
|
|
956
|
+
<tr>
|
|
957
|
+
<th>Shortcut</th>
|
|
958
|
+
<th>Action</th>
|
|
959
|
+
</tr>
|
|
960
|
+
</thead>
|
|
961
|
+
<tbody>
|
|
962
|
+
<tr>
|
|
963
|
+
<td><code>1</code></td>
|
|
964
|
+
<td>Front view</td>
|
|
965
|
+
</tr>
|
|
966
|
+
<tr>
|
|
967
|
+
<td><code>2</code></td>
|
|
968
|
+
<td>Top view</td>
|
|
969
|
+
</tr>
|
|
970
|
+
<tr>
|
|
971
|
+
<td><code>3</code></td>
|
|
972
|
+
<td>Right view</td>
|
|
973
|
+
</tr>
|
|
974
|
+
<tr>
|
|
975
|
+
<td><code>7</code></td>
|
|
976
|
+
<td>Isometric 3D view</td>
|
|
977
|
+
</tr>
|
|
978
|
+
<tr>
|
|
979
|
+
<td><code>0</code></td>
|
|
980
|
+
<td>Fit all (zoom to see entire model)</td>
|
|
981
|
+
</tr>
|
|
982
|
+
<tr>
|
|
983
|
+
<td><code>W</code></td>
|
|
984
|
+
<td>Toggle wireframe</td>
|
|
985
|
+
</tr>
|
|
986
|
+
<tr>
|
|
987
|
+
<td><code>?</code></td>
|
|
988
|
+
<td>Show help panel</td>
|
|
989
|
+
</tr>
|
|
990
|
+
</tbody>
|
|
991
|
+
</table>
|
|
992
|
+
|
|
993
|
+
<button class="mark-complete-btn" data-section="shortcuts">✓ Mark Complete</button>
|
|
994
|
+
</div>
|
|
995
|
+
|
|
996
|
+
<!-- Section 10: Next Steps -->
|
|
997
|
+
<div class="section" id="next">
|
|
998
|
+
<div class="section-header">
|
|
999
|
+
<div class="section-number">10</div>
|
|
1000
|
+
<div>
|
|
1001
|
+
<div class="section-title">Next Steps</div>
|
|
1002
|
+
<div class="section-subtitle">What to learn after the basics</div>
|
|
1003
|
+
</div>
|
|
1004
|
+
</div>
|
|
1005
|
+
|
|
1006
|
+
<p>
|
|
1007
|
+
Congratulations! You've learned the fundamentals of cycleCAD. You can now:
|
|
1008
|
+
</p>
|
|
1009
|
+
|
|
1010
|
+
<ul style="margin: 20px 0; padding-left: 20px;">
|
|
1011
|
+
<li>Create sketches with lines, rectangles, circles, and arcs</li>
|
|
1012
|
+
<li>Extrude and revolve sketches into 3D solids</li>
|
|
1013
|
+
<li>Navigate the 3D viewport with your mouse</li>
|
|
1014
|
+
<li>Use the feature tree to organize your model</li>
|
|
1015
|
+
<li>Export your work in multiple formats</li>
|
|
1016
|
+
</ul>
|
|
1017
|
+
|
|
1018
|
+
<p style="margin-top: 20px;">
|
|
1019
|
+
Ready to learn more? The <strong>Intermediate</strong> tutorial covers:
|
|
1020
|
+
</p>
|
|
1021
|
+
|
|
1022
|
+
<ul style="margin: 20px 0; padding-left: 20px;">
|
|
1023
|
+
<li><strong>Fillets and Chamfers:</strong> Smooth and bevel edges for realistic parts</li>
|
|
1024
|
+
<li><strong>Boolean Operations:</strong> Union, cut, and intersect multiple solids</li>
|
|
1025
|
+
<li><strong>Patterns:</strong> Create rectangular and circular arrays of features</li>
|
|
1026
|
+
<li><strong>Assemblies:</strong> Combine multiple parts into an assembly with constraints</li>
|
|
1027
|
+
<li><strong>Advanced Sketches:</strong> Constraints, driven dimensions, and symmetric geometry</li>
|
|
1028
|
+
</ul>
|
|
1029
|
+
|
|
1030
|
+
<p style="margin-top: 20px;">
|
|
1031
|
+
After that, the <strong>Advanced</strong> tutorial unlocks:
|
|
1032
|
+
</p>
|
|
1033
|
+
|
|
1034
|
+
<ul style="margin: 20px 0; padding-left: 20px;">
|
|
1035
|
+
<li><strong>Sweep:</strong> Pull a profile along a 3D path</li>
|
|
1036
|
+
<li><strong>Loft:</strong> Blend between multiple profiles</li>
|
|
1037
|
+
<li><strong>Sheet Metal:</strong> Bend, flange, and unfold metal parts</li>
|
|
1038
|
+
<li><strong>AI Copilot:</strong> Generate designs and CAM code with natural language</li>
|
|
1039
|
+
</ul>
|
|
1040
|
+
|
|
1041
|
+
<div class="next-steps-section">
|
|
1042
|
+
<h3 style="font-size: 18px; margin-bottom: 8px;">Ready to level up?</h3>
|
|
1043
|
+
<p style="color: var(--text-secondary); margin-bottom: 0;">
|
|
1044
|
+
Continue your learning journey with the Intermediate tutorial.
|
|
1045
|
+
</p>
|
|
1046
|
+
<a href="intermediate.html">Continue to Intermediate Tutorial →</a>
|
|
1047
|
+
</div>
|
|
1048
|
+
|
|
1049
|
+
<button class="mark-complete-btn" data-section="next">✓ Mark Complete</button>
|
|
1050
|
+
</div>
|
|
1051
|
+
</div>
|
|
1052
|
+
</div>
|
|
1053
|
+
|
|
1054
|
+
<script>
|
|
1055
|
+
// localStorage key for tracking completed sections
|
|
1056
|
+
const STORAGE_KEY = 'cyclecad_tutorial_basic_progress';
|
|
1057
|
+
|
|
1058
|
+
// Get all section buttons
|
|
1059
|
+
const sectionBtns = document.querySelectorAll('[data-section]');
|
|
1060
|
+
const markCompleteBtns = document.querySelectorAll('.mark-complete-btn');
|
|
1061
|
+
|
|
1062
|
+
// Load progress from localStorage
|
|
1063
|
+
function loadProgress() {
|
|
1064
|
+
const saved = localStorage.getItem(STORAGE_KEY);
|
|
1065
|
+
if (saved) {
|
|
1066
|
+
const completed = JSON.parse(saved);
|
|
1067
|
+
completed.forEach(section => {
|
|
1068
|
+
markSectionComplete(section, true);
|
|
1069
|
+
});
|
|
1070
|
+
}
|
|
1071
|
+
}
|
|
1072
|
+
|
|
1073
|
+
// Save progress to localStorage
|
|
1074
|
+
function saveProgress() {
|
|
1075
|
+
const completed = Array.from(document.querySelectorAll('.progress-item.complete')).map(
|
|
1076
|
+
el => el.dataset.section
|
|
1077
|
+
);
|
|
1078
|
+
localStorage.setItem(STORAGE_KEY, JSON.stringify(completed));
|
|
1079
|
+
}
|
|
1080
|
+
|
|
1081
|
+
// Mark a section as complete
|
|
1082
|
+
function markSectionComplete(sectionId, fromLoad = false) {
|
|
1083
|
+
const progressItem = document.querySelector(`[data-section="${sectionId}"]`);
|
|
1084
|
+
const btn = document.querySelector(`[data-section="${sectionId}"]`).parentElement.querySelector('.mark-complete-btn');
|
|
1085
|
+
|
|
1086
|
+
if (progressItem) {
|
|
1087
|
+
progressItem.classList.add('complete');
|
|
1088
|
+
}
|
|
1089
|
+
|
|
1090
|
+
if (btn) {
|
|
1091
|
+
btn.classList.add('completed');
|
|
1092
|
+
btn.textContent = '✓ Complete';
|
|
1093
|
+
btn.disabled = true;
|
|
1094
|
+
}
|
|
1095
|
+
|
|
1096
|
+
if (!fromLoad) {
|
|
1097
|
+
saveProgress();
|
|
1098
|
+
}
|
|
1099
|
+
}
|
|
1100
|
+
|
|
1101
|
+
// Add click handlers to progress items (scroll navigation)
|
|
1102
|
+
sectionBtns.forEach(btn => {
|
|
1103
|
+
btn.addEventListener('click', () => {
|
|
1104
|
+
const sectionId = btn.dataset.section;
|
|
1105
|
+
const section = document.getElementById(sectionId);
|
|
1106
|
+
if (section) {
|
|
1107
|
+
// Update active state
|
|
1108
|
+
document.querySelectorAll('.progress-item').forEach(item => {
|
|
1109
|
+
item.classList.remove('active');
|
|
1110
|
+
});
|
|
1111
|
+
btn.classList.add('active');
|
|
1112
|
+
|
|
1113
|
+
// Smooth scroll
|
|
1114
|
+
section.scrollIntoView({ behavior: 'smooth', block: 'start' });
|
|
1115
|
+
}
|
|
1116
|
+
});
|
|
1117
|
+
});
|
|
1118
|
+
|
|
1119
|
+
// Add click handlers to mark complete buttons
|
|
1120
|
+
markCompleteBtns.forEach(btn => {
|
|
1121
|
+
btn.addEventListener('click', () => {
|
|
1122
|
+
const sectionId = btn.dataset.section;
|
|
1123
|
+
if (!btn.classList.contains('completed')) {
|
|
1124
|
+
markSectionComplete(sectionId);
|
|
1125
|
+
}
|
|
1126
|
+
});
|
|
1127
|
+
});
|
|
1128
|
+
|
|
1129
|
+
// Update active progress item on scroll
|
|
1130
|
+
const observerOptions = {
|
|
1131
|
+
root: null,
|
|
1132
|
+
rootMargin: '-100px 0px -66% 0px',
|
|
1133
|
+
threshold: 0
|
|
1134
|
+
};
|
|
1135
|
+
|
|
1136
|
+
const observer = new IntersectionObserver((entries) => {
|
|
1137
|
+
entries.forEach(entry => {
|
|
1138
|
+
if (entry.isIntersecting) {
|
|
1139
|
+
const id = entry.target.id;
|
|
1140
|
+
document.querySelectorAll('.progress-item').forEach(item => {
|
|
1141
|
+
item.classList.remove('active');
|
|
1142
|
+
});
|
|
1143
|
+
const activeItem = document.querySelector(`[data-section="${id}"]`);
|
|
1144
|
+
if (activeItem) {
|
|
1145
|
+
activeItem.classList.add('active');
|
|
1146
|
+
}
|
|
1147
|
+
}
|
|
1148
|
+
});
|
|
1149
|
+
}, observerOptions);
|
|
1150
|
+
|
|
1151
|
+
// Observe all sections
|
|
1152
|
+
document.querySelectorAll('.section').forEach(section => {
|
|
1153
|
+
observer.observe(section);
|
|
1154
|
+
});
|
|
1155
|
+
|
|
1156
|
+
// Load progress on page load
|
|
1157
|
+
loadProgress();
|
|
1158
|
+
</script>
|
|
1159
|
+
</body>
|
|
1160
|
+
</html>
|