@jlcpcb/mcp 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,458 @@
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>EasyEDA Component Browser</title>
7
+ <style>
8
+ * {
9
+ box-sizing: border-box;
10
+ margin: 0;
11
+ padding: 0;
12
+ }
13
+
14
+ :root {
15
+ --bg-primary: #1a1a1a;
16
+ --bg-secondary: #2a2a2a;
17
+ --bg-card: #333333;
18
+ --text-primary: #ffffff;
19
+ --text-secondary: #aaaaaa;
20
+ --accent: #4a9eff;
21
+ --accent-hover: #6ab0ff;
22
+ --success: #22c55e;
23
+ --error: #ef4444;
24
+ --border: #444444;
25
+ }
26
+
27
+ body {
28
+ font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
29
+ background: var(--bg-primary);
30
+ color: var(--text-primary);
31
+ min-height: 100vh;
32
+ }
33
+
34
+ header {
35
+ background: var(--bg-secondary);
36
+ padding: 20px;
37
+ border-bottom: 1px solid var(--border);
38
+ position: sticky;
39
+ top: 0;
40
+ z-index: 100;
41
+ }
42
+
43
+ .header-content {
44
+ max-width: 1400px;
45
+ margin: 0 auto;
46
+ }
47
+
48
+ h1 {
49
+ font-size: 1.5rem;
50
+ margin-bottom: 16px;
51
+ color: var(--text-primary);
52
+ }
53
+
54
+ .search-bar {
55
+ display: flex;
56
+ gap: 12px;
57
+ flex-wrap: wrap;
58
+ }
59
+
60
+ #search-input {
61
+ flex: 1;
62
+ min-width: 200px;
63
+ padding: 12px 16px;
64
+ font-size: 16px;
65
+ background: var(--bg-primary);
66
+ border: 1px solid var(--border);
67
+ border-radius: 8px;
68
+ color: var(--text-primary);
69
+ outline: none;
70
+ }
71
+
72
+ #search-input:focus {
73
+ border-color: var(--accent);
74
+ }
75
+
76
+ #source-select {
77
+ padding: 12px 16px;
78
+ font-size: 16px;
79
+ background: var(--bg-primary);
80
+ border: 1px solid var(--border);
81
+ border-radius: 8px;
82
+ color: var(--text-primary);
83
+ cursor: pointer;
84
+ }
85
+
86
+ #search-btn {
87
+ padding: 12px 24px;
88
+ font-size: 16px;
89
+ background: var(--accent);
90
+ border: none;
91
+ border-radius: 8px;
92
+ color: white;
93
+ cursor: pointer;
94
+ font-weight: 500;
95
+ transition: background 0.2s;
96
+ }
97
+
98
+ #search-btn:hover {
99
+ background: var(--accent-hover);
100
+ }
101
+
102
+ main {
103
+ max-width: 1400px;
104
+ margin: 0 auto;
105
+ padding: 24px;
106
+ }
107
+
108
+ #loading {
109
+ display: flex;
110
+ justify-content: center;
111
+ padding: 48px;
112
+ }
113
+
114
+ #loading.hidden {
115
+ display: none;
116
+ }
117
+
118
+ .spinner {
119
+ width: 40px;
120
+ height: 40px;
121
+ border: 3px solid var(--border);
122
+ border-top-color: var(--accent);
123
+ border-radius: 50%;
124
+ animation: spin 1s linear infinite;
125
+ }
126
+
127
+ @keyframes spin {
128
+ to { transform: rotate(360deg); }
129
+ }
130
+
131
+ #results-grid {
132
+ display: grid;
133
+ grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
134
+ gap: 20px;
135
+ }
136
+
137
+ .card {
138
+ background: var(--bg-card);
139
+ border-radius: 12px;
140
+ overflow: hidden;
141
+ border: 1px solid var(--border);
142
+ transition: transform 0.2s, border-color 0.2s;
143
+ }
144
+
145
+ .card:hover {
146
+ transform: translateY(-2px);
147
+ border-color: var(--accent);
148
+ }
149
+
150
+ .card-images {
151
+ display: flex;
152
+ gap: 2px;
153
+ background: var(--border);
154
+ }
155
+
156
+ .image-container {
157
+ flex: 1;
158
+ aspect-ratio: 1;
159
+ background: #000;
160
+ display: flex;
161
+ flex-direction: column;
162
+ align-items: center;
163
+ justify-content: center;
164
+ position: relative;
165
+ cursor: pointer;
166
+ overflow: hidden;
167
+ }
168
+
169
+ .image-container img,
170
+ .image-container svg {
171
+ max-width: 100%;
172
+ max-height: 100%;
173
+ object-fit: contain;
174
+ }
175
+
176
+ .image-label {
177
+ position: absolute;
178
+ bottom: 4px;
179
+ left: 4px;
180
+ font-size: 10px;
181
+ color: var(--text-secondary);
182
+ background: rgba(0,0,0,0.7);
183
+ padding: 2px 6px;
184
+ border-radius: 4px;
185
+ }
186
+
187
+ .symbol-placeholder,
188
+ .footprint-placeholder,
189
+ .no-preview {
190
+ color: var(--text-secondary);
191
+ font-size: 12px;
192
+ }
193
+
194
+ .card-info {
195
+ padding: 12px;
196
+ }
197
+
198
+ .card-title {
199
+ font-weight: 600;
200
+ margin-bottom: 8px;
201
+ white-space: nowrap;
202
+ overflow: hidden;
203
+ text-overflow: ellipsis;
204
+ }
205
+
206
+ .card-package,
207
+ .card-owner {
208
+ font-size: 13px;
209
+ color: var(--text-secondary);
210
+ margin-bottom: 4px;
211
+ }
212
+
213
+ .card-uuid {
214
+ display: flex;
215
+ padding: 8px 12px;
216
+ background: var(--bg-secondary);
217
+ gap: 8px;
218
+ }
219
+
220
+ .card-uuid input {
221
+ flex: 1;
222
+ background: var(--bg-primary);
223
+ border: 1px solid var(--border);
224
+ border-radius: 4px;
225
+ padding: 6px 10px;
226
+ font-size: 11px;
227
+ font-family: monospace;
228
+ color: var(--text-secondary);
229
+ }
230
+
231
+ .copy-btn {
232
+ background: var(--accent);
233
+ border: none;
234
+ border-radius: 4px;
235
+ padding: 6px 10px;
236
+ cursor: pointer;
237
+ color: white;
238
+ display: flex;
239
+ align-items: center;
240
+ justify-content: center;
241
+ transition: background 0.2s;
242
+ }
243
+
244
+ .copy-btn:hover {
245
+ background: var(--accent-hover);
246
+ }
247
+
248
+ .copy-btn.copied {
249
+ background: var(--success);
250
+ }
251
+
252
+ #pagination {
253
+ display: flex;
254
+ justify-content: center;
255
+ align-items: center;
256
+ gap: 16px;
257
+ margin-top: 32px;
258
+ }
259
+
260
+ .page-btn {
261
+ padding: 10px 20px;
262
+ background: var(--bg-card);
263
+ border: 1px solid var(--border);
264
+ border-radius: 8px;
265
+ color: var(--text-primary);
266
+ cursor: pointer;
267
+ transition: background 0.2s, border-color 0.2s;
268
+ }
269
+
270
+ .page-btn:hover:not(:disabled) {
271
+ background: var(--bg-secondary);
272
+ border-color: var(--accent);
273
+ }
274
+
275
+ .page-btn:disabled {
276
+ opacity: 0.5;
277
+ cursor: not-allowed;
278
+ }
279
+
280
+ .page-info {
281
+ color: var(--text-secondary);
282
+ }
283
+
284
+ .no-results,
285
+ .error {
286
+ grid-column: 1 / -1;
287
+ text-align: center;
288
+ padding: 48px;
289
+ color: var(--text-secondary);
290
+ }
291
+
292
+ .error {
293
+ color: var(--error);
294
+ }
295
+
296
+ /* Modal */
297
+ #preview-modal {
298
+ position: fixed;
299
+ inset: 0;
300
+ background: rgba(0, 0, 0, 0.8);
301
+ display: flex;
302
+ align-items: center;
303
+ justify-content: center;
304
+ z-index: 1000;
305
+ padding: 20px;
306
+ }
307
+
308
+ #preview-modal.hidden {
309
+ display: none;
310
+ }
311
+
312
+ .modal-wrapper {
313
+ background: var(--bg-secondary);
314
+ border-radius: 16px;
315
+ max-width: 900px;
316
+ width: 100%;
317
+ max-height: 90vh;
318
+ overflow: auto;
319
+ position: relative;
320
+ }
321
+
322
+ #modal-close {
323
+ position: absolute;
324
+ top: 16px;
325
+ right: 16px;
326
+ background: var(--bg-card);
327
+ border: 1px solid var(--border);
328
+ border-radius: 8px;
329
+ padding: 8px 12px;
330
+ color: var(--text-primary);
331
+ cursor: pointer;
332
+ font-size: 18px;
333
+ z-index: 10;
334
+ }
335
+
336
+ #modal-close:hover {
337
+ background: var(--bg-primary);
338
+ }
339
+
340
+ #modal-content {
341
+ padding: 24px;
342
+ }
343
+
344
+ .modal-loading {
345
+ text-align: center;
346
+ padding: 48px;
347
+ color: var(--text-secondary);
348
+ }
349
+
350
+ .modal-error {
351
+ text-align: center;
352
+ padding: 48px;
353
+ color: var(--error);
354
+ }
355
+
356
+ .modal-header {
357
+ margin-bottom: 24px;
358
+ }
359
+
360
+ .modal-header h2 {
361
+ margin-bottom: 12px;
362
+ }
363
+
364
+ .modal-uuid {
365
+ display: flex;
366
+ align-items: center;
367
+ gap: 12px;
368
+ }
369
+
370
+ .modal-uuid code {
371
+ background: var(--bg-primary);
372
+ padding: 8px 12px;
373
+ border-radius: 6px;
374
+ font-size: 14px;
375
+ color: var(--text-secondary);
376
+ }
377
+
378
+ .modal-copy {
379
+ padding: 8px 16px;
380
+ font-size: 14px;
381
+ }
382
+
383
+ .modal-previews {
384
+ display: grid;
385
+ grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
386
+ gap: 24px;
387
+ margin-bottom: 24px;
388
+ }
389
+
390
+ .modal-preview h3 {
391
+ margin-bottom: 12px;
392
+ font-size: 14px;
393
+ color: var(--text-secondary);
394
+ }
395
+
396
+ .preview-svg {
397
+ background: #000;
398
+ border-radius: 8px;
399
+ aspect-ratio: 1;
400
+ display: flex;
401
+ align-items: center;
402
+ justify-content: center;
403
+ overflow: hidden;
404
+ }
405
+
406
+ .preview-svg svg {
407
+ width: 100%;
408
+ height: 100%;
409
+ }
410
+
411
+ .preview-svg .no-preview {
412
+ color: var(--text-secondary);
413
+ }
414
+
415
+ .modal-info {
416
+ display: flex;
417
+ gap: 24px;
418
+ color: var(--text-secondary);
419
+ font-size: 14px;
420
+ }
421
+ </style>
422
+ </head>
423
+ <body>
424
+ <header>
425
+ <div class="header-content">
426
+ <h1>EasyEDA Component Browser</h1>
427
+ <div class="search-bar">
428
+ <input type="text" id="search-input" placeholder="Search components (e.g., ESP32, STM32, LM7805)..." autofocus />
429
+ <select id="source-select">
430
+ <option value="user">Community</option>
431
+ <option value="lcsc">LCSC</option>
432
+ <option value="all">All Sources</option>
433
+ </select>
434
+ <button id="search-btn">Search</button>
435
+ </div>
436
+ </div>
437
+ </header>
438
+
439
+ <main>
440
+ <div id="loading" class="hidden">
441
+ <div class="spinner"></div>
442
+ </div>
443
+ <div id="results-grid"></div>
444
+ <div id="pagination"></div>
445
+ </main>
446
+
447
+ <div id="preview-modal" class="hidden">
448
+ <div class="modal-wrapper">
449
+ <button id="modal-close">&times;</button>
450
+ <div id="modal-content"></div>
451
+ </div>
452
+ </div>
453
+
454
+ <script>
455
+ /* {{INLINE_JS}} */
456
+ </script>
457
+ </body>
458
+ </html>