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.
@@ -0,0 +1,803 @@
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>cycleCAD - Example Parts Gallery</title>
7
+ <style>
8
+ * {
9
+ margin: 0;
10
+ padding: 0;
11
+ box-sizing: border-box;
12
+ }
13
+
14
+ body {
15
+ background-color: #0d1117;
16
+ color: #c9d1d9;
17
+ font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
18
+ line-height: 1.6;
19
+ min-height: 100vh;
20
+ }
21
+
22
+ header {
23
+ background: linear-gradient(135deg, #1f6feb 0%, #388bfd 100%);
24
+ padding: 3rem 2rem;
25
+ text-align: center;
26
+ border-bottom: 1px solid #30363d;
27
+ }
28
+
29
+ header h1 {
30
+ font-size: 2.5rem;
31
+ margin-bottom: 0.5rem;
32
+ color: #ffffff;
33
+ }
34
+
35
+ header p {
36
+ font-size: 1.1rem;
37
+ color: rgba(255, 255, 255, 0.9);
38
+ }
39
+
40
+ .container {
41
+ max-width: 1400px;
42
+ margin: 0 auto;
43
+ padding: 3rem 2rem;
44
+ }
45
+
46
+ .category {
47
+ margin-bottom: 4rem;
48
+ }
49
+
50
+ .category-title {
51
+ font-size: 1.8rem;
52
+ color: #58a6ff;
53
+ margin-bottom: 2rem;
54
+ padding-bottom: 1rem;
55
+ border-bottom: 2px solid #30363d;
56
+ }
57
+
58
+ .gallery-grid {
59
+ display: grid;
60
+ grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
61
+ gap: 2rem;
62
+ margin-bottom: 3rem;
63
+ }
64
+
65
+ .card {
66
+ background: #161b22;
67
+ border: 1px solid #30363d;
68
+ border-radius: 12px;
69
+ overflow: hidden;
70
+ transition: all 0.3s ease;
71
+ display: flex;
72
+ flex-direction: column;
73
+ }
74
+
75
+ .card:hover {
76
+ border-color: #58a6ff;
77
+ box-shadow: 0 0 20px rgba(88, 166, 255, 0.2);
78
+ transform: translateY(-4px);
79
+ }
80
+
81
+ .card-preview {
82
+ background: linear-gradient(135deg, #0d1117 0%, #1c2128 100%);
83
+ height: 220px;
84
+ display: flex;
85
+ align-items: center;
86
+ justify-content: center;
87
+ overflow: hidden;
88
+ position: relative;
89
+ }
90
+
91
+ .card-preview svg {
92
+ width: 100%;
93
+ height: 100%;
94
+ filter: drop-shadow(0 0 10px rgba(88, 166, 255, 0.1));
95
+ }
96
+
97
+ .card-content {
98
+ padding: 1.5rem;
99
+ flex-grow: 1;
100
+ display: flex;
101
+ flex-direction: column;
102
+ }
103
+
104
+ .card-title {
105
+ font-size: 1.3rem;
106
+ font-weight: 600;
107
+ color: #58a6ff;
108
+ margin-bottom: 0.5rem;
109
+ }
110
+
111
+ .card-subtitle {
112
+ font-size: 0.95rem;
113
+ color: #8b949e;
114
+ margin-bottom: 1rem;
115
+ }
116
+
117
+ .card-prompt {
118
+ background: #0d1117;
119
+ border: 1px solid #30363d;
120
+ border-radius: 6px;
121
+ padding: 0.75rem;
122
+ margin-bottom: 1rem;
123
+ font-size: 0.85rem;
124
+ color: #79c0ff;
125
+ font-family: 'Monaco', 'Courier New', monospace;
126
+ word-break: break-word;
127
+ }
128
+
129
+ .card-dimensions {
130
+ font-size: 0.9rem;
131
+ color: #8b949e;
132
+ margin-bottom: 1rem;
133
+ }
134
+
135
+ .card-dimensions strong {
136
+ color: #c9d1d9;
137
+ }
138
+
139
+ .card-button {
140
+ background: linear-gradient(135deg, #1f6feb 0%, #388bfd 100%);
141
+ color: white;
142
+ border: none;
143
+ padding: 0.75rem 1.5rem;
144
+ border-radius: 6px;
145
+ font-size: 0.95rem;
146
+ font-weight: 600;
147
+ cursor: pointer;
148
+ transition: all 0.2s ease;
149
+ text-decoration: none;
150
+ display: inline-block;
151
+ text-align: center;
152
+ margin-top: auto;
153
+ }
154
+
155
+ .card-button:hover {
156
+ background: linear-gradient(135deg, #388bfd 0%, #1f6feb 100%);
157
+ transform: scale(1.05);
158
+ box-shadow: 0 4px 12px rgba(31, 111, 235, 0.4);
159
+ }
160
+
161
+ .card-button:active {
162
+ transform: scale(0.98);
163
+ }
164
+
165
+ .grid-3d {
166
+ background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="40" height="40"><path d="M0 0h40v40H0z" fill="%23161b22"/><path d="M0 0l20 10 20-10M0 40l20-10 20 10M0 0v40M40 0v40" stroke="%23238636" stroke-width="0.5" fill="none"/></svg>')
167
+ center/contain;
168
+ }
169
+
170
+ footer {
171
+ text-align: center;
172
+ padding: 3rem 2rem;
173
+ border-top: 1px solid #30363d;
174
+ color: #8b949e;
175
+ }
176
+
177
+ footer a {
178
+ color: #58a6ff;
179
+ text-decoration: none;
180
+ }
181
+
182
+ footer a:hover {
183
+ text-decoration: underline;
184
+ }
185
+
186
+ /* 3D-like isometric perspective */
187
+ .iso-3d {
188
+ perspective: 1000px;
189
+ width: 100%;
190
+ height: 100%;
191
+ display: flex;
192
+ align-items: center;
193
+ justify-content: center;
194
+ }
195
+
196
+ /* Part-specific SVG styles */
197
+ .part-cube {
198
+ width: 120px;
199
+ height: 120px;
200
+ }
201
+
202
+ .part-cylinder {
203
+ width: 100px;
204
+ height: 140px;
205
+ }
206
+
207
+ .part-sphere {
208
+ width: 120px;
209
+ height: 120px;
210
+ }
211
+
212
+ .part-plate {
213
+ width: 140px;
214
+ height: 90px;
215
+ }
216
+
217
+ .part-bracket {
218
+ width: 110px;
219
+ height: 110px;
220
+ }
221
+
222
+ .part-bearing {
223
+ width: 130px;
224
+ height: 100px;
225
+ }
226
+
227
+ .part-spacer {
228
+ width: 100px;
229
+ height: 100px;
230
+ }
231
+
232
+ @media (max-width: 768px) {
233
+ .gallery-grid {
234
+ grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
235
+ gap: 1.5rem;
236
+ }
237
+
238
+ header h1 {
239
+ font-size: 2rem;
240
+ }
241
+
242
+ .category-title {
243
+ font-size: 1.4rem;
244
+ }
245
+ }
246
+
247
+ .breadcrumb {
248
+ font-size: 0.9rem;
249
+ color: #8b949e;
250
+ margin-bottom: 2rem;
251
+ }
252
+
253
+ .breadcrumb a {
254
+ color: #58a6ff;
255
+ text-decoration: none;
256
+ }
257
+
258
+ .breadcrumb a:hover {
259
+ text-decoration: underline;
260
+ }
261
+ </style>
262
+ </head>
263
+ <body>
264
+ <header>
265
+ <h1>cycleCAD Examples Gallery</h1>
266
+ <p>Explore what you can create with AI-powered parametric design</p>
267
+ </header>
268
+
269
+ <div class="container">
270
+ <div class="breadcrumb">
271
+ <a href="../index.html">cycleCAD</a> / Examples
272
+ </div>
273
+
274
+ <!-- Basic Primitives -->
275
+ <div class="category">
276
+ <h2 class="category-title">Basic Primitives</h2>
277
+ <div class="gallery-grid">
278
+ <!-- Cube -->
279
+ <div class="card">
280
+ <div class="card-preview grid-3d">
281
+ <svg class="part-cube" viewBox="0 0 120 120" xmlns="http://www.w3.org/2000/svg">
282
+ <g transform="translate(60, 60)">
283
+ <!-- Front face -->
284
+ <polygon points="0,-40 40,-20 40,20 0,40" fill="#238636" stroke="#58a6ff" stroke-width="2"/>
285
+ <!-- Top face -->
286
+ <polygon points="0,-40 -40,-20 0,0 40,-20" fill="#1f6feb" stroke="#58a6ff" stroke-width="2"/>
287
+ <!-- Right face -->
288
+ <polygon points="40,-20 40,20 0,40 0,0" fill="#0d47a1" stroke="#58a6ff" stroke-width="2"/>
289
+ </g>
290
+ </svg>
291
+ </div>
292
+ <div class="card-content">
293
+ <div class="card-title">Simple Cube</div>
294
+ <div class="card-subtitle">Basic Box Primitive</div>
295
+ <div class="card-prompt">50mm cube</div>
296
+ <div class="card-dimensions">
297
+ <strong>Size:</strong> 50 × 50 × 50 mm
298
+ </div>
299
+ <a href="../../app.html?create=box&w=50&h=50&d=50" class="card-button">Open in cycleCAD</a>
300
+ </div>
301
+ </div>
302
+
303
+ <!-- Cylinder -->
304
+ <div class="card">
305
+ <div class="card-preview grid-3d">
306
+ <svg class="part-cylinder" viewBox="0 0 100 140" xmlns="http://www.w3.org/2000/svg">
307
+ <g transform="translate(50, 70)">
308
+ <!-- Top ellipse -->
309
+ <ellipse cx="0" cy="-35" rx="25" ry="12" fill="#238636" stroke="#58a6ff" stroke-width="2"/>
310
+ <!-- Side -->
311
+ <rect x="-25" y="-35" width="50" height="70" fill="#1f6feb" stroke="#58a6ff" stroke-width="2"/>
312
+ <!-- Bottom ellipse -->
313
+ <ellipse cx="0" cy="35" rx="25" ry="12" fill="#0d47a1" stroke="#58a6ff" stroke-width="2"/>
314
+ </g>
315
+ </svg>
316
+ </div>
317
+ <div class="card-content">
318
+ <div class="card-title">Cylinder</div>
319
+ <div class="card-subtitle">Rotational Primitive</div>
320
+ <div class="card-prompt">cylinder 30mm radius 60mm tall</div>
321
+ <div class="card-dimensions">
322
+ <strong>Size:</strong> ⌀60 × 60 mm (R30)
323
+ </div>
324
+ <a href="../../app.html?create=cylinder&r=30&h=60" class="card-button">Open in cycleCAD</a>
325
+ </div>
326
+ </div>
327
+
328
+ <!-- Sphere -->
329
+ <div class="card">
330
+ <div class="card-preview grid-3d">
331
+ <svg class="part-sphere" viewBox="0 0 120 120" xmlns="http://www.w3.org/2000/svg">
332
+ <g transform="translate(60, 60)">
333
+ <circle cx="0" cy="0" r="45" fill="#238636" stroke="#58a6ff" stroke-width="2"/>
334
+ <path d="M -45 0 Q 0 -30 45 0" stroke="#1f6feb" stroke-width="2" fill="none" opacity="0.7"/>
335
+ <path d="M -45 0 Q 0 30 45 0" stroke="#0d47a1" stroke-width="2" fill="none" opacity="0.7"/>
336
+ </g>
337
+ </svg>
338
+ </div>
339
+ <div class="card-content">
340
+ <div class="card-title">Sphere</div>
341
+ <div class="card-subtitle">Spherical Primitive</div>
342
+ <div class="card-prompt">sphere 25mm radius</div>
343
+ <div class="card-dimensions">
344
+ <strong>Size:</strong> ⌀50 mm (R25)
345
+ </div>
346
+ <a href="../../app.html?create=sphere&r=25" class="card-button">Open in cycleCAD</a>
347
+ </div>
348
+ </div>
349
+ </div>
350
+ </div>
351
+
352
+ <!-- Plates & Brackets -->
353
+ <div class="category">
354
+ <h2 class="category-title">Plates & Brackets</h2>
355
+ <div class="gallery-grid">
356
+ <!-- Flat Plate -->
357
+ <div class="card">
358
+ <div class="card-preview grid-3d">
359
+ <svg class="part-plate" viewBox="0 0 140 90" xmlns="http://www.w3.org/2000/svg">
360
+ <g transform="translate(70, 45)">
361
+ <polygon points="-60,-30 60,-30 65,-25 65,25 60,30 -60,30 -65,25 -65,-25" fill="#238636" stroke="#58a6ff" stroke-width="2"/>
362
+ <line x1="-60" y1="-30" x2="-65" y2="-25" stroke="#1f6feb" stroke-width="1.5"/>
363
+ <line x1="60" y1="-30" x2="65" y2="-25" stroke="#1f6feb" stroke-width="1.5"/>
364
+ </g>
365
+ </svg>
366
+ </div>
367
+ <div class="card-content">
368
+ <div class="card-title">Flat Plate</div>
369
+ <div class="card-subtitle">Base Mounting Plate</div>
370
+ <div class="card-prompt">plate 100 by 60 by 10</div>
371
+ <div class="card-dimensions">
372
+ <strong>Size:</strong> 100 × 60 × 10 mm
373
+ </div>
374
+ <a href="../../app.html?create=box&w=100&h=60&d=10" class="card-button">Open in cycleCAD</a>
375
+ </div>
376
+ </div>
377
+
378
+ <!-- Plate with Holes -->
379
+ <div class="card">
380
+ <div class="card-preview grid-3d">
381
+ <svg class="part-plate" viewBox="0 0 140 90" xmlns="http://www.w3.org/2000/svg">
382
+ <g transform="translate(70, 45)">
383
+ <polygon points="-60,-30 60,-30 65,-25 65,25 60,30 -60,30 -65,25 -65,-25" fill="#238636" stroke="#58a6ff" stroke-width="2"/>
384
+ <circle cx="-45" cy="-20" r="5" fill="#0d1117" stroke="#58a6ff" stroke-width="1.5"/>
385
+ <circle cx="45" cy="-20" r="5" fill="#0d1117" stroke="#58a6ff" stroke-width="1.5"/>
386
+ <circle cx="-45" cy="20" r="5" fill="#0d1117" stroke="#58a6ff" stroke-width="1.5"/>
387
+ <circle cx="45" cy="20" r="5" fill="#0d1117" stroke="#58a6ff" stroke-width="1.5"/>
388
+ </g>
389
+ </svg>
390
+ </div>
391
+ <div class="card-content">
392
+ <div class="card-title">Plate with 4 Holes</div>
393
+ <div class="card-subtitle">Corner-Mounted Plate</div>
394
+ <div class="card-prompt">plate 100x60x10 with 4 corner holes 8mm</div>
395
+ <div class="card-dimensions">
396
+ <strong>Size:</strong> 100 × 60 × 10 mm<br>
397
+ <strong>Holes:</strong> ⌀8 mm (4×)
398
+ </div>
399
+ <a href="../../app.html?create=plate-holes&w=100&h=60&d=10&hole=8" class="card-button">Open in cycleCAD</a>
400
+ </div>
401
+ </div>
402
+
403
+ <!-- L-Bracket -->
404
+ <div class="card">
405
+ <div class="card-preview grid-3d">
406
+ <svg class="part-bracket" viewBox="0 0 110 110" xmlns="http://www.w3.org/2000/svg">
407
+ <g transform="translate(55, 55)">
408
+ <!-- Vertical arm -->
409
+ <polygon points="-15,-45 15,-45 18,-42 18,0 -15,0" fill="#238636" stroke="#58a6ff" stroke-width="2"/>
410
+ <!-- Horizontal arm -->
411
+ <polygon points="-18,0 18,0 18,15 -45,15 -45,-3" fill="#1f6feb" stroke="#58a6ff" stroke-width="2"/>
412
+ </g>
413
+ </svg>
414
+ </div>
415
+ <div class="card-content">
416
+ <div class="card-title">L-Bracket</div>
417
+ <div class="card-subtitle">90° Mounting Bracket</div>
418
+ <div class="card-prompt">L bracket 80x40x5mm</div>
419
+ <div class="card-dimensions">
420
+ <strong>Size:</strong> 80 × 40 mm<br>
421
+ <strong>Thickness:</strong> 5 mm
422
+ </div>
423
+ <a href="../../app.html?create=l-bracket&w=80&h=40&t=5" class="card-button">Open in cycleCAD</a>
424
+ </div>
425
+ </div>
426
+
427
+ <!-- Gusset Plate -->
428
+ <div class="card">
429
+ <div class="card-preview grid-3d">
430
+ <svg class="part-bracket" viewBox="0 0 110 110" xmlns="http://www.w3.org/2000/svg">
431
+ <g transform="translate(55, 55)">
432
+ <polygon points="-40,-40 40,-40 40,40 -40,40" fill="#238636" stroke="#58a6ff" stroke-width="2" opacity="0.5"/>
433
+ <polygon points="-40,-40 40,-40 -40,40" fill="#1f6feb" stroke="#58a6ff" stroke-width="2"/>
434
+ </g>
435
+ </svg>
436
+ </div>
437
+ <div class="card-content">
438
+ <div class="card-title">Gusset Plate</div>
439
+ <div class="card-subtitle">Triangular Reinforcement</div>
440
+ <div class="card-prompt">triangular gusset 60x60x5</div>
441
+ <div class="card-dimensions">
442
+ <strong>Size:</strong> 60 × 60 mm<br>
443
+ <strong>Thickness:</strong> 5 mm
444
+ </div>
445
+ <a href="../../app.html?create=gusset&w=60&h=60&t=5" class="card-button">Open in cycleCAD</a>
446
+ </div>
447
+ </div>
448
+ </div>
449
+ </div>
450
+
451
+ <!-- Mechanical Parts -->
452
+ <div class="category">
453
+ <h2 class="category-title">Mechanical Parts</h2>
454
+ <div class="gallery-grid">
455
+ <!-- Flanged Bearing Housing -->
456
+ <div class="card">
457
+ <div class="card-preview grid-3d">
458
+ <svg class="part-bearing" viewBox="0 0 130 100" xmlns="http://www.w3.org/2000/svg">
459
+ <g transform="translate(65, 50)">
460
+ <!-- Flange -->
461
+ <circle cx="0" cy="0" r="35" fill="#238636" stroke="#58a6ff" stroke-width="2"/>
462
+ <!-- Housing bore -->
463
+ <circle cx="0" cy="0" r="20" fill="#0d1117" stroke="#58a6ff" stroke-width="1.5"/>
464
+ <!-- Bolt holes -->
465
+ <circle cx="25" cy="0" r="3" fill="#0d1117" stroke="#58a6ff" stroke-width="1"/>
466
+ <circle cx="-25" cy="0" r="3" fill="#0d1117" stroke="#58a6ff" stroke-width="1"/>
467
+ <circle cx="0" cy="25" r="3" fill="#0d1117" stroke="#58a6ff" stroke-width="1"/>
468
+ <circle cx="0" cy="-25" r="3" fill="#0d1117" stroke="#58a6ff" stroke-width="1"/>
469
+ </g>
470
+ </svg>
471
+ </div>
472
+ <div class="card-content">
473
+ <div class="card-title">Flanged Bearing Housing</div>
474
+ <div class="card-subtitle">Precision Bearing Mount</div>
475
+ <div class="card-prompt">flanged bearing housing 80mm OD, 50mm bore, 4 bolt holes</div>
476
+ <div class="card-dimensions">
477
+ <strong>OD:</strong> 80 mm | <strong>Bore:</strong> 50 mm<br>
478
+ <strong>Bolt Holes:</strong> 4×
479
+ </div>
480
+ <a href="../../app.html?create=bearing&od=80&bore=50&bolts=4" class="card-button">Open in cycleCAD</a>
481
+ </div>
482
+ </div>
483
+
484
+ <!-- Spacer -->
485
+ <div class="card">
486
+ <div class="card-preview grid-3d">
487
+ <svg class="part-spacer" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
488
+ <g transform="translate(50, 50)">
489
+ <!-- Outer diameter -->
490
+ <circle cx="0" cy="0" r="30" fill="#238636" stroke="#58a6ff" stroke-width="2"/>
491
+ <!-- Inner hole -->
492
+ <circle cx="0" cy="0" r="15" fill="#0d1117" stroke="#58a6ff" stroke-width="2"/>
493
+ <!-- Side depth indicator -->
494
+ <path d="M -30 0 L -35 0" stroke="#1f6feb" stroke-width="2"/>
495
+ <path d="M 30 0 L 35 0" stroke="#1f6feb" stroke-width="2"/>
496
+ </g>
497
+ </svg>
498
+ </div>
499
+ <div class="card-content">
500
+ <div class="card-title">Spacer Ring</div>
501
+ <div class="card-subtitle">Axial Spacing Component</div>
502
+ <div class="card-prompt">spacer 20mm OD 10mm ID 5mm thick</div>
503
+ <div class="card-dimensions">
504
+ <strong>OD:</strong> 20 mm | <strong>ID:</strong> 10 mm<br>
505
+ <strong>Height:</strong> 5 mm
506
+ </div>
507
+ <a href="../../app.html?create=spacer&od=20&id=10&h=5" class="card-button">Open in cycleCAD</a>
508
+ </div>
509
+ </div>
510
+
511
+ <!-- Bushing -->
512
+ <div class="card">
513
+ <div class="card-preview grid-3d">
514
+ <svg class="part-cylinder" viewBox="0 0 100 140" xmlns="http://www.w3.org/2000/svg">
515
+ <g transform="translate(50, 70)">
516
+ <ellipse cx="0" cy="-30" rx="22" ry="11" fill="#238636" stroke="#58a6ff" stroke-width="2"/>
517
+ <rect x="-22" y="-30" width="44" height="60" fill="#1f6feb" stroke="#58a6ff" stroke-width="2"/>
518
+ <ellipse cx="0" cy="30" rx="22" ry="11" fill="#0d47a1" stroke="#58a6ff" stroke-width="2"/>
519
+ <circle cx="0" cy="-30" r="12" fill="#0d1117" stroke="#58a6ff" stroke-width="1.5"/>
520
+ <circle cx="0" cy="30" r="12" fill="#0d1117" stroke="#58a6ff" stroke-width="1.5"/>
521
+ </g>
522
+ </svg>
523
+ </div>
524
+ <div class="card-content">
525
+ <div class="card-title">Bushing</div>
526
+ <div class="card-subtitle">Sleeve Bearing</div>
527
+ <div class="card-prompt">bushing 25mm outer 15mm inner 30mm long</div>
528
+ <div class="card-dimensions">
529
+ <strong>OD:</strong> 25 mm | <strong>ID:</strong> 15 mm<br>
530
+ <strong>Length:</strong> 30 mm
531
+ </div>
532
+ <a href="../../app.html?create=bushing&od=25&id=15&l=30" class="card-button">Open in cycleCAD</a>
533
+ </div>
534
+ </div>
535
+
536
+ <!-- Shaft Collar -->
537
+ <div class="card">
538
+ <div class="card-preview grid-3d">
539
+ <svg class="part-spacer" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
540
+ <g transform="translate(50, 50)">
541
+ <!-- Outer hex -->
542
+ <polygon points="0,-28 24,-14 24,14 0,28 -24,14 -24,-14" fill="#238636" stroke="#58a6ff" stroke-width="2"/>
543
+ <!-- Inner bore -->
544
+ <circle cx="0" cy="0" r="12" fill="#0d1117" stroke="#58a6ff" stroke-width="2"/>
545
+ <!-- Set screw indicator -->
546
+ <rect x="-3" y="-32" width="6" height="6" fill="#1f6feb" stroke="#58a6ff" stroke-width="1"/>
547
+ </g>
548
+ </svg>
549
+ </div>
550
+ <div class="card-content">
551
+ <div class="card-title">Shaft Collar</div>
552
+ <div class="card-subtitle">Hex Locking Collar</div>
553
+ <div class="card-prompt">shaft collar 20mm bore 35mm OD 12mm wide</div>
554
+ <div class="card-dimensions">
555
+ <strong>Bore:</strong> 20 mm | <strong>OD:</strong> 35 mm<br>
556
+ <strong>Width:</strong> 12 mm
557
+ </div>
558
+ <a href="../../app.html?create=collar&bore=20&od=35&w=12" class="card-button">Open in cycleCAD</a>
559
+ </div>
560
+ </div>
561
+ </div>
562
+ </div>
563
+
564
+ <!-- Fasteners -->
565
+ <div class="category">
566
+ <h2 class="category-title">Fasteners & Hardware</h2>
567
+ <div class="gallery-grid">
568
+ <!-- M8 Washer -->
569
+ <div class="card">
570
+ <div class="card-preview grid-3d">
571
+ <svg class="part-spacer" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
572
+ <g transform="translate(50, 50)">
573
+ <circle cx="0" cy="0" r="25" fill="#999999" stroke="#58a6ff" stroke-width="2"/>
574
+ <circle cx="0" cy="0" r="8" fill="#0d1117" stroke="#58a6ff" stroke-width="1.5"/>
575
+ </g>
576
+ </svg>
577
+ </div>
578
+ <div class="card-content">
579
+ <div class="card-title">M8 Washer</div>
580
+ <div class="card-subtitle">Standard Flat Washer</div>
581
+ <div class="card-prompt">M8 washer</div>
582
+ <div class="card-dimensions">
583
+ <strong>Bore:</strong> 8 mm | <strong>OD:</strong> 16 mm<br>
584
+ <strong>Thickness:</strong> 1.5 mm
585
+ </div>
586
+ <a href="../../app.html?create=washer&bore=8&od=16&t=1.5" class="card-button">Open in cycleCAD</a>
587
+ </div>
588
+ </div>
589
+
590
+ <!-- Hex Standoff -->
591
+ <div class="card">
592
+ <div class="card-preview grid-3d">
593
+ <svg class="part-cylinder" viewBox="0 0 100 140" xmlns="http://www.w3.org/2000/svg">
594
+ <g transform="translate(50, 70)">
595
+ <!-- Top hex head -->
596
+ <polygon points="0,-40 20,-30 20,-10 0,0 -20,-10 -20,-30" fill="#999999" stroke="#58a6ff" stroke-width="2"/>
597
+ <!-- Shaft -->
598
+ <rect x="-8" y="0" width="16" height="35" fill="#999999" stroke="#58a6ff" stroke-width="2"/>
599
+ <!-- Bottom hex -->
600
+ <polygon points="0,35 20,45 20,65 0,75 -20,65 -20,45" fill="#888888" stroke="#58a6ff" stroke-width="2"/>
601
+ </g>
602
+ </svg>
603
+ </div>
604
+ <div class="card-content">
605
+ <div class="card-title">Hex Standoff</div>
606
+ <div class="card-subtitle">M4 Spacer</div>
607
+ <div class="card-prompt">hex standoff M4 15mm tall</div>
608
+ <div class="card-dimensions">
609
+ <strong>Size:</strong> M4 | <strong>Height:</strong> 15 mm<br>
610
+ <strong>Material:</strong> Aluminum
611
+ </div>
612
+ <a href="../../app.html?create=standoff&m=4&h=15" class="card-button">Open in cycleCAD</a>
613
+ </div>
614
+ </div>
615
+ </div>
616
+ </div>
617
+
618
+ <!-- Custom Applications -->
619
+ <div class="category">
620
+ <h2 class="category-title">Custom Applications</h2>
621
+ <div class="gallery-grid">
622
+ <!-- Phone Stand -->
623
+ <div class="card">
624
+ <div class="card-preview grid-3d">
625
+ <svg viewBox="0 0 140 120" xmlns="http://www.w3.org/2000/svg">
626
+ <g transform="translate(70, 60)">
627
+ <!-- Base -->
628
+ <rect x="-40" y="20" width="80" height="8" fill="#238636" stroke="#58a6ff" stroke-width="2"/>
629
+ <!-- Back support -->
630
+ <polygon points="-30,28 -25,28 -25,-20 -35,-20" fill="#1f6feb" stroke="#58a6ff" stroke-width="2"/>
631
+ <!-- Phone slot -->
632
+ <rect x="-35" y="-15" width="70" height="5" fill="#0d1117" stroke="#58a6ff" stroke-width="1.5"/>
633
+ <!-- Center piece -->
634
+ <rect x="-2" y="28" width="4" height="15" fill="#238636" stroke="#58a6ff" stroke-width="2"/>
635
+ </g>
636
+ </svg>
637
+ </div>
638
+ <div class="card-content">
639
+ <div class="card-title">Phone Stand</div>
640
+ <div class="card-subtitle">Mobile Device Holder</div>
641
+ <div class="card-prompt">phone stand 80mm wide 60mm tall 5mm thick with slot</div>
642
+ <div class="card-dimensions">
643
+ <strong>Width:</strong> 80 mm | <strong>Height:</strong> 60 mm<br>
644
+ <strong>Thickness:</strong> 5 mm
645
+ </div>
646
+ <a href="../../app.html?create=phone-stand&w=80&h=60&t=5" class="card-button">Open in cycleCAD</a>
647
+ </div>
648
+ </div>
649
+
650
+ <!-- Cable Clip -->
651
+ <div class="card">
652
+ <div class="card-preview grid-3d">
653
+ <svg viewBox="0 0 140 120" xmlns="http://www.w3.org/2000/svg">
654
+ <g transform="translate(70, 60)">
655
+ <!-- Base -->
656
+ <rect x="-30" y="25" width="60" height="6" fill="#238636" stroke="#58a6ff" stroke-width="2"/>
657
+ <!-- Wall mount holes -->
658
+ <circle cx="-20" cy="28" r="3" fill="#0d1117" stroke="#58a6ff" stroke-width="1"/>
659
+ <circle cx="20" cy="28" r="3" fill="#0d1117" stroke="#58a6ff" stroke-width="1"/>
660
+ <!-- Clip arms -->
661
+ <path d="M -15 25 Q -18 0 -15 -20" stroke="#1f6feb" stroke-width="4" fill="none"/>
662
+ <path d="M 15 25 Q 18 0 15 -20" stroke="#1f6feb" stroke-width="4" fill="none"/>
663
+ <!-- Cable cutout -->
664
+ <ellipse cx="0" cy="8" rx="8" ry="5" fill="#0d1117" stroke="#58a6ff" stroke-width="1.5"/>
665
+ </g>
666
+ </svg>
667
+ </div>
668
+ <div class="card-content">
669
+ <div class="card-title">Cable Clip</div>
670
+ <div class="card-subtitle">Cable Management</div>
671
+ <div class="card-prompt">cable clip for 10mm cable</div>
672
+ <div class="card-dimensions">
673
+ <strong>Cable Size:</strong> 10 mm | <strong>Length:</strong> 45 mm<br>
674
+ <strong>Mounting:</strong> 2× M4 holes
675
+ </div>
676
+ <a href="../../app.html?create=cable-clip&cable=10&l=45" class="card-button">Open in cycleCAD</a>
677
+ </div>
678
+ </div>
679
+
680
+ <!-- Heat Sink Fin Block -->
681
+ <div class="card">
682
+ <div class="card-preview grid-3d">
683
+ <svg viewBox="0 0 140 120" xmlns="http://www.w3.org/2000/svg">
684
+ <g transform="translate(70, 60)">
685
+ <!-- Base block -->
686
+ <rect x="-40" y="10" width="80" height="20" fill="#238636" stroke="#58a6ff" stroke-width="2"/>
687
+ <!-- Fins -->
688
+ <line x1="-30" y1="10" x2="-30" y2="-25" stroke="#1f6feb" stroke-width="3"/>
689
+ <line x1="-10" y1="10" x2="-10" y2="-25" stroke="#1f6feb" stroke-width="3"/>
690
+ <line x1="10" y1="10" x2="10" y2="-25" stroke="#1f6feb" stroke-width="3"/>
691
+ <line x1="30" y1="10" x2="30" y2="-25" stroke="#1f6feb" stroke-width="3"/>
692
+ <!-- Mounting holes -->
693
+ <circle cx="-35" cy="22" r="2" fill="#0d1117" stroke="#58a6ff" stroke-width="1"/>
694
+ <circle cx="35" cy="22" r="2" fill="#0d1117" stroke="#58a6ff" stroke-width="1"/>
695
+ </g>
696
+ </svg>
697
+ </div>
698
+ <div class="card-content">
699
+ <div class="card-title">Heat Sink Fin Block</div>
700
+ <div class="card-subtitle">Thermal Cooling Component</div>
701
+ <div class="card-prompt">heat sink 80mm wide 40mm tall with 4 fins 3mm thick</div>
702
+ <div class="card-dimensions">
703
+ <strong>Width:</strong> 80 mm | <strong>Height:</strong> 40 mm<br>
704
+ <strong>Fins:</strong> 4× @ 3 mm thick
705
+ </div>
706
+ <a href="../../app.html?create=heatsink&w=80&h=40&fins=4&t=3" class="card-button">Open in cycleCAD</a>
707
+ </div>
708
+ </div>
709
+
710
+ <!-- Mounting Bracket -->
711
+ <div class="card">
712
+ <div class="card-preview grid-3d">
713
+ <svg viewBox="0 0 140 120" xmlns="http://www.w3.org/2000/svg">
714
+ <g transform="translate(70, 60)">
715
+ <!-- Vertical arm -->
716
+ <rect x="-12" y="-40" width="24" height="55" fill="#238636" stroke="#58a6ff" stroke-width="2"/>
717
+ <!-- Horizontal base -->
718
+ <rect x="-40" y="15" width="80" height="12" fill="#1f6feb" stroke="#58a6ff" stroke-width="2"/>
719
+ <!-- Gusset -->
720
+ <polygon points="-12,15 -12,8 -20,15" fill="#0d47a1" stroke="#58a6ff" stroke-width="1.5"/>
721
+ <!-- Bolt holes -->
722
+ <circle cx="-25" cy="21" r="3" fill="#0d1117" stroke="#58a6ff" stroke-width="1"/>
723
+ <circle cx="25" cy="21" r="3" fill="#0d1117" stroke="#58a6ff" stroke-width="1"/>
724
+ <circle cx="-5" cy="-35" r="3" fill="#0d1117" stroke="#58a6ff" stroke-width="1"/>
725
+ <circle cx="5" cy="-35" r="3" fill="#0d1117" stroke="#58a6ff" stroke-width="1"/>
726
+ </g>
727
+ </svg>
728
+ </div>
729
+ <div class="card-content">
730
+ <div class="card-title">Mounting Bracket</div>
731
+ <div class="card-subtitle">Wall/Panel Mount</div>
732
+ <div class="card-prompt">mounting bracket 80mm base 60mm tall with 4 bolt holes</div>
733
+ <div class="card-dimensions">
734
+ <strong>Base:</strong> 80 mm | <strong>Height:</strong> 60 mm<br>
735
+ <strong>Holes:</strong> 4× M6
736
+ </div>
737
+ <a href="../../app.html?create=mount-bracket&base=80&h=60&holes=4" class="card-button">Open in cycleCAD</a>
738
+ </div>
739
+ </div>
740
+
741
+ <!-- Filter Housing -->
742
+ <div class="card">
743
+ <div class="card-preview grid-3d">
744
+ <svg class="part-cylinder" viewBox="0 0 100 140" xmlns="http://www.w3.org/2000/svg">
745
+ <g transform="translate(50, 70)">
746
+ <!-- Outer housing -->
747
+ <ellipse cx="0" cy="-35" rx="28" ry="14" fill="#238636" stroke="#58a6ff" stroke-width="2"/>
748
+ <rect x="-28" y="-35" width="56" height="70" fill="#1f6feb" stroke="#58a6ff" stroke-width="2"/>
749
+ <ellipse cx="0" cy="35" rx="28" ry="14" fill="#0d47a1" stroke="#58a6ff" stroke-width="2"/>
750
+ <!-- Inlet port -->
751
+ <circle cx="0" cy="-40" r="5" fill="#238636" stroke="#58a6ff" stroke-width="1.5"/>
752
+ <!-- Outlet port -->
753
+ <circle cx="0" cy="40" r="5" fill="#238636" stroke="#58a6ff" stroke-width="1.5"/>
754
+ </g>
755
+ </svg>
756
+ </div>
757
+ <div class="card-content">
758
+ <div class="card-title">Filter Housing</div>
759
+ <div class="card-subtitle">Cylindrical Filter Canister</div>
760
+ <div class="card-prompt">filter housing 60mm diameter 80mm tall inlet outlet ports</div>
761
+ <div class="card-dimensions">
762
+ <strong>Diameter:</strong> 60 mm | <strong>Height:</strong> 80 mm<br>
763
+ <strong>Ports:</strong> 2× (inlet/outlet)
764
+ </div>
765
+ <a href="../../app.html?create=filter&d=60&h=80" class="card-button">Open in cycleCAD</a>
766
+ </div>
767
+ </div>
768
+
769
+ <!-- Enclosure Corner Block -->
770
+ <div class="card">
771
+ <div class="card-preview grid-3d">
772
+ <svg class="part-cube" viewBox="0 0 120 120" xmlns="http://www.w3.org/2000/svg">
773
+ <g transform="translate(60, 60)">
774
+ <!-- Corner block -->
775
+ <polygon points="0,-35 35,-15 35,20 0,40" fill="#238636" stroke="#58a6ff" stroke-width="2"/>
776
+ <polygon points="0,-35 -35,-15 -35,20 0,40" fill="#1f6feb" stroke="#58a6ff" stroke-width="2"/>
777
+ <!-- Bolt holes -->
778
+ <circle cx="20" cy="10" r="2.5" fill="#0d1117" stroke="#58a6ff" stroke-width="1"/>
779
+ <circle cx="-20" cy="10" r="2.5" fill="#0d1117" stroke="#58a6ff" stroke-width="1"/>
780
+ <circle cx="0" cy="25" r="2.5" fill="#0d1117" stroke="#58a6ff" stroke-width="1"/>
781
+ </g>
782
+ </svg>
783
+ </div>
784
+ <div class="card-content">
785
+ <div class="card-title">Enclosure Corner Block</div>
786
+ <div class="card-subtitle">Cabinet Assembly Junction</div>
787
+ <div class="card-prompt">corner block 40x40x40mm with 3 mounting holes</div>
788
+ <div class="card-dimensions">
789
+ <strong>Size:</strong> 40 × 40 × 40 mm<br>
790
+ <strong>Mounting Holes:</strong> 3×
791
+ </div>
792
+ <a href="../../app.html?create=corner-block&w=40&h=40&d=40" class="card-button">Open in cycleCAD</a>
793
+ </div>
794
+ </div>
795
+ </div>
796
+ </div>
797
+ </div>
798
+
799
+ <footer>
800
+ <p>&copy; 2026 cycleCAD by ExplodeView. <a href="../index.html">Back to cycleCAD</a> | <a href="api-reference.html">API Reference</a> | <a href="https://github.com/vvlars-cmd/explodeview">GitHub</a></p>
801
+ </footer>
802
+ </body>
803
+ </html>