cyclecad 0.1.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.
Files changed (23) hide show
  1. package/CNAME +1 -0
  2. package/app/docs/api-reference.html +1436 -0
  3. package/app/docs/examples.html +803 -0
  4. package/app/docs/getting-started.html +1620 -0
  5. package/app/duo-project-browser.html +1321 -0
  6. package/app/duo-rebuild-guide.html +861 -0
  7. package/app/index.html +1635 -0
  8. package/app/js/ai-chat.js +992 -0
  9. package/app/js/app.js +724 -0
  10. package/app/js/export.js +658 -0
  11. package/app/js/inventor-parser.js +1138 -0
  12. package/app/js/operations.js +689 -0
  13. package/app/js/params.js +523 -0
  14. package/app/js/reverse-engineer.js +1275 -0
  15. package/app/js/shortcuts.js +350 -0
  16. package/app/js/sketch.js +899 -0
  17. package/app/js/tree.js +479 -0
  18. package/app/js/viewport.js +643 -0
  19. package/app/samples/Leistenbuerstenblech.ipt +0 -0
  20. package/app/samples/Rahmen_Seite.iam +0 -0
  21. package/app/samples/TraegerHoehe1.ipt +0 -0
  22. package/index.html +1226 -0
  23. package/package.json +33 -0
package/app/docs/getting-started.html ADDED
@@ -0,0 +1,1620 @@
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>Getting Started with cycleCAD - Browser-Based 3D Modeling</title>
7
+ <style>
8
+ * {
9
+ margin: 0;
10
+ padding: 0;
11
+ box-sizing: border-box;
12
+ }
13
+
14
+ html {
15
+ scroll-behavior: smooth;
16
+ }
17
+
18
+ body {
19
+ font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', sans-serif;
20
+ background-color: #0d1117;
21
+ color: #e6edf3;
22
+ line-height: 1.6;
23
+ }
24
+
25
+ /* Layout */
26
+ .container {
27
+ display: flex;
28
+ min-height: 100vh;
29
+ }
30
+
31
+ /* Sidebar Navigation */
32
+ .sidebar {
33
+ position: sticky;
34
+ top: 0;
35
+ width: 250px;
36
+ height: 100vh;
37
+ background-color: #161b22;
38
+ border-right: 1px solid #30363d;
39
+ overflow-y: auto;
40
+ padding: 24px 0;
41
+ z-index: 100;
42
+ }
43
+
44
+ .sidebar-header {
45
+ padding: 0 16px 16px;
46
+ border-bottom: 1px solid #30363d;
47
+ margin-bottom: 16px;
48
+ }
49
+
50
+ .sidebar-title {
51
+ font-size: 18px;
52
+ font-weight: 600;
53
+ color: #58a6ff;
54
+ }
55
+
56
+ .sidebar-nav {
57
+ list-style: none;
58
+ }
59
+
60
+ .sidebar-nav li {
61
+ padding: 0;
62
+ }
63
+
64
+ .sidebar-nav a {
65
+ display: block;
66
+ padding: 8px 16px;
67
+ color: #e6edf3;
68
+ text-decoration: none;
69
+ border-left: 3px solid transparent;
70
+ transition: all 0.2s;
71
+ font-size: 14px;
72
+ }
73
+
74
+ .sidebar-nav a:hover {
75
+ color: #58a6ff;
76
+ background-color: #0d1117;
77
+ border-left-color: #58a6ff;
78
+ }
79
+
80
+ .sidebar-nav a.active {
81
+ color: #58a6ff;
82
+ background-color: rgba(88, 166, 255, 0.1);
83
+ border-left-color: #58a6ff;
84
+ font-weight: 500;
85
+ }
86
+
87
+ /* Main Content */
88
+ .main-content {
89
+ flex: 1;
90
+ padding: 0;
91
+ background: linear-gradient(135deg, #0d1117 0%, #0f1419 100%);
92
+ }
93
+
94
+ .content {
95
+ max-width: 800px;
96
+ margin: 0 auto;
97
+ padding: 60px 40px;
98
+ }
99
+
100
+ /* Header */
101
+ .page-header {
102
+ margin-bottom: 60px;
103
+ padding-bottom: 40px;
104
+ border-bottom: 1px solid #30363d;
105
+ }
106
+
107
+ .page-title {
108
+ font-size: 42px;
109
+ font-weight: 700;
110
+ margin-bottom: 12px;
111
+ background: linear-gradient(135deg, #58a6ff 0%, #79c0ff 100%);
112
+ -webkit-background-clip: text;
113
+ -webkit-text-fill-color: transparent;
114
+ background-clip: text;
115
+ }
116
+
117
+ .page-subtitle {
118
+ font-size: 16px;
119
+ color: #8b949e;
120
+ margin-top: 8px;
121
+ }
122
+
123
+ /* Sections */
124
+ section {
125
+ margin-bottom: 60px;
126
+ scroll-margin-top: 80px;
127
+ }
128
+
129
+ h2 {
130
+ font-size: 28px;
131
+ font-weight: 700;
132
+ margin-bottom: 20px;
133
+ color: #58a6ff;
134
+ display: flex;
135
+ align-items: center;
136
+ }
137
+
138
+ h2 .section-number {
139
+ display: inline-flex;
140
+ align-items: center;
141
+ justify-content: center;
142
+ width: 36px;
143
+ height: 36px;
144
+ background-color: rgba(88, 166, 255, 0.1);
145
+ border: 2px solid #58a6ff;
146
+ border-radius: 50%;
147
+ margin-right: 12px;
148
+ font-size: 16px;
149
+ flex-shrink: 0;
150
+ }
151
+
152
+ h3 {
153
+ font-size: 18px;
154
+ font-weight: 600;
155
+ margin-top: 24px;
156
+ margin-bottom: 12px;
157
+ color: #e6edf3;
158
+ }
159
+
160
+ p, li {
161
+ font-size: 15px;
162
+ color: #c9d1d9;
163
+ margin-bottom: 16px;
164
+ }
165
+
166
+ a {
167
+ color: #58a6ff;
168
+ text-decoration: none;
169
+ border-bottom: 1px solid transparent;
170
+ transition: border-color 0.2s;
171
+ }
172
+
173
+ a:hover {
174
+ border-bottom-color: #58a6ff;
175
+ }
176
+
177
+ /* Lists */
178
+ ol, ul {
179
+ margin-left: 24px;
180
+ }
181
+
182
+ li {
183
+ margin-bottom: 12px;
184
+ }
185
+
186
+ /* Code blocks */
187
+ .code-block {
188
+ background-color: #0f1419;
189
+ border: 1px solid #30363d;
190
+ border-radius: 8px;
191
+ padding: 16px;
192
+ margin: 16px 0;
193
+ overflow-x: auto;
194
+ font-family: 'Monaco', 'Menlo', 'Courier New', monospace;
195
+ font-size: 13px;
196
+ color: #79c0ff;
197
+ }
198
+
199
+ /* Steps */
200
+ .step {
201
+ background-color: rgba(88, 166, 255, 0.05);
202
+ border-left: 4px solid #58a6ff;
203
+ padding: 16px 20px;
204
+ margin: 16px 0;
205
+ border-radius: 4px;
206
+ }
207
+
208
+ .step-number {
209
+ display: inline-flex;
210
+ align-items: center;
211
+ justify-content: center;
212
+ width: 28px;
213
+ height: 28px;
214
+ background-color: #58a6ff;
215
+ color: #0d1117;
216
+ border-radius: 50%;
217
+ font-weight: 700;
218
+ margin-right: 12px;
219
+ font-size: 14px;
220
+ }
221
+
222
+ .step-title {
223
+ font-weight: 600;
224
+ color: #58a6ff;
225
+ margin-bottom: 8px;
226
+ display: flex;
227
+ align-items: center;
228
+ }
229
+
230
+ .step-description {
231
+ color: #c9d1d9;
232
+ margin-left: 40px;
233
+ margin-top: -28px;
234
+ padding-top: 0;
235
+ }
236
+
237
+ /* Tables */
238
+ table {
239
+ width: 100%;
240
+ border-collapse: collapse;
241
+ margin: 24px 0;
242
+ font-size: 14px;
243
+ }
244
+
245
+ thead {
246
+ background-color: rgba(88, 166, 255, 0.1);
247
+ }
248
+
249
+ th {
250
+ padding: 12px 16px;
251
+ text-align: left;
252
+ font-weight: 600;
253
+ color: #58a6ff;
254
+ border-bottom: 2px solid #30363d;
255
+ }
256
+
257
+ td {
258
+ padding: 12px 16px;
259
+ border-bottom: 1px solid #30363d;
260
+ color: #c9d1d9;
261
+ }
262
+
263
+ tr:hover {
264
+ background-color: rgba(88, 166, 255, 0.05);
265
+ }
266
+
267
+ /* Grid layout for shortcuts */
268
+ .shortcut-grid {
269
+ display: grid;
270
+ grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
271
+ gap: 12px;
272
+ margin: 20px 0;
273
+ }
274
+
275
+ .shortcut-item {
276
+ background-color: rgba(88, 166, 255, 0.05);
277
+ border: 1px solid #30363d;
278
+ border-radius: 6px;
279
+ padding: 12px;
280
+ font-size: 13px;
281
+ }
282
+
283
+ .shortcut-key {
284
+ display: inline-block;
285
+ background-color: #30363d;
286
+ color: #79c0ff;
287
+ padding: 4px 8px;
288
+ border-radius: 4px;
289
+ font-family: 'Monaco', monospace;
290
+ font-weight: 600;
291
+ margin-right: 8px;
292
+ }
293
+
294
+ .shortcut-action {
295
+ color: #c9d1d9;
296
+ }
297
+
298
+ /* Callout boxes */
299
+ .callout {
300
+ background-color: rgba(88, 166, 255, 0.1);
301
+ border-left: 4px solid #58a6ff;
302
+ padding: 16px;
303
+ border-radius: 6px;
304
+ margin: 24px 0;
305
+ }
306
+
307
+ .callout.tip {
308
+ border-left-color: #3fb950;
309
+ background-color: rgba(63, 185, 80, 0.1);
310
+ }
311
+
312
+ .callout.warning {
313
+ border-left-color: #d29922;
314
+ background-color: rgba(210, 153, 34, 0.1);
315
+ }
316
+
317
+ .callout.info {
318
+ border-left-color: #58a6ff;
319
+ background-color: rgba(88, 166, 255, 0.1);
320
+ }
321
+
322
+ .callout-title {
323
+ font-weight: 600;
324
+ margin-bottom: 8px;
325
+ display: flex;
326
+ align-items: center;
327
+ }
328
+
329
+ .callout.tip .callout-title {
330
+ color: #3fb950;
331
+ }
332
+
333
+ .callout.warning .callout-title {
334
+ color: #d29922;
335
+ }
336
+
337
+ .callout.info .callout-title {
338
+ color: #58a6ff;
339
+ }
340
+
341
+ /* Diagram */
342
+ .diagram {
343
+ background-color: #0f1419;
344
+ border: 1px solid #30363d;
345
+ border-radius: 8px;
346
+ padding: 24px;
347
+ margin: 24px 0;
348
+ font-family: 'Monaco', monospace;
349
+ font-size: 12px;
350
+ color: #79c0ff;
351
+ overflow-x: auto;
352
+ line-height: 1.4;
353
+ }
354
+
355
+ /* Cards for tutorials */
356
+ .tutorial-card {
357
+ background-color: #161b22;
358
+ border: 1px solid #30363d;
359
+ border-radius: 8px;
360
+ padding: 24px;
361
+ margin: 20px 0;
362
+ }
363
+
364
+ .tutorial-card h4 {
365
+ color: #58a6ff;
366
+ margin-bottom: 12px;
367
+ font-size: 16px;
368
+ }
369
+
370
+ /* Responsive */
371
+ @media (max-width: 768px) {
372
+ .container {
373
+ flex-direction: column;
374
+ }
375
+
376
+ .sidebar {
377
+ width: 100%;
378
+ height: auto;
379
+ position: static;
380
+ border-right: none;
381
+ border-bottom: 1px solid #30363d;
382
+ padding: 16px 0;
383
+ }
384
+
385
+ .content {
386
+ padding: 40px 20px;
387
+ }
388
+
389
+ .page-title {
390
+ font-size: 32px;
391
+ }
392
+
393
+ h2 {
394
+ font-size: 22px;
395
+ }
396
+
397
+ .shortcut-grid {
398
+ grid-template-columns: 1fr;
399
+ }
400
+
401
+ table {
402
+ font-size: 12px;
403
+ }
404
+
405
+ th, td {
406
+ padding: 8px 12px;
407
+ }
408
+ }
409
+
410
+ /* Scrollbar styling */
411
+ .sidebar::-webkit-scrollbar,
412
+ .code-block::-webkit-scrollbar {
413
+ width: 8px;
414
+ }
415
+
416
+ .sidebar::-webkit-scrollbar-track,
417
+ .code-block::-webkit-scrollbar-track {
418
+ background: transparent;
419
+ }
420
+
421
+ .sidebar::-webkit-scrollbar-thumb,
422
+ .code-block::-webkit-scrollbar-thumb {
423
+ background-color: #30363d;
424
+ border-radius: 4px;
425
+ }
426
+
427
+ .sidebar::-webkit-scrollbar-thumb:hover,
428
+ .code-block::-webkit-scrollbar-thumb:hover {
429
+ background-color: #484f58;
430
+ }
431
+
432
+ /* Footer */
433
+ .footer {
434
+ margin-top: 80px;
435
+ padding-top: 40px;
436
+ border-top: 1px solid #30363d;
437
+ text-align: center;
438
+ color: #8b949e;
439
+ font-size: 14px;
440
+ }
441
+
442
+ .footer a {
443
+ color: #58a6ff;
444
+ }
445
+
446
+ /* Highlight text */
447
+ .highlight {
448
+ background-color: rgba(88, 166, 255, 0.2);
449
+ padding: 2px 6px;
450
+ border-radius: 3px;
451
+ }
452
+
453
+ /* Button style */
454
+ .button-preview {
455
+ display: inline-block;
456
+ background-color: #238636;
457
+ color: #ffffff;
458
+ padding: 10px 16px;
459
+ border-radius: 6px;
460
+ font-weight: 500;
461
+ font-size: 14px;
462
+ border: 1px solid #2ea043;
463
+ cursor: pointer;
464
+ margin: 8px 8px 8px 0;
465
+ }
466
+
467
+ .button-preview:hover {
468
+ background-color: #2ea043;
469
+ }
470
+ </style>
471
+ </head>
472
+ <body>
473
+ <div class="container">
474
+ <!-- Sidebar Navigation -->
475
+ <aside class="sidebar">
476
+ <div class="sidebar-header">
477
+ <div class="sidebar-title">cycleCAD Docs</div>
478
+ </div>
479
+ <nav>
480
+ <ul class="sidebar-nav">
481
+ <li><a href="#welcome" class="nav-link active">Welcome</a></li>
482
+ <li><a href="#quick-start" class="nav-link">Quick Start</a></li>
483
+ <li><a href="#tutorial-bracket" class="nav-link">Bracket Tutorial</a></li>
484
+ <li><a href="#tutorial-ai" class="nav-link">AI-Generated Part</a></li>
485
+ <li><a href="#tutorial-spacer" class="nav-link">Complex Part</a></li>
486
+ <li><a href="#interface" class="nav-link">Interface Guide</a></li>
487
+ <li><a href="#shortcuts" class="nav-link">Keyboard Shortcuts</a></li>
488
+ <li><a href="#ai-prompts" class="nav-link">AI Prompt Examples</a></li>
489
+ <li><a href="#export" class="nav-link">Export Options</a></li>
490
+ </ul>
491
+ </nav>
492
+ </aside>
493
+
494
+ <!-- Main Content -->
495
+ <main class="main-content">
496
+ <div class="content">
497
+ <!-- Header -->
498
+ <header class="page-header">
499
+ <h1 class="page-title">Getting Started with cycleCAD</h1>
500
+ <p class="page-subtitle">Learn browser-based parametric 3D modeling in minutes. No installation required.</p>
501
+ </header>
502
+
503
+ <!-- Section 1: Welcome -->
504
+ <section id="welcome">
505
+ <h2><span class="section-number">1</span> Welcome to cycleCAD</h2>
506
+ <p>cycleCAD is a <span class="highlight">browser-based parametric 3D modeler</span> powered by OpenCascade. Create professional-grade CAD models directly in your browser without installing any software.</p>
507
+
508
+ <h3>What You Can Do</h3>
509
+ <ul>
510
+ <li><strong>Sketch & Extrude:</strong> Draw 2D sketches and extrude them into 3D parts</li>
511
+ <li><strong>AI Text-to-3D:</strong> Describe a part in natural language and watch it generate instantly</li>
512
+ <li><strong>Import STEP Files:</strong> Load existing CAD designs and modify them parametrically</li>
513
+ <li><strong>Export Multiple Formats:</strong> STL (3D printing), OBJ, STEP, and cycleCAD JSON</li>
514
+ <li><strong>Parametric Design:</strong> Change dimensions anytime and the model updates automatically</li>
515
+ </ul>
516
+
517
+ <div class="callout info">
518
+ <div class="callout-title">💡 Zero Installation</div>
519
+ <p>cycleCAD runs entirely in your browser. Just open it, start creating, and your models sync to the cloud. Work from any device, any browser.</p>
520
+ </div>
521
+
522
+ <h3>Three Ways to Create</h3>
523
+ <table>
524
+ <thead>
525
+ <tr>
526
+ <th>Method</th>
527
+ <th>Best For</th>
528
+ <th>Skill Level</th>
529
+ </tr>
530
+ </thead>
531
+ <tbody>
532
+ <tr>
533
+ <td><strong>Sketch → Extrude</strong></td>
534
+ <td>Precise parts with exact dimensions</td>
535
+ <td>Beginner to Advanced</td>
536
+ </tr>
537
+ <tr>
538
+ <td><strong>AI Text-to-3D</strong></td>
539
+ <td>Quick prototyping, exploration, ideas</td>
540
+ <td>Beginner</td>
541
+ </tr>
542
+ <tr>
543
+ <td><strong>Import & Modify</strong></td>
544
+ <td>Iterating on existing designs</td>
545
+ <td>Intermediate</td>
546
+ </tr>
547
+ </tbody>
548
+ </table>
549
+ </section>
550
+
551
+ <!-- Section 2: Quick Start -->
552
+ <section id="quick-start">
553
+ <h2><span class="section-number">2</span> Quick Start (60 Seconds)</h2>
554
+ <p>Follow these steps to create your first 3D part. Estimated time: <span class="highlight">60 seconds</span>.</p>
555
+
556
+ <div class="step">
557
+ <div class="step-title">
558
+ <span class="step-number">1</span>
559
+ Open cycleCAD in your browser
560
+ </div>
561
+ <div class="step-description">
562
+ Navigate to <code>https://cyclecad.com</code> or open it locally. You'll see the welcome screen.
563
+ </div>
564
+ </div>
565
+
566
+ <div class="step">
567
+ <div class="step-title">
568
+ <span class="step-number">2</span>
569
+ Click "New Sketch" on the welcome screen
570
+ </div>
571
+ <div class="step-description">
572
+ A blank canvas appears. You're now in sketch mode, ready to draw 2D shapes.
573
+ </div>
574
+ </div>
575
+
576
+ <div class="step">
577
+ <div class="step-title">
578
+ <span class="step-number">3</span>
579
+ Select Rectangle tool (press <span class="highlight">R</span>)
580
+ </div>
581
+ <div class="step-description">
582
+ The rectangle tool is active. The cursor changes to a crosshair. You can also click the Rectangle icon in the toolbar.
583
+ </div>
584
+ </div>
585
+
586
+ <div class="step">
587
+ <div class="step-title">
588
+ <span class="step-number">4</span>
589
+ Click two points to draw a 50×30mm rectangle
590
+ </div>
591
+ <div class="step-description">
592
+ Click once for the first corner. A dimensions panel appears. Type <code>50</code> for width and <code>30</code> for height. Click the second corner to complete the rectangle.
593
+ </div>
594
+ </div>
595
+
596
+ <div class="step">
597
+ <div class="step-title">
598
+ <span class="step-number">5</span>
599
+ Press <span class="highlight">Enter</span> to finish the sketch
600
+ </div>
601
+ <div class="step-description">
602
+ The sketch is now complete. The 2D shape is ready to be extruded into 3D.
603
+ </div>
604
+ </div>
605
+
606
+ <div class="step">
607
+ <div class="step-title">
608
+ <span class="step-number">6</span>
609
+ Click Extrude (or press <span class="highlight">E</span>)
610
+ </div>
611
+ <div class="step-description">
612
+ The extrude tool is activated. You can now define the height of your 3D part.
613
+ </div>
614
+ </div>
615
+
616
+ <div class="step">
617
+ <div class="step-title">
618
+ <span class="step-number">7</span>
619
+ Enter 20mm height → You have your first 3D part!
620
+ </div>
621
+ <div class="step-description">
622
+ Type <code>20</code> in the height field. Press Enter. Congratulations! You've created a 50×30×20mm solid block. The 3D view shows your part with lighting and shadows.
623
+ </div>
624
+ </div>
625
+
626
+ <div class="callout tip">
627
+ <div class="callout-title">✓ You Did It!</div>
628
+ <p>You just created your first parametric 3D model. In the Properties panel on the right, you can click any dimension to edit it and see your model update in real-time. Try changing the width to 60mm—the entire part updates instantly.</p>
629
+ </div>
630
+ </section>
631
+
632
+ <!-- Section 3: Bracket Tutorial -->
633
+ <section id="tutorial-bracket">
634
+ <h2><span class="section-number">3</span> Tutorial: Creating a Mounting Bracket</h2>
635
+ <p>A practical walkthrough creating a mounting bracket with bolt holes—a common part in mechanical design.</p>
636
+
637
+ <div class="tutorial-card">
638
+ <h4>Step 1: Create the Base Sketch</h4>
639
+ <ol>
640
+ <li>Click <span class="highlight">New Sketch</span> (or press <span class="highlight">Ctrl+N</span>)</li>
641
+ <li>Select the <span class="highlight">Rectangle</span> tool (R key)</li>
642
+ <li>Draw a rectangle: <strong>80mm wide × 40mm tall</strong></li>
643
+ <li>Press <span class="highlight">Enter</span> to finish the sketch</li>
644
+ </ol>
645
+ </div>
646
+
647
+ <div class="diagram">
648
+ ┌──────────────────────────────┐
649
+ │ │ 40mm
650
+ │ BRACKET │
651
+ │ BASE │
652
+ │ │
653
+ └──────────────────────────────┘
654
+ 80mm
655
+ </div>
656
+
657
+ <div class="tutorial-card">
658
+ <h4>Step 2: Add Bolt Hole Positions</h4>
659
+ <ol>
660
+ <li>Press <span class="highlight">S</span> to start a new sketch on the base</li>
661
+ <li>Use the <span class="highlight">Circle</span> tool (C key) to place 4 circles</li>
662
+ <li>Position circles at corners: 8mm diameter each
663
+ <ul>
664
+ <li>Top-left: 10mm from edges</li>
665
+ <li>Top-right: 10mm from edges</li>
666
+ <li>Bottom-left: 10mm from edges</li>
667
+ <li>Bottom-right: 10mm from edges</li>
668
+ </ul>
669
+ </li>
670
+ <li>Press <span class="highlight">Enter</span> when done</li>
671
+ </ol>
672
+ </div>
673
+
674
+ <div class="diagram">
675
+ •═══════════════════════════════•
676
+ ║ ⊙ ⊙ ║
677
+ ║ ║ 40mm
678
+ ║ ║
679
+ ║ ⊙ ⊙ ║
680
+ •═══════════════════════════════•
681
+ 80mm
682
+
683
+ ⊙ = 8mm bolt holes (4 total)
684
+ • = Corner reference
685
+ </div>
686
+
687
+ <div class="tutorial-card">
688
+ <h4>Step 3: Extrude to 3D</h4>
689
+ <ol>
690
+ <li>Click the base rectangle (now your 2D sketch)</li>
691
+ <li>Press <span class="highlight">E</span> to extrude</li>
692
+ <li>Enter height: <strong>5mm</strong></li>
693
+ <li>The bracket is now 3D with bolt holes cut through</li>
694
+ </ol>
695
+ </div>
696
+
697
+ <div class="tutorial-card">
698
+ <h4>Step 4: Finishing Touches (Optional)</h4>
699
+ <ol>
700
+ <li>Select all edges (Ctrl+A)</li>
701
+ <li>Add a <span class="highlight">Chamfer</span> (0.5mm on edges) for a polished look</li>
702
+ <li>Press <span class="highlight">M</span> to switch to move/rotate mode</li>
703
+ <li>Rotate the part to inspect it from all angles</li>
704
+ </ol>
705
+ </div>
706
+
707
+ <div class="callout tip">
708
+ <div class="callout-title">🔧 Parametric Magic</div>
709
+ <p>Click any dimension in the Properties panel on the right (width, height, hole diameter, etc.) to edit it. Change the hole diameter to 6mm? The entire part updates instantly. This is parametric design—perfect for iterating designs quickly.</p>
710
+ </div>
711
+ </section>
712
+
713
+ <!-- Section 4: AI-Generated Part -->
714
+ <section id="tutorial-ai">
715
+ <h2><span class="section-number">4</span> Tutorial: AI-Generated Part</h2>
716
+ <p>Let AI do the heavy lifting. Describe a part in plain English, and cycleCAD generates it in seconds.</p>
717
+
718
+ <div class="tutorial-card">
719
+ <h4>Step 1: Open AI Chat</h4>
720
+ <ol>
721
+ <li>Click the <span class="highlight">AI Chat</span> button in the right panel (or press <span class="highlight">?</span>)</li>
722
+ <li>A chat window opens on the right side of the screen</li>
723
+ </ol>
724
+ </div>
725
+
726
+ <div class="tutorial-card">
727
+ <h4>Step 2: Describe Your Part</h4>
728
+ <p>Type a natural language description in the chat box:</p>
729
+ <div class="code-block">
730
+ Create a flanged bearing housing:
731
+ - 80mm outer diameter
732
+ - 50mm bore (center hole)
733
+ - 4 bolt holes at 60mm bolt circle diameter
734
+ - Material: Aluminum
735
+ - Flange thickness: 8mm
736
+ </div>
737
+ </div>
738
+
739
+ <div class="tutorial-card">
740
+ <h4>Step 3: AI Generates Instantly</h4>
741
+ <ol>
742
+ <li>Press Enter or click Send</li>
743
+ <li>The AI analyzes your description in real-time</li>
744
+ <li>Within 2-3 seconds, a 3D model appears in the viewport</li>
745
+ <li>The part is fully parametric—dimensions appear in the Properties panel</li>
746
+ </ol>
747
+ </div>
748
+
749
+ <div class="tutorial-card">
750
+ <h4>Step 4: Customize the Generated Part</h4>
751
+ <ol>
752
+ <li>Look at the Properties panel on the right</li>
753
+ <li>Click any parameter (outer diameter, bore, bolt hole count, etc.)</li>
754
+ <li>Edit the value and press Enter—the 3D model updates instantly</li>
755
+ <li>Example: Change bore from 50mm to 55mm. Watch the model update in real-time.</li>
756
+ </ol>
757
+ </div>
758
+
759
+ <div class="callout tip">
760
+ <div class="callout-title">🤖 Be Specific, Be Clear</div>
761
+ <p>The more details you provide, the better the AI understands your intent. Include dimensions, materials, hole patterns, and any special features. Vague descriptions like "make a cool housing" may not generate what you expect. Specific descriptions like "cylindrical housing, 50mm OD, 25mm ID, 30mm height, 4 evenly-spaced M3 bolt holes" work best.</p>
762
+ </div>
763
+
764
+ <h3>Example Prompts That Work Well</h3>
765
+ <ul>
766
+ <li>"50mm cube made of steel"</li>
767
+ <li>"Cylinder: 30mm radius, 60mm height, hole 8mm down the center"</li>
768
+ <li>"Plate 100×60×10mm with 4 corner holes 8mm diameter"</li>
769
+ <li>"M8 washer (standard metric)"</li>
770
+ <li>"Gear: 40mm diameter, 20 teeth, 5mm bore"</li>
771
+ <li>"L-bracket: 50mm legs, 10mm thick, 4 corner holes"</li>
772
+ </ul>
773
+ </section>
774
+
775
+ <!-- Section 5: Complex Part -->
776
+ <section id="tutorial-spacer">
777
+ <h2><span class="section-number">5</span> Tutorial: Complex Part (Spacer with Features)</h2>
778
+ <p>Create a more advanced part: a cylindrical spacer with a center bore and chamfered edges.</p>
779
+
780
+ <div class="tutorial-card">
781
+ <h4>Step 1: Create the Cylinder Base</h4>
782
+ <ol>
783
+ <li>Press <span class="highlight">Ctrl+N</span> for a new sketch</li>
784
+ <li>Select <span class="highlight">Circle</span> tool (C key)</li>
785
+ <li>Draw a circle: <strong>30mm diameter</strong> (15mm radius from center)</li>
786
+ <li>Press <span class="highlight">Enter</span> to finish the sketch</li>
787
+ </ol>
788
+ </div>
789
+
790
+ <div class="tutorial-card">
791
+ <h4>Step 2: Extrude to Create Cylinder</h4>
792
+ <ol>
793
+ <li>Press <span class="highlight">E</span> to extrude</li>
794
+ <li>Enter height: <strong>15mm</strong></li>
795
+ <li>You now have a solid cylinder: 30mm diameter × 15mm tall</li>
796
+ </ol>
797
+ </div>
798
+
799
+ <div class="tutorial-card">
800
+ <h4>Step 3: Add Center Bore</h4>
801
+ <ol>
802
+ <li>Click the top face of the cylinder (or press <span class="highlight">F</span> for face select)</li>
803
+ <li>Press <span class="highlight">S</span> to create a new sketch on the top face</li>
804
+ <li>Draw a circle: <strong>10mm diameter</strong></li>
805
+ <li>Press <span class="highlight">Enter</span> to finish</li>
806
+ <li>Press <span class="highlight">P</span> for Pocket (subtractive extrude)</li>
807
+ <li>Enter depth: <strong>15mm</strong> (through the entire part)</li>
808
+ </ol>
809
+ </div>
810
+
811
+ <div class="diagram">
812
+ Side View: Top View (after bore):
813
+ ┌──────────────┐
814
+ │ │ ┌────────────────┐
815
+ │ SPACER │ │ ○ │
816
+ │ │ │ 30mm OD │
817
+ │ │ │ 10mm ID │
818
+ └──────────────┘ └────────────────┘
819
+ 15mm tall
820
+ </div>
821
+
822
+ <div class="tutorial-card">
823
+ <h4>Step 4: Add Chamfer to Top Edge</h4>
824
+ <ol>
825
+ <li>Select the top circular edge (top rim of the bore)</li>
826
+ <li>Press <span class="highlight">Shift+C</span> for Chamfer</li>
827
+ <li>Enter chamfer distance: <strong>1mm</strong></li>
828
+ <li>The sharp edge is now beveled</li>
829
+ </ol>
830
+ </div>
831
+
832
+ <div class="tutorial-card">
833
+ <h4>Step 5: Export as STEP</h4>
834
+ <ol>
835
+ <li>Click the <span class="highlight">Export</span> button in the top toolbar</li>
836
+ <li>Select <span class="highlight">STEP (.step)</span> format</li>
837
+ <li>Name your part: <code>spacer_v1.step</code></li>
838
+ <li>Click <span class="highlight">Download</span></li>
839
+ <li>The file is saved to your computer and can be opened in any CAD software</li>
840
+ </ol>
841
+ </div>
842
+
843
+ <div class="callout tip">
844
+ <div class="callout-title">🎯 Features vs. Sketches</div>
845
+ <p>In cycleCAD, <strong>Features</strong> are the operations you apply (Extrude, Pocket, Chamfer, Fillet, etc.). Each feature modifies the geometry step-by-step. The <strong>Feature Tree</strong> on the left shows every operation—click any feature to edit it or use it as a reference.</p>
846
+ </div>
847
+ </section>
848
+
849
+ <!-- Section 6: Interface Guide -->
850
+ <section id="interface">
851
+ <h2><span class="section-number">6</span> Interface Guide</h2>
852
+ <p>Understand the cycleCAD workspace. Every panel has a purpose.</p>
853
+
854
+ <h3>Left Panel: Feature Tree</h3>
855
+ <p>Shows the <strong>history of all operations</strong> you've performed on your model (also called the "Feature Tree" or "Model Tree").</p>
856
+ <ul>
857
+ <li><strong>Sketch1, Sketch2, …:</strong> 2D sketches you've created</li>
858
+ <li><strong>Extrude1, Pocket1, …:</strong> 3D features applied to sketches</li>
859
+ <li><strong>Chamfer1, Fillet1, …:</strong> Finishing operations (edge treatments)</li>
860
+ <li><strong>Expand/collapse:</strong> Click arrows (▶ ▼) to show/hide sketch details</li>
861
+ <li><strong>Edit:</strong> Double-click any feature to edit it</li>
862
+ <li><strong>Delete:</strong> Right-click a feature and select Delete to remove it and all dependent features</li>
863
+ <li><strong>Visibility:</strong> Click the eye icon next to a feature to hide/show it</li>
864
+ </ul>
865
+
866
+ <h3>Center: 3D Viewport</h3>
867
+ <p>Your main canvas. This is where you see and manipulate your 3D model in real-time.</p>
868
+ <ul>
869
+ <li><strong>Left-click + drag:</strong> Rotate the model (arcball rotation)</li>
870
+ <li><strong>Right-click + drag:</strong> Pan (move the model side-to-side)</li>
871
+ <li><strong>Scroll wheel:</strong> Zoom in and out</li>
872
+ <li><strong>Middle-click:</strong> Reset the view to default (fit all)</li>
873
+ <li><strong>Press . (period):</strong> Fit selected part in view</li>
874
+ <li><strong>Click a face/edge/vertex:</strong> Select it (highlighted in blue/orange)</li>
875
+ </ul>
876
+
877
+ <h3>Right Panel: Properties & AI Chat</h3>
878
+ <p>Two tabs: <span class="highlight">Properties</span> and <span class="highlight">AI Chat</span>.</p>
879
+ <p><strong>Properties Tab:</strong></p>
880
+ <ul>
881
+ <li>Shows all <strong>editable dimensions</strong> of the selected feature</li>
882
+ <li>Examples: width, height, depth, radius, hole diameter, chamfer distance</li>
883
+ <li>Click any value to edit it. Press Enter to apply changes.</li>
884
+ <li><strong>Material selector:</strong> Choose material (Steel, Aluminum, Plastic, etc.) at the bottom</li>
885
+ <li><strong>Mass estimation:</strong> Calculated based on material density and bounding volume</li>
886
+ </ul>
887
+ <p><strong>AI Chat Tab:</strong></p>
888
+ <ul>
889
+ <li>Describe parts in plain English</li>
890
+ <li>Ask questions about your model ("How much does this weigh?", "Can I 3D print this?")</li>
891
+ <li>Chat history is saved for each project</li>
892
+ </ul>
893
+
894
+ <h3>Top Toolbar: Tools Organized by Category</h3>
895
+ <table>
896
+ <thead>
897
+ <tr>
898
+ <th>Category</th>
899
+ <th>Tools Included</th>
900
+ <th>Keyboard Access</th>
901
+ </tr>
902
+ </thead>
903
+ <tbody>
904
+ <tr>
905
+ <td><strong>Sketch</strong></td>
906
+ <td>Rectangle, Circle, Line, Polygon, Point, Dimension, Constraint</td>
907
+ <td>R, C, L, P (in sketch mode)</td>
908
+ </tr>
909
+ <tr>
910
+ <td><strong>Features</strong></td>
911
+ <td>Extrude, Pocket, Pad, Hole, Chamfer, Fillet</td>
912
+ <td>E, K, H, Shift+C, Shift+F</td>
913
+ </tr>
914
+ <tr>
915
+ <td><strong>Boolean</strong></td>
916
+ <td>Union, Subtract, Intersect</td>
917
+ <td>U, minus, & (on selected bodies)</td>
918
+ </tr>
919
+ <tr>
920
+ <td><strong>Transform</strong></td>
921
+ <td>Mirror, Pattern, Move, Rotate, Scale</td>
922
+ <td>Shift+M, Shift+P, M, Shift+R, Shift+S</td>
923
+ </tr>
924
+ <tr>
925
+ <td><strong>Analyze</strong></td>
926
+ <td>Measure, Weight Calc, Stress Preview, BOM</td>
927
+ <td>Ctrl+M, W, ?, B</td>
928
+ </tr>
929
+ <tr>
930
+ <td><strong>View</strong></td>
931
+ <td>Fit All, Zoom, Pan, Rotate, Wireframe, Shading</td>
932
+ <td>V, ., Middle-click, 1-6 (view presets)</td>
933
+ </tr>
934
+ </tbody>
935
+ </table>
936
+
937
+ <h3>Bottom Status Bar</h3>
938
+ <ul>
939
+ <li><strong>Current mode:</strong> "Sketch Mode", "Feature Mode", "View Mode", etc.</li>
940
+ <li><strong>Units:</strong> Millimeters (mm) by default. Change in Preferences (Ctrl+,)</li>
941
+ <li><strong>Grid:</strong> Grid spacing and snap settings</li>
942
+ <li><strong>Selected element count:</strong> "1 face selected", "3 edges selected", etc.</li>
943
+ <li><strong>Coordinate display:</strong> Mouse pointer position in model space</li>
944
+ </ul>
945
+
946
+ <div class="callout info">
947
+ <div class="callout-title">📐 Coordinate System</div>
948
+ <p>cycleCAD uses a standard right-handed 3D coordinate system. The red axis is X (left-right), green is Y (forward-back), and blue is Z (up-down). You can toggle the axes display with <span class="highlight">Ctrl+Shift+A</span>.</p>
949
+ </div>
950
+ </section>
951
+
952
+ <!-- Section 7: Keyboard Shortcuts -->
953
+ <section id="shortcuts">
954
+ <h2><span class="section-number">7</span> Keyboard Shortcuts Reference</h2>
955
+ <p>Master these shortcuts to work faster. Press <span class="highlight">?</span> anytime to see this cheat sheet in the app.</p>
956
+
957
+ <h3>General Navigation</h3>
958
+ <div class="shortcut-grid">
959
+ <div class="shortcut-item">
960
+ <span class="shortcut-key">Ctrl+N</span>
961
+ <span class="shortcut-action">New sketch</span>
962
+ </div>
963
+ <div class="shortcut-item">
964
+ <span class="shortcut-key">Ctrl+S</span>
965
+ <span class="shortcut-action">Save project</span>
966
+ </div>
967
+ <div class="shortcut-item">
968
+ <span class="shortcut-key">Ctrl+O</span>
969
+ <span class="shortcut-action">Open project</span>
970
+ </div>
971
+ <div class="shortcut-item">
972
+ <span class="shortcut-key">Ctrl+Z</span>
973
+ <span class="shortcut-action">Undo</span>
974
+ </div>
975
+ <div class="shortcut-item">
976
+ <span class="shortcut-key">Ctrl+Shift+Z</span>
977
+ <span class="shortcut-action">Redo</span>
978
+ </div>
979
+ <div class="shortcut-item">
980
+ <span class="shortcut-key">?</span>
981
+ <span class="shortcut-action">Show shortcuts panel</span>
982
+ </div>
983
+ </div>
984
+
985
+ <h3>Sketch Tools (Sketch Mode Only)</h3>
986
+ <div class="shortcut-grid">
987
+ <div class="shortcut-item">
988
+ <span class="shortcut-key">R</span>
989
+ <span class="shortcut-action">Rectangle tool</span>
990
+ </div>
991
+ <div class="shortcut-item">
992
+ <span class="shortcut-key">C</span>
993
+ <span class="shortcut-action">Circle tool</span>
994
+ </div>
995
+ <div class="shortcut-item">
996
+ <span class="shortcut-key">L</span>
997
+ <span class="shortcut-action">Line tool</span>
998
+ </div>
999
+ <div class="shortcut-item">
1000
+ <span class="shortcut-key">P</span>
1001
+ <span class="shortcut-action">Polygon tool</span>
1002
+ </div>
1003
+ <div class="shortcut-item">
1004
+ <span class="shortcut-key">D</span>
1005
+ <span class="shortcut-action">Add dimension</span>
1006
+ </div>
1007
+ <div class="shortcut-item">
1008
+ <span class="shortcut-key">Enter</span>
1009
+ <span class="shortcut-action">Finish sketch</span>
1010
+ </div>
1011
+ </div>
1012
+
1013
+ <h3>Feature Tools</h3>
1014
+ <div class="shortcut-grid">
1015
+ <div class="shortcut-item">
1016
+ <span class="shortcut-key">E</span>
1017
+ <span class="shortcut-action">Extrude</span>
1018
+ </div>
1019
+ <div class="shortcut-item">
1020
+ <span class="shortcut-key">K</span>
1021
+ <span class="shortcut-action">Pocket (subtractive)</span>
1022
+ </div>
1023
+ <div class="shortcut-item">
1024
+ <span class="shortcut-key">H</span>
1025
+ <span class="shortcut-action">Hole wizard</span>
1026
+ </div>
1027
+ <div class="shortcut-item">
1028
+ <span class="shortcut-key">Shift+C</span>
1029
+ <span class="shortcut-action">Chamfer edge</span>
1030
+ </div>
1031
+ <div class="shortcut-item">
1032
+ <span class="shortcut-key">Shift+F</span>
1033
+ <span class="shortcut-action">Fillet edge</span>
1034
+ </div>
1035
+ <div class="shortcut-item">
1036
+ <span class="shortcut-key">U</span>
1037
+ <span class="shortcut-action">Boolean union</span>
1038
+ </div>
1039
+ </div>
1040
+
1041
+ <h3>View Controls</h3>
1042
+ <div class="shortcut-grid">
1043
+ <div class="shortcut-item">
1044
+ <span class="shortcut-key">.</span>
1045
+ <span class="shortcut-action">Fit selected in view</span>
1046
+ </div>
1047
+ <div class="shortcut-item">
1048
+ <span class="shortcut-key">V</span>
1049
+ <span class="shortcut-action">Fit all in view</span>
1050
+ </div>
1051
+ <div class="shortcut-item">
1052
+ <span class="shortcut-key">1</span>
1053
+ <span class="shortcut-action">Front view</span>
1054
+ </div>
1055
+ <div class="shortcut-item">
1056
+ <span class="shortcut-key">2</span>
1057
+ <span class="shortcut-action">Top view</span>
1058
+ </div>
1059
+ <div class="shortcut-item">
1060
+ <span class="shortcut-key">3</span>
1061
+ <span class="shortcut-action">Side view</span>
1062
+ </div>
1063
+ <div class="shortcut-item">
1064
+ <span class="shortcut-key">4</span>
1065
+ <span class="shortcut-action">Isometric view</span>
1066
+ </div>
1067
+ <div class="shortcut-item">
1068
+ <span class="shortcut-key">5</span>
1069
+ <span class="shortcut-action">Bottom view</span>
1070
+ </div>
1071
+ <div class="shortcut-item">
1072
+ <span class="shortcut-key">6</span>
1073
+ <span class="shortcut-action">Back view</span>
1074
+ </div>
1075
+ <div class="shortcut-item">
1076
+ <span class="shortcut-key">W</span>
1077
+ <span class="shortcut-action">Wireframe toggle</span>
1078
+ </div>
1079
+ </div>
1080
+
1081
+ <h3>Transform Tools</h3>
1082
+ <div class="shortcut-grid">
1083
+ <div class="shortcut-item">
1084
+ <span class="shortcut-key">M</span>
1085
+ <span class="shortcut-action">Move/drag selected</span>
1086
+ </div>
1087
+ <div class="shortcut-item">
1088
+ <span class="shortcut-key">Shift+R</span>
1089
+ <span class="shortcut-action">Rotate selected</span>
1090
+ </div>
1091
+ <div class="shortcut-item">
1092
+ <span class="shortcut-key">Shift+M</span>
1093
+ <span class="shortcut-action">Mirror</span>
1094
+ </div>
1095
+ <div class="shortcut-item">
1096
+ <span class="shortcut-key">Shift+P</span>
1097
+ <span class="shortcut-action">Pattern (array)</span>
1098
+ </div>
1099
+ <div class="shortcut-item">
1100
+ <span class="shortcut-key">Shift+S</span>
1101
+ <span class="shortcut-action">Scale</span>
1102
+ </div>
1103
+ </div>
1104
+
1105
+ <h3>Analysis & Export</h3>
1106
+ <div class="shortcut-grid">
1107
+ <div class="shortcut-item">
1108
+ <span class="shortcut-key">Ctrl+M</span>
1109
+ <span class="shortcut-action">Measure distance</span>
1110
+ </div>
1111
+ <div class="shortcut-item">
1112
+ <span class="shortcut-key">G</span>
1113
+ <span class="shortcut-action">Calculate weight</span>
1114
+ </div>
1115
+ <div class="shortcut-item">
1116
+ <span class="shortcut-key">B</span>
1117
+ <span class="shortcut-action">Generate BOM</span>
1118
+ </div>
1119
+ <div class="shortcut-item">
1120
+ <span class="shortcut-key">Ctrl+E</span>
1121
+ <span class="shortcut-action">Export model</span>
1122
+ </div>
1123
+ </div>
1124
+
1125
+ <h3>Selection & Editing</h3>
1126
+ <div class="shortcut-grid">
1127
+ <div class="shortcut-item">
1128
+ <span class="shortcut-key">Ctrl+A</span>
1129
+ <span class="shortcut-action">Select all</span>
1130
+ </div>
1131
+ <div class="shortcut-item">
1132
+ <span class="shortcut-key">Escape</span>
1133
+ <span class="shortcut-action">Deselect all</span>
1134
+ </div>
1135
+ <div class="shortcut-item">
1136
+ <span class="shortcut-key">Delete</span>
1137
+ <span class="shortcut-action">Delete selected</span>
1138
+ </div>
1139
+ <div class="shortcut-item">
1140
+ <span class="shortcut-key">Ctrl+D</span>
1141
+ <span class="shortcut-action">Duplicate selected</span>
1142
+ </div>
1143
+ </div>
1144
+
1145
+ <div class="callout tip">
1146
+ <div class="callout-title">⚡ Speed Tip: Master E, C, R, P, K</div>
1147
+ <p>The five most-used shortcuts are <span class="highlight">E</span> (Extrude), <span class="highlight">C</span> (Circle), <span class="highlight">R</span> (Rectangle), <span class="highlight">P</span> (Polygon), and <span class="highlight">K</span> (Pocket). Practice these five, and you'll be 10x faster. Everything else is bonus.</p>
1148
+ </div>
1149
+ </section>
1150
+
1151
+ <!-- Section 8: AI Prompt Examples -->
1152
+ <section id="ai-prompts">
1153
+ <h2><span class="section-number">8</span> AI Prompt Examples</h2>
1154
+ <p>The AI-to-3D feature works best with specific, detailed prompts. Below are 20+ proven examples that generate reliable results.</p>
1155
+
1156
+ <h3>Simple Geometric Shapes</h3>
1157
+ <table>
1158
+ <thead>
1159
+ <tr>
1160
+ <th>Prompt</th>
1161
+ <th>Result</th>
1162
+ <th>Time to Generate</th>
1163
+ </tr>
1164
+ </thead>
1165
+ <tbody>
1166
+ <tr>
1167
+ <td>"50mm cube"</td>
1168
+ <td>Box 50×50×50mm, steel</td>
1169
+ <td>2-3s</td>
1170
+ </tr>
1171
+ <tr>
1172
+ <td>"Cylinder 30mm radius, 60mm height"</td>
1173
+ <td>Cylinder Ø30 × 60mm</td>
1174
+ <td>2-3s</td>
1175
+ </tr>
1176
+ <tr>
1177
+ <td>"Sphere 25mm diameter"</td>
1178
+ <td>Sphere Ø25mm</td>
1179
+ <td>2s</td>
1180
+ </tr>
1181
+ <tr>
1182
+ <td>"Rectangular prism: 100mm long, 50mm wide, 25mm tall"</td>
1183
+ <td>Box 100×50×25mm</td>
1184
+ <td>2s</td>
1185
+ </tr>
1186
+ <tr>
1187
+ <td>"Torus: 40mm major radius, 10mm minor radius"</td>
1188
+ <td>Donut torus shape</td>
1189
+ <td>3s</td>
1190
+ </tr>
1191
+ </tbody>
1192
+ </table>
1193
+
1194
+ <h3>Plates with Features</h3>
1195
+ <table>
1196
+ <thead>
1197
+ <tr>
1198
+ <th>Prompt</th>
1199
+ <th>Result</th>
1200
+ <th>Time to Generate</th>
1201
+ </tr>
1202
+ </thead>
1203
+ <tbody>
1204
+ <tr>
1205
+ <td>"Plate 100×60×10mm with 4 corner holes 8mm diameter"</td>
1206
+ <td>Rectangular plate with 4 holes</td>
1207
+ <td>3-4s</td>
1208
+ </tr>
1209
+ <tr>
1210
+ <td>"Circular mounting plate 80mm diameter, 5mm thick, 6 bolt holes evenly spaced on 60mm circle"</td>
1211
+ <td>Circular plate with pattern</td>
1212
+ <td>4-5s</td>
1213
+ </tr>
1214
+ <tr>
1215
+ <td>"L-bracket: 50mm legs, 10mm thick, with 4 corner mounting holes M4"</td>
1216
+ <td>L-shaped bracket</td>
1217
+ <td>4-5s</td>
1218
+ </tr>
1219
+ </tbody>
1220
+ </table>
1221
+
1222
+ <h3>Standard Parts & Fasteners</h3>
1223
+ <table>
1224
+ <thead>
1225
+ <tr>
1226
+ <th>Prompt</th>
1227
+ <th>Result</th>
1228
+ <th>Time to Generate</th>
1229
+ </tr>
1230
+ </thead>
1231
+ <tbody>
1232
+ <tr>
1233
+ <td>"M8 washer (DIN 125 standard)"</td>
1234
+ <td>Standard metric washer</td>
1235
+ <td>2s</td>
1236
+ </tr>
1237
+ <tr>
1238
+ <td>"M6 socket head cap screw, 25mm length"</td>
1239
+ <td>SHCS fastener</td>
1240
+ <td>2-3s</td>
1241
+ </tr>
1242
+ <tr>
1243
+ <td>"Spring washer M8"</td>
1244
+ <td>Lock washer</td>
1245
+ <td>2s</td>
1246
+ </tr>
1247
+ </tbody>
1248
+ </table>
1249
+
1250
+ <h3>Bearings & Housings</h3>
1251
+ <table>
1252
+ <thead>
1253
+ <tr>
1254
+ <th>Prompt</th>
1255
+ <th>Result</th>
1256
+ <th>Time to Generate</th>
1257
+ </tr>
1258
+ </thead>
1259
+ <tbody>
1260
+ <tr>
1261
+ <td>"Flanged bearing housing: 80mm OD, 50mm bore, 4 bolt holes M6, flange 8mm thick"</td>
1262
+ <td>Complex housing</td>
1263
+ <td>5-6s</td>
1264
+ </tr>
1265
+ <tr>
1266
+ <td>"Pillow block bearing housing, aluminum, 40mm bore, base mounting"</td>
1267
+ <td>Standard bearing mount</td>
1268
+ <td>4-5s</td>
1269
+ </tr>
1270
+ </tbody>
1271
+ </table>
1272
+
1273
+ <h3>Gears & Mechanical Parts</h3>
1274
+ <table>
1275
+ <thead>
1276
+ <tr>
1277
+ <th>Prompt</th>
1278
+ <th>Result</th>
1279
+ <th>Time to Generate</th>
1280
+ </tr>
1281
+ </thead>
1282
+ <tbody>
1283
+ <tr>
1284
+ <td>"Gear: 40mm pitch diameter, 20 teeth, module 2, 8mm bore"</td>
1285
+ <td>Simplified spur gear</td>
1286
+ <td>4-5s</td>
1287
+ </tr>
1288
+ <tr>
1289
+ <td>"Pulley 50mm diameter, 15mm wide, 8mm bore, 3 spokes"</td>
1290
+ <td>Belt pulley</td>
1291
+ <td>4-5s</td>
1292
+ </tr>
1293
+ </tbody>
1294
+ </table>
1295
+
1296
+ <h3>Spacers & Bushings</h3>
1297
+ <table>
1298
+ <thead>
1299
+ <tr>
1300
+ <th>Prompt</th>
1301
+ <th>Result</th>
1302
+ <th>Time to Generate</th>
1303
+ </tr>
1304
+ </thead>
1305
+ <tbody>
1306
+ <tr>
1307
+ <td>"Spacer: 30mm OD, 10mm ID, 15mm tall, aluminum"</td>
1308
+ <td>Hollow cylinder</td>
1309
+ <td>3-4s</td>
1310
+ </tr>
1311
+ <tr>
1312
+ <td>"Rubber bushing 25mm OD, 12mm ID, 20mm long"</td>
1313
+ <td>Polymer bushing</td>
1314
+ <td>3-4s</td>
1315
+ </tr>
1316
+ </tbody>
1317
+ </table>
1318
+
1319
+ <h3>Flanges & Adapters</h3>
1320
+ <table>
1321
+ <thead>
1322
+ <tr>
1323
+ <th>Prompt</th>
1324
+ <th>Result</th>
1325
+ <th>Time to Generate</th>
1326
+ </tr>
1327
+ </thead>
1328
+ <tbody>
1329
+ <tr>
1330
+ <td>"Pipe flange: 100mm OD, 50mm bore, 8 bolt holes M8, 10mm thick"</td>
1331
+ <td>ANSI flange</td>
1332
+ <td>5-6s</td>
1333
+ </tr>
1334
+ <tr>
1335
+ <td>"Hose adapter 25mm to 20mm with 90-degree elbow bend"</td>
1336
+ <td>Elbow connector</td>
1337
+ <td>4-5s</td>
1338
+ </tr>
1339
+ </tbody>
1340
+ </table>
1341
+
1342
+ <div class="callout warning">
1343
+ <div class="callout-title">⚠️ AI Limitations</div>
1344
+ <p>The AI is good at standard, geometric parts but may struggle with complex organic shapes, highly intricate details, or custom non-standard geometries. For those cases, use the sketch → extrude workflow manually. Also, the AI generates "good enough" geometry—tolerances and thread details are simplified for speed.</p>
1345
+ </div>
1346
+
1347
+ <h3>Pro Tips for AI Prompts</h3>
1348
+ <ul>
1349
+ <li><strong>Be specific with dimensions:</strong> "50mm cube" works better than "a small cube"</li>
1350
+ <li><strong>Specify material if it matters:</strong> "Aluminum flange" vs. "Steel flange" (affects density/weight)</li>
1351
+ <li><strong>Use metric units:</strong> Millimeters (mm), Meters (m). Avoid inches.</li>
1352
+ <li><strong>Describe standard parts by their name:</strong> "M8 bolt", "DIN 125 washer", "ANSI flange" → AI recognizes these</li>
1353
+ <li><strong>Avoid ambiguous descriptions:</strong> "Make a cool housing" might not give you what you expect. Say "Cylindrical housing, 60mm OD, 40mm ID, 80mm tall, 4 mounting holes"</li>
1354
+ <li><strong>Iterate if needed:</strong> If the first result isn't perfect, ask the AI to modify: "Add a chamfer to all edges", "Make the bore 2mm larger", "Change material to aluminum"</li>
1355
+ </ul>
1356
+ </section>
1357
+
1358
+ <!-- Section 9: Export Options -->
1359
+ <section id="export">
1360
+ <h2><span class="section-number">9</span> Export Options</h2>
1361
+ <p>cycleCAD supports multiple export formats for different workflows. Export your design for 3D printing, CAD software, manufacturing, or sharing.</p>
1362
+
1363
+ <h3>STL (Stereolithography)</h3>
1364
+ <table>
1365
+ <thead>
1366
+ <tr>
1367
+ <th>Format</th>
1368
+ <th>Best For</th>
1369
+ <th>Details</th>
1370
+ </tr>
1371
+ </thead>
1372
+ <tbody>
1373
+ <tr>
1374
+ <td><strong>.stl</strong> (Binary or ASCII)</td>
1375
+ <td>3D printing, slicing software</td>
1376
+ <td>Triangulated mesh. 0.1mm resolution. Supported by Cura, PrusaSlicer, Ultimaker, Formlabs, etc. Binary is smaller; ASCII is human-readable.</td>
1377
+ </tr>
1378
+ </tbody>
1379
+ </table>
1380
+ <p><strong>How to export STL:</strong></p>
1381
+ <ol>
1382
+ <li>Click <span class="highlight">Export</span> in the top toolbar</li>
1383
+ <li>Select <span class="highlight">STL (.stl)</span></li>
1384
+ <li>Choose Binary or ASCII (Binary is recommended—smaller file size)</li>
1385
+ <li>Enter filename (e.g., <code>bracket_v1.stl</code>)</li>
1386
+ <li>Click <span class="highlight">Download</span></li>
1387
+ <li>Import into your slicer software for 3D printing</li>
1388
+ </ol>
1389
+
1390
+ <h3>OBJ (Wavefront)</h3>
1391
+ <table>
1392
+ <thead>
1393
+ <tr>
1394
+ <th>Format</th>
1395
+ <th>Best For</th>
1396
+ <th>Details</th>
1397
+ </tr>
1398
+ </thead>
1399
+ <tbody>
1400
+ <tr>
1401
+ <td><strong>.obj</strong></td>
1402
+ <td>3D software (Blender, Maya, Cinema 4D), game engines</td>
1403
+ <td>Polygon mesh format. Includes vertex normals for smooth shading. Supported by most 3D software. Files are larger than STL.</td>
1404
+ </tr>
1405
+ </tbody>
1406
+ </table>
1407
+ <p><strong>How to export OBJ:</strong></p>
1408
+ <ol>
1409
+ <li>Click <span class="highlight">Export</span> in the top toolbar</li>
1410
+ <li>Select <span class="highlight">OBJ (.obj)</span></li>
1411
+ <li>Enter filename</li>
1412
+ <li>Click <span class="highlight">Download</span></li>
1413
+ <li>Imports into Blender, Maya, etc. for texturing, rendering, or further editing</li>
1414
+ </ol>
1415
+
1416
+ <h3>STEP (ISO 10303-21)</h3>
1417
+ <table>
1418
+ <thead>
1419
+ <tr>
1420
+ <th>Format</th>
1421
+ <th>Best For</th>
1422
+ <th>Details</th>
1423
+ </tr>
1424
+ </thead>
1425
+ <tbody>
1426
+ <tr>
1427
+ <td><strong>.step</strong> (also .stp)</td>
1428
+ <td>CAD software (Fusion 360, SolidWorks, FreeCAD), manufacturing</td>
1429
+ <td>Parametric geometry interchange. Preserves features and constraints. Best for re-opening and editing in other CAD programs. Requires OpenCascade kernel.</td>
1430
+ </tr>
1431
+ </tbody>
1432
+ </table>
1433
+ <p><strong>How to export STEP:</strong></p>
1434
+ <ol>
1435
+ <li>Click <span class="highlight">Export</span> in the top toolbar</li>
1436
+ <li>Select <span class="highlight">STEP (.step)</span></li>
1437
+ <li>Enter filename (e.g., <code>bracket_v1.step</code>)</li>
1438
+ <li>Click <span class="highlight">Download</span></li>
1439
+ <li>Open in any STEP-compatible CAD software for further modification</li>
1440
+ </ol>
1441
+
1442
+ <h3>cycleCAD JSON (Project Archive)</h3>
1443
+ <table>
1444
+ <thead>
1445
+ <tr>
1446
+ <th>Format</th>
1447
+ <th>Best For</th>
1448
+ <th>Details</th>
1449
+ </tr>
1450
+ </thead>
1451
+ <tbody>
1452
+ <tr>
1453
+ <td><strong>.cyclecad.json</strong></td>
1454
+ <td>Saving and reopening projects in cycleCAD</td>
1455
+ <td>Stores complete project data: sketches, features, parameters, materials, history. Re-open and edit parametrically. Only openable in cycleCAD.</td>
1456
+ </tr>
1457
+ </tbody>
1458
+ </table>
1459
+ <p><strong>How to export cycleCAD JSON:</strong></p>
1460
+ <ol>
1461
+ <li>Click <span class="highlight">Export</span> in the top toolbar</li>
1462
+ <li>Select <span class="highlight">cycleCAD Project (.cyclecad.json)</span></li>
1463
+ <li>Click <span class="highlight">Download</span></li>
1464
+ <li>To reopen: Click <span class="highlight">Open Project</span> and select the .cyclecad.json file</li>
1465
+ <li>All sketches, features, and parameters are restored—full editability</li>
1466
+ </ol>
1467
+
1468
+ <h3>PDF (Technical Drawing)</h3>
1469
+ <table>
1470
+ <thead>
1471
+ <tr>
1472
+ <th>Format</th>
1473
+ <th>Best For</th>
1474
+ <th>Details</th>
1475
+ </tr>
1476
+ </thead>
1477
+ <tbody>
1478
+ <tr>
1479
+ <td><strong>.pdf</strong></td>
1480
+ <td>Documentation, sharing blueprints, manufacturing specs</td>
1481
+ <td>2D orthographic projections (front, top, side views) with dimensions. Includes BOM (Bill of Materials).</td>
1482
+ </tr>
1483
+ </tbody>
1484
+ </table>
1485
+ <p><strong>How to export PDF:</strong></p>
1486
+ <ol>
1487
+ <li>Click <span class="highlight">Export</span> in the top toolbar</li>
1488
+ <li>Select <span class="highlight">Drawing (PDF)</span></li>
1489
+ <li>Choose views to include: Front, Top, Side, Isometric (check as needed)</li>
1490
+ <li>Include BOM? (optional)</li>
1491
+ <li>Click <span class="highlight">Generate PDF</span></li>
1492
+ <li>PDF opens in a new tab—save or print as needed</li>
1493
+ </ol>
1494
+
1495
+ <div class="callout tip">
1496
+ <div class="callout-title">📤 Export Best Practices</div>
1497
+ <ul style="margin-top: 12px; margin-bottom: 0;">
1498
+ <li><strong>3D Printing?</strong> Use STL. Binary STL is preferred (smaller files).</li>
1499
+ <li><strong>Sharing with collaborators in other CAD tools?</strong> Use STEP for full editability.</li>
1500
+ <li><strong>Sending to Blender/Maya for rendering?</strong> Use OBJ.</li>
1501
+ <li><strong>Want to keep working on this project later?</strong> Export as cycleCAD JSON (preserves parametric features).</li>
1502
+ <li><strong>Manufacturing or blueprint sharing?</strong> Export as PDF for 2D drawings + BOM.</li>
1503
+ </ul>
1504
+ </div>
1505
+
1506
+ <h3>Batch Export (Export Multiple Parts)</h3>
1507
+ <p>If your project has multiple bodies or assemblies:</p>
1508
+ <ol>
1509
+ <li>Click <span class="highlight">Export</span> in the top toolbar</li>
1510
+ <li>Select <span class="highlight">Batch Export All Parts</span></li>
1511
+ <li>Choose format(s): STL, OBJ, STEP, or a combination</li>
1512
+ <li>Click <span class="highlight">Download All</span></li>
1513
+ <li>A zip file is created with one file per part, properly named</li>
1514
+ </ol>
1515
+
1516
+ <h3>Comparison: Which Format Should I Use?</h3>
1517
+ <table>
1518
+ <thead>
1519
+ <tr>
1520
+ <th>Use Case</th>
1521
+ <th>Format</th>
1522
+ <th>Reason</th>
1523
+ </tr>
1524
+ </thead>
1525
+ <tbody>
1526
+ <tr>
1527
+ <td>3D Printing (Cura, PrusaSlicer)</td>
1528
+ <td>STL</td>
1529
+ <td>Industry standard, smallest files, all slicers support it</td>
1530
+ </tr>
1531
+ <tr>
1532
+ <td>Render in Blender/Maya</td>
1533
+ <td>OBJ or STEP</td>
1534
+ <td>OBJ for mesh editing, STEP for parametric re-import</td>
1535
+ </tr>
1536
+ <tr>
1537
+ <td>Edit in SolidWorks/Fusion 360</td>
1538
+ <td>STEP</td>
1539
+ <td>Preserves history and parameters</td>
1540
+ </tr>
1541
+ <tr>
1542
+ <td>Send to manufacturer (CNC/injection mold)</td>
1543
+ <td>STEP</td>
1544
+ <td>Full geometry, no approximations</td>
1545
+ </tr>
1546
+ <tr>
1547
+ <td>Continue editing in cycleCAD later</td>
1548
+ <td>cycleCAD JSON</td>
1549
+ <td>Preserves all sketches, features, full editability</td>
1550
+ </tr>
1551
+ <tr>
1552
+ <td>2D Blueprint + BOM for docs</td>
1553
+ <td>PDF</td>
1554
+ <td>Orthographic views, dimensions, parts list</td>
1555
+ </tr>
1556
+ </tbody>
1557
+ </table>
1558
+
1559
+ <div class="callout info">
1560
+ <div class="callout-title">💾 Pro Tip: Always Keep the cycleCAD JSON</div>
1561
+ <p>When you export a project, always also save a copy as cycleCAD JSON. This preserves all your parametric features, sketches, and history. If you ever need to make changes, you can reopen the JSON file in cycleCAD and edit parametrically—much faster than redrawing from an STL or STEP file.</p>
1562
+ </div>
1563
+ </section>
1564
+
1565
+ <!-- Footer -->
1566
+ <footer class="footer">
1567
+ <p>cycleCAD Documentation | Browser-Based Parametric 3D Modeling</p>
1568
+ <p style="margin-top: 12px; font-size: 12px;">
1569
+ <a href="#">Home</a> •
1570
+ <a href="#">API Docs</a> •
1571
+ <a href="#">Community</a> •
1572
+ <a href="#">Support</a> •
1573
+ <a href="#">GitHub</a>
1574
+ </p>
1575
+ </footer>
1576
+ </div>
1577
+ </main>
1578
+ </div>
1579
+
1580
+ <script>
1581
+ // Sidebar navigation sync
1582
+ const navLinks = document.querySelectorAll('.nav-link');
1583
+ const sections = document.querySelectorAll('section');
1584
+
1585
+ function updateActiveLink() {
1586
+ const scrollPosition = window.scrollY + 100;
1587
+
1588
+ sections.forEach(section => {
1589
+ const sectionTop = section.offsetTop;
1590
+ const sectionBottom = sectionTop + section.offsetHeight;
1591
+
1592
+ if (scrollPosition >= sectionTop && scrollPosition < sectionBottom) {
1593
+ navLinks.forEach(link => link.classList.remove('active'));
1594
+ const activeLink = document.querySelector(`a[href="#${section.id}"]`);
1595
+ if (activeLink) {
1596
+ activeLink.classList.add('active');
1597
+ }
1598
+ }
1599
+ });
1600
+ }
1601
+
1602
+ window.addEventListener('scroll', updateActiveLink);
1603
+
1604
+ // Smooth scroll on link click
1605
+ navLinks.forEach(link => {
1606
+ link.addEventListener('click', (e) => {
1607
+ e.preventDefault();
1608
+ const targetId = link.getAttribute('href');
1609
+ const targetSection = document.querySelector(targetId);
1610
+ if (targetSection) {
1611
+ targetSection.scrollIntoView({ behavior: 'smooth' });
1612
+ }
1613
+ });
1614
+ });
1615
+
1616
+ // Initialize
1617
+ updateActiveLink();
1618
+ </script>
1619
+ </body>
1620
+ </html>