@jlcpcb/mcp 0.1.1 → 0.3.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -1,458 +0,0 @@
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>