-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathapi_web.html
More file actions
624 lines (624 loc) · 201 KB
/
Copy pathapi_web.html
File metadata and controls
624 lines (624 loc) · 201 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="Content-Style-Type" content="text/css">
<title></title>
<meta name="Generator" content="Cocoa HTML Writer">
<meta name="CocoaVersion" content="2575.7">
<style type="text/css">
p.p1 {margin: 0.0px 0.0px 0.0px 0.0px; font: 14.0px Menlo; color: #4689cc; -webkit-text-stroke: #4689cc}
p.p2 {margin: 0.0px 0.0px 0.0px 0.0px; font: 14.0px Menlo; color: #c27e65; -webkit-text-stroke: #c27e65}
p.p3 {margin: 0.0px 0.0px 0.0px 0.0px; font: 14.0px Menlo; color: #8cd3fe; -webkit-text-stroke: #8cd3fe}
p.p4 {margin: 0.0px 0.0px 0.0px 0.0px; font: 14.0px Menlo; color: #cacaca; -webkit-text-stroke: #cacaca}
p.p5 {margin: 0.0px 0.0px 0.0px 0.0px; font: 14.0px Menlo; color: #cacaca; -webkit-text-stroke: #cacaca; min-height: 16.0px}
p.p6 {margin: 0.0px 0.0px 0.0px 0.0px; font: 14.0px Menlo; color: #6d7378; -webkit-text-stroke: #6d7378}
p.p7 {margin: 0.0px 0.0px 0.0px 0.0px; font: 14.0px Menlo; color: #a7c598; -webkit-text-stroke: #a7c598}
p.p8 {margin: 0.0px 0.0px 0.0px 0.0px; font: 14.0px Menlo; color: #71c083; -webkit-text-stroke: #71c083}
span.s1 {font-kerning: none; background-color: #171818}
span.s2 {font-kerning: none; color: #8cd3fe; background-color: #171818; -webkit-text-stroke: 0px #8cd3fe}
span.s3 {font-kerning: none; color: #6d6d6d; background-color: #171818; -webkit-text-stroke: 0px #6d6d6d}
span.s4 {font-kerning: none; color: #4689cc; background-color: #171818; -webkit-text-stroke: 0px #4689cc}
span.s5 {font-kerning: none; color: #cacaca; background-color: #171818; -webkit-text-stroke: 0px #cacaca}
span.s6 {font-kerning: none; color: #c27e65; background-color: #171818; -webkit-text-stroke: 0px #c27e65}
span.s7 {font-kerning: none}
span.s8 {font-kerning: none; color: #d4d4d4; background-color: #171818; -webkit-text-stroke: 0px #d4d4d4}
span.s9 {font-kerning: none; color: #71c083; background-color: #171818; -webkit-text-stroke: 0px #71c083}
span.s10 {font-kerning: none; color: #a7c598; background-color: #171818; -webkit-text-stroke: 0px #a7c598}
span.s11 {font-kerning: none; color: #b76ff7; background-color: #171818; -webkit-text-stroke: 0px #b76ff7}
span.s12 {font-kerning: none; color: #36c0a0; background-color: #171818; -webkit-text-stroke: 0px #36c0a0}
span.s13 {font-kerning: none; color: #f67c30; background-color: #171818; -webkit-text-stroke: 0px #f67c30}
span.s14 {font-kerning: none; color: #6d7378; background-color: #171818; -webkit-text-stroke: 0px #6d7378}
</style>
</head>
<body>
<p class="p1"><span class="s1"><!DOCTYPE</span><span class="s2"> html</span><span class="s1">></span></p>
<p class="p2"><span class="s3"><</span><span class="s4">html</span><span class="s5"> </span><span class="s2">lang</span><span class="s3">=</span><span class="s1">"zh-TW"</span><span class="s3">></span></p>
<p class="p1"><span class="s3"><</span><span class="s1">head</span><span class="s3">></span></p>
<p class="p3"><span class="s5"><span class="Apple-converted-space"> </span></span><span class="s3"><</span><span class="s4">meta</span><span class="s5"> </span><span class="s1">charset</span><span class="s3">=</span><span class="s6">"UTF-8"</span><span class="s3">></span></p>
<p class="p2"><span class="s5"><span class="Apple-converted-space"> </span></span><span class="s3"><</span><span class="s4">meta</span><span class="s5"> </span><span class="s2">name</span><span class="s3">=</span><span class="s1">"viewport"</span><span class="s5"> </span><span class="s2">content</span><span class="s3">=</span><span class="s1">"width=device-width, initial-scale=1.0"</span><span class="s3">></span></p>
<p class="p4"><span class="s1"><span class="Apple-converted-space"> </span></span><span class="s3"><</span><span class="s4">title</span><span class="s3">></span><span class="s1">免費公開 API 資源互動指南 | Public API Interactive Report</span><span class="s3"></</span><span class="s4">title</span><span class="s3">></span></p>
<p class="p5"><span class="s1"><span class="Apple-converted-space"> </span></span></p>
<p class="p6"><span class="s5"><span class="Apple-converted-space"> </span></span><span class="s1"><!-- Tailwind CSS --></span></p>
<p class="p2"><span class="s5"><span class="Apple-converted-space"> </span></span><span class="s3"><</span><span class="s4">script</span><span class="s5"> </span><span class="s2">src</span><span class="s3">=</span><span class="s1">"https://cdn.tailwindcss.com"</span><span class="s3">></</span><span class="s4">script</span><span class="s3">></span></p>
<p class="p5"><span class="s1"><span class="Apple-converted-space"> </span></span></p>
<p class="p6"><span class="s5"><span class="Apple-converted-space"> </span></span><span class="s1"><!-- Chart.js --></span></p>
<p class="p2"><span class="s5"><span class="Apple-converted-space"> </span></span><span class="s3"><</span><span class="s4">script</span><span class="s5"> </span><span class="s2">src</span><span class="s3">=</span><span class="s1">"https://cdn.jsdelivr.net/npm/chart.js"</span><span class="s3">></</span><span class="s4">script</span><span class="s3">></span></p>
<p class="p5"><span class="s1"><span class="Apple-converted-space"> </span></span></p>
<p class="p6"><span class="s5"><span class="Apple-converted-space"> </span></span><span class="s1"><!-- Font Awesome (for Icons instead of SVG) --></span></p>
<p class="p2"><span class="s5"><span class="Apple-converted-space"> </span></span><span class="s3"><</span><span class="s4">link</span><span class="s5"> </span><span class="s2">rel</span><span class="s3">=</span><span class="s1">"stylesheet"</span><span class="s5"> </span><span class="s2">href</span><span class="s3">=</span><span class="s1">"https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"</span><span class="s3">></span></p>
<p class="p5"><span class="s7"></span><br></p>
<p class="p6"><span class="s5"><span class="Apple-converted-space"> </span></span><span class="s1"><!-- Google Fonts --></span></p>
<p class="p2"><span class="s5"><span class="Apple-converted-space"> </span></span><span class="s3"><</span><span class="s4">link</span><span class="s5"> </span><span class="s2">href</span><span class="s3">=</span><span class="s1">"https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@300;400;500;700&display=swap"</span><span class="s5"> </span><span class="s2">rel</span><span class="s3">=</span><span class="s1">"stylesheet"</span><span class="s3">></span></p>
<p class="p5"><span class="s7"></span><br></p>
<p class="p1"><span class="s5"><span class="Apple-converted-space"> </span></span><span class="s3"><</span><span class="s1">style</span><span class="s3">></span></p>
<p class="p6"><span class="s5"><span class="Apple-converted-space"> </span></span><span class="s1">/* Custom Styling overrides & utilities */</span></p>
<p class="p4"><span class="s1"><span class="Apple-converted-space"> </span></span><span class="s4">body</span><span class="s1"> </span><span class="s8">{</span></p>
<p class="p4"><span class="s1"><span class="Apple-converted-space"> </span></span><span class="s2">font-family:</span><span class="s1"> </span><span class="s9">'Noto Sans TC'</span><span class="s8">,</span><span class="s1"> </span><span class="s6">sans-serif</span><span class="s8">;</span></p>
<p class="p6"><span class="s5"><span class="Apple-converted-space"> </span></span><span class="s2">background-color:</span><span class="s5"> #fdfbf7</span><span class="s8">;</span><span class="s5"> </span><span class="s1">/* Warm neutral background */</span></p>
<p class="p4"><span class="s1"><span class="Apple-converted-space"> </span></span><span class="s2">color:</span><span class="s1"> #334155</span><span class="s8">;</span></p>
<p class="p4"><span class="s1"><span class="Apple-converted-space"> </span></span><span class="s8">}</span></p>
<p class="p5"><span class="s7"></span><br></p>
<p class="p6"><span class="s5"><span class="Apple-converted-space"> </span></span><span class="s1">/* Chart Container Strict Rules */</span></p>
<p class="p1"><span class="s5"><span class="Apple-converted-space"> </span></span><span class="s1">.chart-container</span><span class="s5"> </span><span class="s8">{</span></p>
<p class="p4"><span class="s1"><span class="Apple-converted-space"> </span></span><span class="s2">position:</span><span class="s1"> </span><span class="s6">relative</span><span class="s8">;</span></p>
<p class="p4"><span class="s1"><span class="Apple-converted-space"> </span></span><span class="s2">width:</span><span class="s1"> </span><span class="s10">100%</span><span class="s8">;</span></p>
<p class="p4"><span class="s1"><span class="Apple-converted-space"> </span></span><span class="s2">max-width:</span><span class="s1"> </span><span class="s10">100%</span><span class="s8">;</span></p>
<p class="p4"><span class="s1"><span class="Apple-converted-space"> </span></span><span class="s2">margin-left:</span><span class="s1"> </span><span class="s6">auto</span><span class="s8">;</span></p>
<p class="p4"><span class="s1"><span class="Apple-converted-space"> </span></span><span class="s2">margin-right:</span><span class="s1"> </span><span class="s6">auto</span><span class="s8">;</span></p>
<p class="p4"><span class="s1"><span class="Apple-converted-space"> </span></span><span class="s2">height:</span><span class="s1"> </span><span class="s10">300px</span><span class="s8">;</span></p>
<p class="p4"><span class="s1"><span class="Apple-converted-space"> </span></span><span class="s8">}</span></p>
<p class="p4"><span class="s1"><span class="Apple-converted-space"> </span>@</span><span class="s4">media</span><span class="s1"> (</span><span class="s4">min-width:</span><span class="s1"> 768</span><span class="s4">px</span><span class="s1">) </span><span class="s8">{</span></p>
<p class="p4"><span class="s1"><span class="Apple-converted-space"> </span>.chart-container {</span></p>
<p class="p4"><span class="s1"><span class="Apple-converted-space"> </span></span><span class="s2">height:</span><span class="s1"> </span><span class="s10">350px</span><span class="s8">;</span></p>
<p class="p4"><span class="s1"><span class="Apple-converted-space"> </span></span><span class="s8">}</span></p>
<p class="p4"><span class="s1"><span class="Apple-converted-space"> </span>}</span></p>
<p class="p5"><span class="s1"><span class="Apple-converted-space"> </span></span></p>
<p class="p6"><span class="s5"><span class="Apple-converted-space"> </span></span><span class="s1">/* Custom Scrollbar for the table container */</span></p>
<p class="p1"><span class="s5"><span class="Apple-converted-space"> </span></span><span class="s1">.table-scroller::-webkit-scrollbar</span><span class="s5"> </span><span class="s8">{</span></p>
<p class="p4"><span class="s1"><span class="Apple-converted-space"> </span></span><span class="s2">width:</span><span class="s1"> </span><span class="s10">8px</span><span class="s8">;</span></p>
<p class="p4"><span class="s1"><span class="Apple-converted-space"> </span></span><span class="s2">height:</span><span class="s1"> </span><span class="s10">8px</span><span class="s8">;</span></p>
<p class="p4"><span class="s1"><span class="Apple-converted-space"> </span></span><span class="s8">}</span></p>
<p class="p1"><span class="s5"><span class="Apple-converted-space"> </span></span><span class="s1">.table-scroller::-webkit-scrollbar-track</span><span class="s5"> </span><span class="s8">{</span></p>
<p class="p4"><span class="s1"><span class="Apple-converted-space"> </span></span><span class="s2">background:</span><span class="s1"> #f1f1f1</span><span class="s8">;</span><span class="s1"><span class="Apple-converted-space"> </span></span></p>
<p class="p4"><span class="s1"><span class="Apple-converted-space"> </span></span><span class="s8">}</span></p>
<p class="p1"><span class="s5"><span class="Apple-converted-space"> </span></span><span class="s1">.table-scroller::-webkit-scrollbar-thumb</span><span class="s5"> </span><span class="s8">{</span></p>
<p class="p4"><span class="s1"><span class="Apple-converted-space"> </span></span><span class="s2">background:</span><span class="s1"> #cbd5e1</span><span class="s8">;</span><span class="s1"><span class="Apple-converted-space"> </span></span></p>
<p class="p3"><span class="s5"><span class="Apple-converted-space"> </span></span><span class="s1">border-radius:</span><span class="s5"> </span><span class="s10">4px</span><span class="s8">;</span></p>
<p class="p4"><span class="s1"><span class="Apple-converted-space"> </span></span><span class="s8">}</span></p>
<p class="p1"><span class="s5"><span class="Apple-converted-space"> </span></span><span class="s1">.table-scroller::-webkit-scrollbar-thumb:hover</span><span class="s5"> </span><span class="s8">{</span></p>
<p class="p4"><span class="s1"><span class="Apple-converted-space"> </span></span><span class="s2">background:</span><span class="s1"> #94a3b8</span><span class="s8">;</span><span class="s1"><span class="Apple-converted-space"> </span></span></p>
<p class="p4"><span class="s1"><span class="Apple-converted-space"> </span></span><span class="s8">}</span></p>
<p class="p5"><span class="s7"></span><br></p>
<p class="p1"><span class="s5"><span class="Apple-converted-space"> </span></span><span class="s1">.glass-panel</span><span class="s5"> </span><span class="s8">{</span></p>
<p class="p4"><span class="s1"><span class="Apple-converted-space"> </span></span><span class="s2">background:</span><span class="s1"> </span><span class="s6">rgba(</span><span class="s10">255</span><span class="s8">,</span><span class="s1"> </span><span class="s10">255</span><span class="s8">,</span><span class="s1"> </span><span class="s10">255</span><span class="s8">,</span><span class="s1"> </span><span class="s10">0.9</span><span class="s6">)</span><span class="s8">;</span></p>
<p class="p4"><span class="s1"><span class="Apple-converted-space"> </span></span><span class="s2">border:</span><span class="s1"> </span><span class="s10">1px</span><span class="s1"> </span><span class="s6">solid</span><span class="s1"> </span><span class="s6">rgba(</span><span class="s10">226</span><span class="s8">,</span><span class="s1"> </span><span class="s10">232</span><span class="s8">,</span><span class="s1"> </span><span class="s10">240</span><span class="s8">,</span><span class="s1"> </span><span class="s10">0.8</span><span class="s6">)</span><span class="s8">;</span></p>
<p class="p7"><span class="s5"><span class="Apple-converted-space"> </span></span><span class="s2">box-shadow:</span><span class="s5"> </span><span class="s1">0</span><span class="s5"> </span><span class="s1">4px</span><span class="s5"> </span><span class="s1">6px</span><span class="s5"> </span><span class="s1">-1px</span><span class="s5"> </span><span class="s6">rgba(</span><span class="s1">0</span><span class="s8">,</span><span class="s5"> </span><span class="s1">0</span><span class="s8">,</span><span class="s5"> </span><span class="s1">0</span><span class="s8">,</span><span class="s5"> </span><span class="s1">0.05</span><span class="s6">)</span><span class="s8">,</span><span class="s5"> </span><span class="s1">0</span><span class="s5"> </span><span class="s1">2px</span><span class="s5"> </span><span class="s1">4px</span><span class="s5"> </span><span class="s1">-1px</span><span class="s5"> </span><span class="s6">rgba(</span><span class="s1">0</span><span class="s8">,</span><span class="s5"> </span><span class="s1">0</span><span class="s8">,</span><span class="s5"> </span><span class="s1">0</span><span class="s8">,</span><span class="s5"> </span><span class="s1">0.03</span><span class="s6">)</span><span class="s8">;</span></p>
<p class="p3"><span class="s5"><span class="Apple-converted-space"> </span></span><span class="s1">backdrop-filter:</span><span class="s5"> </span><span class="s6">blur(</span><span class="s10">4px</span><span class="s6">)</span><span class="s8">;</span></p>
<p class="p4"><span class="s1"><span class="Apple-converted-space"> </span></span><span class="s8">}</span></p>
<p class="p5"><span class="s1"><span class="Apple-converted-space"> </span></span></p>
<p class="p6"><span class="s5"><span class="Apple-converted-space"> </span></span><span class="s1">/* Badge Styles */</span></p>
<p class="p4"><span class="s1"><span class="Apple-converted-space"> </span></span><span class="s4">.badge-auth-none</span><span class="s1"> </span><span class="s8">{</span><span class="s1"> </span><span class="s2">background-color:</span><span class="s1"> #dcfce7</span><span class="s8">;</span><span class="s1"> </span><span class="s2">color:</span><span class="s1"> #166534</span><span class="s8">;</span><span class="s1"> </span><span class="s8">}</span></p>
<p class="p4"><span class="s1"><span class="Apple-converted-space"> </span></span><span class="s4">.badge-auth-key</span><span class="s1"> </span><span class="s8">{</span><span class="s1"> </span><span class="s2">background-color:</span><span class="s1"> #fff7ed</span><span class="s8">;</span><span class="s1"> </span><span class="s2">color:</span><span class="s1"> #9a3412</span><span class="s8">;</span><span class="s1"> </span><span class="s8">}</span></p>
<p class="p4"><span class="s1"><span class="Apple-converted-space"> </span></span><span class="s4">.badge-auth-oauth</span><span class="s1"> </span><span class="s8">{</span><span class="s1"> </span><span class="s2">background-color:</span><span class="s1"> #eff6ff</span><span class="s8">;</span><span class="s1"> </span><span class="s2">color:</span><span class="s1"> #1e40af</span><span class="s8">;</span><span class="s1"> </span><span class="s8">}</span></p>
<p class="p1"><span class="s5"><span class="Apple-converted-space"> </span></span><span class="s3"></</span><span class="s1">style</span><span class="s3">></span></p>
<p class="p5"><span class="s7"></span><br></p>
<p class="p6"><span class="s5"><span class="Apple-converted-space"> </span></span><span class="s1"><!-- Placeholder Comments Required by Instructions --></span></p>
<p class="p6"><span class="s5"><span class="Apple-converted-space"> </span></span><span class="s1"><!-- Chosen Palette: Warm Neutral (Cream/Beige #fdfbf7) with Slate Text and semantic functional colors (Green/Orange/Blue) for data differentiation. --></span></p>
<p class="p5"><span class="s1"><span class="Apple-converted-space"> </span></span></p>
<p class="p6"><span class="s5"><span class="Apple-converted-space"> </span></span><span class="s1"><!-- Application Structure Plan:<span class="Apple-converted-space"> </span></span></p>
<p class="p6"><span class="s1"><span class="Apple-converted-space"> </span>1. Header & Context: Sets the stage, explains the purpose of the collection.</span></p>
<p class="p6"><span class="s1"><span class="Apple-converted-space"> </span>2. Analytical Dashboard: Two primary charts to visualize the makeup of the API list (Category Distribution & Authentication Types). This gives the user a high-level understanding before diving into rows of data.</span></p>
<p class="p6"><span class="s1"><span class="Apple-converted-space"> </span>3. The "Smart Sheet" (Interactive Grid): The core feature. Replaces a static Google Sheet with a searchable, filterable, and sortable table. This is the most efficient way to browse 100+ items.</span></p>
<p class="p6"><span class="s1"><span class="Apple-converted-space"> </span>4. Details Modal: Allows users to focus on one API without leaving the context of the list.<span class="Apple-converted-space"> </span></span></p>
<p class="p6"><span class="s1"><span class="Apple-converted-space"> </span>Rationale: This structure moves from "Macro" (Stats) to "Micro" (Table) to "Nano" (Details), following standard Information Architecture principles for data catalogs.</span></p>
<p class="p6"><span class="s1"><span class="Apple-converted-space"> </span>--></span></p>
<p class="p5"><span class="s7"></span><br></p>
<p class="p6"><span class="s5"><span class="Apple-converted-space"> </span></span><span class="s1"><!-- Visualization & Content Choices:</span></p>
<p class="p6"><span class="s1"><span class="Apple-converted-space"> </span>- Category Distribution (Doughnut Chart): Goal is to show diversity. chosen for compact representation of parts-to-whole.</span></p>
<p class="p6"><span class="s1"><span class="Apple-converted-space"> </span>- Auth Type Breakdown (Bar Chart): Goal is to inform developers about barrier to entry (No Auth vs API Key).</span></p>
<p class="p6"><span class="s1"><span class="Apple-converted-space"> </span>- Data Table: Goal is "Organize". HTML Table with JS filtering is superior to a static list for lookup tasks.</span></p>
<p class="p6"><span class="s1"><span class="Apple-converted-space"> </span>- Interaction: Click-to-copy URL, Row click for details.</span></p>
<p class="p6"><span class="s1"><span class="Apple-converted-space"> </span>- Libraries: Chart.js for canvas rendering. FontAwesome for icons.</span></p>
<p class="p6"><span class="s1"><span class="Apple-converted-space"> </span>--></span></p>
<p class="p5"><span class="s7"></span><br></p>
<p class="p6"><span class="s5"><span class="Apple-converted-space"> </span></span><span class="s1"><!-- CONFIRMATION: NO SVG graphics used. NO Mermaid JS used. --></span></p>
<p class="p1"><span class="s3"></</span><span class="s1">head</span><span class="s3">></span></p>
<p class="p2"><span class="s3"><</span><span class="s4">body</span><span class="s5"> </span><span class="s2">class</span><span class="s3">=</span><span class="s1">"antialiased selection:bg-indigo-100 selection:text-indigo-800"</span><span class="s3">></span></p>
<p class="p5"><span class="s7"></span><br></p>
<p class="p6"><span class="s5"><span class="Apple-converted-space"> </span></span><span class="s1"><!-- Header Section --></span></p>
<p class="p2"><span class="s5"><span class="Apple-converted-space"> </span></span><span class="s3"><</span><span class="s4">header</span><span class="s5"> </span><span class="s2">class</span><span class="s3">=</span><span class="s1">"bg-white border-b border-gray-200 sticky top-0 z-40 shadow-sm"</span><span class="s3">></span></p>
<p class="p2"><span class="s5"><span class="Apple-converted-space"> </span></span><span class="s3"><</span><span class="s4">div</span><span class="s5"> </span><span class="s2">class</span><span class="s3">=</span><span class="s1">"max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-4 flex flex-col md:flex-row justify-between items-center gap-4"</span><span class="s3">></span></p>
<p class="p2"><span class="s5"><span class="Apple-converted-space"> </span></span><span class="s3"><</span><span class="s4">div</span><span class="s5"> </span><span class="s2">class</span><span class="s3">=</span><span class="s1">"flex items-center gap-3"</span><span class="s3">></span></p>
<p class="p2"><span class="s5"><span class="Apple-converted-space"> </span></span><span class="s3"><</span><span class="s4">i</span><span class="s5"> </span><span class="s2">class</span><span class="s3">=</span><span class="s1">"fa-solid fa-layer-group text-indigo-600 text-2xl"</span><span class="s3">></</span><span class="s4">i</span><span class="s3">></span></p>
<p class="p4"><span class="s1"><span class="Apple-converted-space"> </span></span><span class="s3"><</span><span class="s4">div</span><span class="s3">></span></p>
<p class="p2"><span class="s5"><span class="Apple-converted-space"> </span></span><span class="s3"><</span><span class="s4">h1</span><span class="s5"> </span><span class="s2">class</span><span class="s3">=</span><span class="s1">"text-xl font-bold text-slate-800"</span><span class="s3">></span><span class="s5">API 資源探勘報告</span><span class="s3"></</span><span class="s4">h1</span><span class="s3">></span></p>
<p class="p4"><span class="s1"><span class="Apple-converted-space"> </span></span><span class="s3"><</span><span class="s4">p</span><span class="s1"> </span><span class="s2">class</span><span class="s3">=</span><span class="s6">"text-xs text-slate-500"</span><span class="s3">></span><span class="s1">免費公開 API 整合清單 (Top 80+ Selection)</span><span class="s3"></</span><span class="s4">p</span><span class="s3">></span></p>
<p class="p4"><span class="s1"><span class="Apple-converted-space"> </span></span><span class="s3"></</span><span class="s4">div</span><span class="s3">></span></p>
<p class="p4"><span class="s1"><span class="Apple-converted-space"> </span></span><span class="s3"></</span><span class="s4">div</span><span class="s3">></span></p>
<p class="p5"><span class="s1"><span class="Apple-converted-space"> </span></span></p>
<p class="p2"><span class="s5"><span class="Apple-converted-space"> </span></span><span class="s3"><</span><span class="s4">div</span><span class="s5"> </span><span class="s2">class</span><span class="s3">=</span><span class="s1">"flex gap-4 text-sm"</span><span class="s3">></span></p>
<p class="p2"><span class="s5"><span class="Apple-converted-space"> </span></span><span class="s3"><</span><span class="s4">div</span><span class="s5"> </span><span class="s2">class</span><span class="s3">=</span><span class="s1">"text-center px-4 py-2 bg-slate-50 rounded-lg"</span><span class="s3">></span></p>
<p class="p2"><span class="s5"><span class="Apple-converted-space"> </span></span><span class="s3"><</span><span class="s4">span</span><span class="s5"> </span><span class="s2">class</span><span class="s3">=</span><span class="s1">"block text-xl font-bold text-indigo-600"</span><span class="s5"> </span><span class="s2">id</span><span class="s3">=</span><span class="s1">"total-apis-count"</span><span class="s3">></span><span class="s5">0</span><span class="s3"></</span><span class="s4">span</span><span class="s3">></span></p>
<p class="p4"><span class="s1"><span class="Apple-converted-space"> </span></span><span class="s3"><</span><span class="s4">span</span><span class="s1"> </span><span class="s2">class</span><span class="s3">=</span><span class="s6">"text-xs text-slate-500"</span><span class="s3">></span><span class="s1">收錄 API</span><span class="s3"></</span><span class="s4">span</span><span class="s3">></span></p>
<p class="p4"><span class="s1"><span class="Apple-converted-space"> </span></span><span class="s3"></</span><span class="s4">div</span><span class="s3">></span></p>
<p class="p2"><span class="s5"><span class="Apple-converted-space"> </span></span><span class="s3"><</span><span class="s4">div</span><span class="s5"> </span><span class="s2">class</span><span class="s3">=</span><span class="s1">"text-center px-4 py-2 bg-slate-50 rounded-lg"</span><span class="s3">></span></p>
<p class="p2"><span class="s5"><span class="Apple-converted-space"> </span></span><span class="s3"><</span><span class="s4">span</span><span class="s5"> </span><span class="s2">class</span><span class="s3">=</span><span class="s1">"block text-xl font-bold text-emerald-600"</span><span class="s5"> </span><span class="s2">id</span><span class="s3">=</span><span class="s1">"free-apis-count"</span><span class="s3">></span><span class="s5">0</span><span class="s3"></</span><span class="s4">span</span><span class="s3">></span></p>
<p class="p4"><span class="s1"><span class="Apple-converted-space"> </span></span><span class="s3"><</span><span class="s4">span</span><span class="s1"> </span><span class="s2">class</span><span class="s3">=</span><span class="s6">"text-xs text-slate-500"</span><span class="s3">></span><span class="s1">完全免費</span><span class="s3"></</span><span class="s4">span</span><span class="s3">></span></p>
<p class="p4"><span class="s1"><span class="Apple-converted-space"> </span></span><span class="s3"></</span><span class="s4">div</span><span class="s3">></span></p>
<p class="p4"><span class="s1"><span class="Apple-converted-space"> </span></span><span class="s3"></</span><span class="s4">div</span><span class="s3">></span></p>
<p class="p4"><span class="s1"><span class="Apple-converted-space"> </span></span><span class="s3"></</span><span class="s4">div</span><span class="s3">></span></p>
<p class="p1"><span class="s5"><span class="Apple-converted-space"> </span></span><span class="s3"></</span><span class="s1">header</span><span class="s3">></span></p>
<p class="p5"><span class="s7"></span><br></p>
<p class="p2"><span class="s5"><span class="Apple-converted-space"> </span></span><span class="s3"><</span><span class="s4">main</span><span class="s5"> </span><span class="s2">class</span><span class="s3">=</span><span class="s1">"max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8 space-y-8"</span><span class="s3">></span></p>
<p class="p5"><span class="s7"></span><br></p>
<p class="p6"><span class="s5"><span class="Apple-converted-space"> </span></span><span class="s1"><!-- Introduction & Context --></span></p>
<p class="p2"><span class="s5"><span class="Apple-converted-space"> </span></span><span class="s3"><</span><span class="s4">section</span><span class="s5"> </span><span class="s2">class</span><span class="s3">=</span><span class="s1">"prose max-w-none text-slate-600"</span><span class="s3">></span></p>
<p class="p2"><span class="s5"><span class="Apple-converted-space"> </span></span><span class="s3"><</span><span class="s4">h2</span><span class="s5"> </span><span class="s2">class</span><span class="s3">=</span><span class="s1">"text-lg font-semibold text-slate-800 mb-2"</span><span class="s3">></span><span class="s5">關於此報告</span><span class="s3"></</span><span class="s4">h2</span><span class="s3">></span></p>
<p class="p4"><span class="s1"><span class="Apple-converted-space"> </span></span><span class="s3"><</span><span class="s4">p</span><span class="s1"> </span><span class="s2">class</span><span class="s3">=</span><span class="s6">"mb-4"</span><span class="s3">></span></p>
<p class="p4"><span class="s1"><span class="Apple-converted-space"> </span>本應用程式將「免費公共 API 資源報告」轉化為互動式儀表板。針對開發者、數據分析師與創意編碼者，我們整理了目前網路上最實用、穩定且易於串接的 API 接口。</span></p>
<p class="p4"><span class="s1"><span class="Apple-converted-space"> </span>與其閱讀冗長的靜態文件，您可以透過下方的視覺化圖表了解目前的 API 生態分佈，並使用「智慧清單」功能快速篩選出符合您專案需求的資源。</span></p>
<p class="p4"><span class="s1"><span class="Apple-converted-space"> </span>所有資料皆已結構化處理，方便您進行比較與查找。</span></p>
<p class="p4"><span class="s1"><span class="Apple-converted-space"> </span></span><span class="s3"></</span><span class="s4">p</span><span class="s3">></span></p>
<p class="p4"><span class="s1"><span class="Apple-converted-space"> </span></span><span class="s3"></</span><span class="s4">section</span><span class="s3">></span></p>
<p class="p5"><span class="s7"></span><br></p>
<p class="p6"><span class="s5"><span class="Apple-converted-space"> </span></span><span class="s1"><!-- Analytics Dashboard Section --></span></p>
<p class="p4"><span class="s1"><span class="Apple-converted-space"> </span></span><span class="s3"><</span><span class="s4">section</span><span class="s3">></span></p>
<p class="p4"><span class="s1"><span class="Apple-converted-space"> </span></span><span class="s3"><</span><span class="s4">div</span><span class="s1"> </span><span class="s2">class</span><span class="s3">=</span><span class="s6">"mb-4"</span><span class="s3">></span></p>
<p class="p2"><span class="s5"><span class="Apple-converted-space"> </span></span><span class="s3"><</span><span class="s4">h3</span><span class="s5"> </span><span class="s2">class</span><span class="s3">=</span><span class="s1">"text-lg font-bold text-slate-800 flex items-center gap-2"</span><span class="s3">></span></p>
<p class="p2"><span class="s5"><span class="Apple-converted-space"> </span></span><span class="s3"><</span><span class="s4">i</span><span class="s5"> </span><span class="s2">class</span><span class="s3">=</span><span class="s1">"fa-solid fa-chart-pie text-indigo-500"</span><span class="s3">></</span><span class="s4">i</span><span class="s3">></span><span class="s5"> API 生態數據分析</span></p>
<p class="p4"><span class="s1"><span class="Apple-converted-space"> </span></span><span class="s3"></</span><span class="s4">h3</span><span class="s3">></span></p>
<p class="p4"><span class="s1"><span class="Apple-converted-space"> </span></span><span class="s3"><</span><span class="s4">p</span><span class="s1"> </span><span class="s2">class</span><span class="s3">=</span><span class="s6">"text-sm text-slate-500"</span><span class="s3">></span><span class="s1">視覺化呈現各類型 API 的佔比與認證門檻，協助您快速掌握資源概況。</span><span class="s3"></</span><span class="s4">p</span><span class="s3">></span></p>
<p class="p4"><span class="s1"><span class="Apple-converted-space"> </span></span><span class="s3"></</span><span class="s4">div</span><span class="s3">></span></p>
<p class="p5"><span class="s7"></span><br></p>
<p class="p2"><span class="s5"><span class="Apple-converted-space"> </span></span><span class="s3"><</span><span class="s4">div</span><span class="s5"> </span><span class="s2">class</span><span class="s3">=</span><span class="s1">"grid grid-cols-1 md:grid-cols-2 gap-6"</span><span class="s3">></span></p>
<p class="p6"><span class="s5"><span class="Apple-converted-space"> </span></span><span class="s1"><!-- Category Chart --></span></p>
<p class="p2"><span class="s5"><span class="Apple-converted-space"> </span></span><span class="s3"><</span><span class="s4">div</span><span class="s5"> </span><span class="s2">class</span><span class="s3">=</span><span class="s1">"glass-panel p-4 rounded-xl"</span><span class="s3">></span></p>
<p class="p2"><span class="s5"><span class="Apple-converted-space"> </span></span><span class="s3"><</span><span class="s4">h4</span><span class="s5"> </span><span class="s2">class</span><span class="s3">=</span><span class="s1">"text-sm font-semibold text-slate-700 mb-4 text-center"</span><span class="s3">></span><span class="s5">資源類別分佈</span><span class="s3"></</span><span class="s4">h4</span><span class="s3">></span></p>
<p class="p4"><span class="s1"><span class="Apple-converted-space"> </span></span><span class="s3"><</span><span class="s4">div</span><span class="s1"> </span><span class="s2">class</span><span class="s3">=</span><span class="s6">"chart-container"</span><span class="s3">></span></p>
<p class="p4"><span class="s1"><span class="Apple-converted-space"> </span></span><span class="s3"><</span><span class="s4">canvas</span><span class="s1"> </span><span class="s2">id</span><span class="s3">=</span><span class="s6">"categoryChart"</span><span class="s3">></</span><span class="s4">canvas</span><span class="s3">></span></p>
<p class="p4"><span class="s1"><span class="Apple-converted-space"> </span></span><span class="s3"></</span><span class="s4">div</span><span class="s3">></span></p>
<p class="p2"><span class="s5"><span class="Apple-converted-space"> </span></span><span class="s3"><</span><span class="s4">div</span><span class="s5"> </span><span class="s2">class</span><span class="s3">=</span><span class="s1">"mt-2 text-xs text-center text-slate-400"</span><span class="s3">></span><span class="s5">顯示各領域 API 的數量佔比</span><span class="s3"></</span><span class="s4">div</span><span class="s3">></span></p>
<p class="p4"><span class="s1"><span class="Apple-converted-space"> </span></span><span class="s3"></</span><span class="s4">div</span><span class="s3">></span></p>
<p class="p5"><span class="s7"></span><br></p>
<p class="p6"><span class="s5"><span class="Apple-converted-space"> </span></span><span class="s1"><!-- Auth Chart --></span></p>
<p class="p2"><span class="s5"><span class="Apple-converted-space"> </span></span><span class="s3"><</span><span class="s4">div</span><span class="s5"> </span><span class="s2">class</span><span class="s3">=</span><span class="s1">"glass-panel p-4 rounded-xl"</span><span class="s3">></span></p>
<p class="p2"><span class="s5"><span class="Apple-converted-space"> </span></span><span class="s3"><</span><span class="s4">h4</span><span class="s5"> </span><span class="s2">class</span><span class="s3">=</span><span class="s1">"text-sm font-semibold text-slate-700 mb-4 text-center"</span><span class="s3">></span><span class="s5">認證機制統計</span><span class="s3"></</span><span class="s4">h4</span><span class="s3">></span></p>
<p class="p4"><span class="s1"><span class="Apple-converted-space"> </span></span><span class="s3"><</span><span class="s4">div</span><span class="s1"> </span><span class="s2">class</span><span class="s3">=</span><span class="s6">"chart-container"</span><span class="s3">></span></p>
<p class="p4"><span class="s1"><span class="Apple-converted-space"> </span></span><span class="s3"><</span><span class="s4">canvas</span><span class="s1"> </span><span class="s2">id</span><span class="s3">=</span><span class="s6">"authChart"</span><span class="s3">></</span><span class="s4">canvas</span><span class="s3">></span></p>
<p class="p4"><span class="s1"><span class="Apple-converted-space"> </span></span><span class="s3"></</span><span class="s4">div</span><span class="s3">></span></p>
<p class="p4"><span class="s1"><span class="Apple-converted-space"> </span></span><span class="s3"><</span><span class="s4">div</span><span class="s1"> </span><span class="s2">class</span><span class="s3">=</span><span class="s6">"mt-2 text-xs text-center text-slate-400"</span><span class="s3">></span><span class="s1">分析 API 的接入難度 (No Auth 最易接入)</span><span class="s3"></</span><span class="s4">div</span><span class="s3">></span></p>
<p class="p4"><span class="s1"><span class="Apple-converted-space"> </span></span><span class="s3"></</span><span class="s4">div</span><span class="s3">></span></p>
<p class="p4"><span class="s1"><span class="Apple-converted-space"> </span></span><span class="s3"></</span><span class="s4">div</span><span class="s3">></span></p>
<p class="p4"><span class="s1"><span class="Apple-converted-space"> </span></span><span class="s3"></</span><span class="s4">section</span><span class="s3">></span></p>
<p class="p5"><span class="s7"></span><br></p>
<p class="p6"><span class="s5"><span class="Apple-converted-space"> </span></span><span class="s1"><!-- Interactive Sheet Section --></span></p>
<p class="p2"><span class="s5"><span class="Apple-converted-space"> </span></span><span class="s3"><</span><span class="s4">section</span><span class="s5"> </span><span class="s2">id</span><span class="s3">=</span><span class="s1">"explorer"</span><span class="s5"> </span><span class="s2">class</span><span class="s3">=</span><span class="s1">"scroll-mt-20"</span><span class="s3">></span></p>
<p class="p2"><span class="s5"><span class="Apple-converted-space"> </span></span><span class="s3"><</span><span class="s4">div</span><span class="s5"> </span><span class="s2">class</span><span class="s3">=</span><span class="s1">"mb-4 flex flex-col md:flex-row justify-between items-end md:items-center gap-4"</span><span class="s3">></span></p>
<p class="p4"><span class="s1"><span class="Apple-converted-space"> </span></span><span class="s3"><</span><span class="s4">div</span><span class="s3">></span></p>
<p class="p2"><span class="s5"><span class="Apple-converted-space"> </span></span><span class="s3"><</span><span class="s4">h3</span><span class="s5"> </span><span class="s2">class</span><span class="s3">=</span><span class="s1">"text-lg font-bold text-slate-800 flex items-center gap-2"</span><span class="s3">></span></p>
<p class="p2"><span class="s5"><span class="Apple-converted-space"> </span></span><span class="s3"><</span><span class="s4">i</span><span class="s5"> </span><span class="s2">class</span><span class="s3">=</span><span class="s1">"fa-solid fa-table-list text-indigo-500"</span><span class="s3">></</span><span class="s4">i</span><span class="s3">></span><span class="s5"> 資源智慧清單</span></p>
<p class="p4"><span class="s1"><span class="Apple-converted-space"> </span></span><span class="s3"></</span><span class="s4">h3</span><span class="s3">></span></p>
<p class="p4"><span class="s1"><span class="Apple-converted-space"> </span></span><span class="s3"><</span><span class="s4">p</span><span class="s1"> </span><span class="s2">class</span><span class="s3">=</span><span class="s6">"text-sm text-slate-500"</span><span class="s3">></span><span class="s1">類似 Google 試算表的結構化檢視，支援即時搜尋與多維度篩選。</span><span class="s3"></</span><span class="s4">p</span><span class="s3">></span></p>
<p class="p4"><span class="s1"><span class="Apple-converted-space"> </span></span><span class="s3"></</span><span class="s4">div</span><span class="s3">></span></p>
<p class="p5"><span class="s1"><span class="Apple-converted-space"> </span></span></p>
<p class="p6"><span class="s5"><span class="Apple-converted-space"> </span></span><span class="s1"><!-- Controls --></span></p>
<p class="p2"><span class="s5"><span class="Apple-converted-space"> </span></span><span class="s3"><</span><span class="s4">div</span><span class="s5"> </span><span class="s2">class</span><span class="s3">=</span><span class="s1">"flex flex-col sm:flex-row gap-3 w-full md:w-auto"</span><span class="s3">></span></p>
<p class="p4"><span class="s1"><span class="Apple-converted-space"> </span></span><span class="s3"><</span><span class="s4">div</span><span class="s1"> </span><span class="s2">class</span><span class="s3">=</span><span class="s6">"relative"</span><span class="s3">></span></p>
<p class="p2"><span class="s5"><span class="Apple-converted-space"> </span></span><span class="s3"><</span><span class="s4">i</span><span class="s5"> </span><span class="s2">class</span><span class="s3">=</span><span class="s1">"fa-solid fa-search absolute left-3 top-3 text-slate-400"</span><span class="s3">></</span><span class="s4">i</span><span class="s3">></span></p>
<p class="p2"><span class="s5"><span class="Apple-converted-space"> </span></span><span class="s3"><</span><span class="s4">input</span><span class="s5"> </span><span class="s2">type</span><span class="s3">=</span><span class="s1">"text"</span><span class="s5"> </span><span class="s2">id</span><span class="s3">=</span><span class="s1">"searchInput"</span><span class="s5"> </span><span class="s2">placeholder</span><span class="s3">=</span><span class="s1">"搜尋名稱、描述或關鍵字..."</span><span class="s5"><span class="Apple-converted-space"> </span></span></p>
<p class="p2"><span class="s5"><span class="Apple-converted-space"> </span></span><span class="s2">class</span><span class="s3">=</span><span class="s1">"pl-10 pr-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 outline-none w-full sm:w-64 text-sm transition-shadow shadow-sm"</span><span class="s3">></span></p>
<p class="p4"><span class="s1"><span class="Apple-converted-space"> </span></span><span class="s3"></</span><span class="s4">div</span><span class="s3">></span></p>
<p class="p2"><span class="s5"><span class="Apple-converted-space"> </span></span><span class="s3"><</span><span class="s4">select</span><span class="s5"> </span><span class="s2">id</span><span class="s3">=</span><span class="s1">"categoryFilter"</span><span class="s5"> </span><span class="s2">class</span><span class="s3">=</span><span class="s1">"px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 text-sm bg-white shadow-sm cursor-pointer"</span><span class="s3">></span></p>
<p class="p4"><span class="s1"><span class="Apple-converted-space"> </span></span><span class="s3"><</span><span class="s4">option</span><span class="s1"> </span><span class="s2">value</span><span class="s3">=</span><span class="s6">"All"</span><span class="s3">></span><span class="s1">所有分類</span><span class="s3"></</span><span class="s4">option</span><span class="s3">></span></p>
<p class="p6"><span class="s5"><span class="Apple-converted-space"> </span></span><span class="s1"><!-- Options populated by JS --></span></p>
<p class="p4"><span class="s1"><span class="Apple-converted-space"> </span></span><span class="s3"></</span><span class="s4">select</span><span class="s3">></span></p>
<p class="p4"><span class="s1"><span class="Apple-converted-space"> </span></span><span class="s3"></</span><span class="s4">div</span><span class="s3">></span></p>
<p class="p4"><span class="s1"><span class="Apple-converted-space"> </span></span><span class="s3"></</span><span class="s4">div</span><span class="s3">></span></p>
<p class="p5"><span class="s7"></span><br></p>
<p class="p6"><span class="s5"><span class="Apple-converted-space"> </span></span><span class="s1"><!-- The Grid/Table --></span></p>
<p class="p2"><span class="s5"><span class="Apple-converted-space"> </span></span><span class="s3"><</span><span class="s4">div</span><span class="s5"> </span><span class="s2">class</span><span class="s3">=</span><span class="s1">"glass-panel rounded-xl overflow-hidden flex flex-col"</span><span class="s3">></span></p>
<p class="p2"><span class="s5"><span class="Apple-converted-space"> </span></span><span class="s3"><</span><span class="s4">div</span><span class="s5"> </span><span class="s2">class</span><span class="s3">=</span><span class="s1">"overflow-x-auto table-scroller"</span><span class="s3">></span></p>
<p class="p2"><span class="s5"><span class="Apple-converted-space"> </span></span><span class="s3"><</span><span class="s4">table</span><span class="s5"> </span><span class="s2">class</span><span class="s3">=</span><span class="s1">"w-full text-left text-sm whitespace-nowrap"</span><span class="s3">></span></p>
<p class="p2"><span class="s5"><span class="Apple-converted-space"> </span></span><span class="s3"><</span><span class="s4">thead</span><span class="s5"> </span><span class="s2">class</span><span class="s3">=</span><span class="s1">"bg-slate-100 border-b border-gray-200"</span><span class="s3">></span></p>
<p class="p4"><span class="s1"><span class="Apple-converted-space"> </span></span><span class="s3"><</span><span class="s4">tr</span><span class="s3">></span></p>
<p class="p2"><span class="s5"><span class="Apple-converted-space"> </span></span><span class="s3"><</span><span class="s4">th</span><span class="s5"> </span><span class="s2">class</span><span class="s3">=</span><span class="s1">"px-6 py-3 font-semibold text-slate-700 w-1/4"</span><span class="s3">></span><span class="s5">API 名稱</span><span class="s3"></</span><span class="s4">th</span><span class="s3">></span></p>
<p class="p2"><span class="s5"><span class="Apple-converted-space"> </span></span><span class="s3"><</span><span class="s4">th</span><span class="s5"> </span><span class="s2">class</span><span class="s3">=</span><span class="s1">"px-6 py-3 font-semibold text-slate-700 w-1/6"</span><span class="s3">></span><span class="s5">分類</span><span class="s3"></</span><span class="s4">th</span><span class="s3">></span></p>
<p class="p2"><span class="s5"><span class="Apple-converted-space"> </span></span><span class="s3"><</span><span class="s4">th</span><span class="s5"> </span><span class="s2">class</span><span class="s3">=</span><span class="s1">"px-6 py-3 font-semibold text-slate-700 w-1/3"</span><span class="s3">></span><span class="s5">功能簡述</span><span class="s3"></</span><span class="s4">th</span><span class="s3">></span></p>
<p class="p2"><span class="s5"><span class="Apple-converted-space"> </span></span><span class="s3"><</span><span class="s4">th</span><span class="s5"> </span><span class="s2">class</span><span class="s3">=</span><span class="s1">"px-6 py-3 font-semibold text-slate-700 w-1/12"</span><span class="s3">></span><span class="s5">認證</span><span class="s3"></</span><span class="s4">th</span><span class="s3">></span></p>
<p class="p2"><span class="s5"><span class="Apple-converted-space"> </span></span><span class="s3"><</span><span class="s4">th</span><span class="s5"> </span><span class="s2">class</span><span class="s3">=</span><span class="s1">"px-6 py-3 font-semibold text-slate-700 w-1/12"</span><span class="s3">></span><span class="s5">HTTPS</span><span class="s3"></</span><span class="s4">th</span><span class="s3">></span></p>
<p class="p2"><span class="s5"><span class="Apple-converted-space"> </span></span><span class="s3"><</span><span class="s4">th</span><span class="s5"> </span><span class="s2">class</span><span class="s3">=</span><span class="s1">"px-6 py-3 font-semibold text-slate-700 w-1/12 text-right"</span><span class="s3">></span><span class="s5">操作</span><span class="s3"></</span><span class="s4">th</span><span class="s3">></span></p>
<p class="p4"><span class="s1"><span class="Apple-converted-space"> </span></span><span class="s3"></</span><span class="s4">tr</span><span class="s3">></span></p>
<p class="p4"><span class="s1"><span class="Apple-converted-space"> </span></span><span class="s3"></</span><span class="s4">thead</span><span class="s3">></span></p>
<p class="p2"><span class="s5"><span class="Apple-converted-space"> </span></span><span class="s3"><</span><span class="s4">tbody</span><span class="s5"> </span><span class="s2">id</span><span class="s3">=</span><span class="s1">"apiTableBody"</span><span class="s5"> </span><span class="s2">class</span><span class="s3">=</span><span class="s1">"divide-y divide-gray-100 bg-white"</span><span class="s3">></span></p>
<p class="p6"><span class="s5"><span class="Apple-converted-space"> </span></span><span class="s1"><!-- Rows populated by JS --></span></p>
<p class="p4"><span class="s1"><span class="Apple-converted-space"> </span></span><span class="s3"></</span><span class="s4">tbody</span><span class="s3">></span></p>
<p class="p4"><span class="s1"><span class="Apple-converted-space"> </span></span><span class="s3"></</span><span class="s4">table</span><span class="s3">></span></p>
<p class="p4"><span class="s1"><span class="Apple-converted-space"> </span></span><span class="s3"></</span><span class="s4">div</span><span class="s3">></span></p>
<p class="p6"><span class="s5"><span class="Apple-converted-space"> </span></span><span class="s1"><!-- Pagination / Count Footer --></span></p>
<p class="p2"><span class="s5"><span class="Apple-converted-space"> </span></span><span class="s3"><</span><span class="s4">div</span><span class="s5"> </span><span class="s2">class</span><span class="s3">=</span><span class="s1">"px-6 py-3 bg-slate-50 border-t border-gray-200 text-xs text-slate-500 flex justify-between items-center"</span><span class="s3">></span></p>
<p class="p4"><span class="s1"><span class="Apple-converted-space"> </span></span><span class="s3"><</span><span class="s4">span</span><span class="s1"> </span><span class="s2">id</span><span class="s3">=</span><span class="s6">"showing-count"</span><span class="s3">></span><span class="s1">顯示 0 / 0 筆資料</span><span class="s3"></</span><span class="s4">span</span><span class="s3">></span></p>
<p class="p2"><span class="s5"><span class="Apple-converted-space"> </span></span><span class="s3"><</span><span class="s4">button</span><span class="s5"> </span><span class="s2">onclick</span><span class="s3">=</span><span class="s1">"exportCSV()"</span><span class="s5"> </span><span class="s2">class</span><span class="s3">=</span><span class="s1">"text-indigo-600 hover:text-indigo-800 font-medium transition-colors"</span><span class="s3">></span></p>
<p class="p4"><span class="s1"><span class="Apple-converted-space"> </span></span><span class="s3"><</span><span class="s4">i</span><span class="s1"> </span><span class="s2">class</span><span class="s3">=</span><span class="s6">"fa-solid fa-file-csv mr-1"</span><span class="s3">></</span><span class="s4">i</span><span class="s3">></span><span class="s1"> 下載 CSV</span></p>
<p class="p4"><span class="s1"><span class="Apple-converted-space"> </span></span><span class="s3"></</span><span class="s4">button</span><span class="s3">></span></p>
<p class="p4"><span class="s1"><span class="Apple-converted-space"> </span></span><span class="s3"></</span><span class="s4">div</span><span class="s3">></span></p>
<p class="p4"><span class="s1"><span class="Apple-converted-space"> </span></span><span class="s3"></</span><span class="s4">div</span><span class="s3">></span></p>
<p class="p4"><span class="s1"><span class="Apple-converted-space"> </span></span><span class="s3"></</span><span class="s4">section</span><span class="s3">></span></p>
<p class="p5"><span class="s7"></span><br></p>
<p class="p4"><span class="s1"><span class="Apple-converted-space"> </span></span><span class="s3"></</span><span class="s4">main</span><span class="s3">></span></p>
<p class="p5"><span class="s7"></span><br></p>
<p class="p6"><span class="s5"><span class="Apple-converted-space"> </span></span><span class="s1"><!-- Modal for Details --></span></p>
<p class="p2"><span class="s5"><span class="Apple-converted-space"> </span></span><span class="s3"><</span><span class="s4">div</span><span class="s5"> </span><span class="s2">id</span><span class="s3">=</span><span class="s1">"detailModal"</span><span class="s5"> </span><span class="s2">class</span><span class="s3">=</span><span class="s1">"fixed inset-0 z-50 hidden"</span><span class="s5"> </span><span class="s2">aria-labelledby</span><span class="s3">=</span><span class="s1">"modal-title"</span><span class="s5"> </span><span class="s2">role</span><span class="s3">=</span><span class="s1">"dialog"</span><span class="s5"> </span><span class="s2">aria-modal</span><span class="s3">=</span><span class="s1">"true"</span><span class="s3">></span></p>
<p class="p6"><span class="s5"><span class="Apple-converted-space"> </span></span><span class="s1"><!-- Backdrop --></span></p>
<p class="p2"><span class="s5"><span class="Apple-converted-space"> </span></span><span class="s3"><</span><span class="s4">div</span><span class="s5"> </span><span class="s2">class</span><span class="s3">=</span><span class="s1">"fixed inset-0 bg-gray-900 bg-opacity-50 transition-opacity backdrop-blur-sm"</span><span class="s5"> </span><span class="s2">onclick</span><span class="s3">=</span><span class="s1">"closeModal()"</span><span class="s3">></</span><span class="s4">div</span><span class="s3">></span></p>
<p class="p5"><span class="s1"><span class="Apple-converted-space"> </span></span></p>
<p class="p6"><span class="s5"><span class="Apple-converted-space"> </span></span><span class="s1"><!-- Panel --></span></p>
<p class="p2"><span class="s5"><span class="Apple-converted-space"> </span></span><span class="s3"><</span><span class="s4">div</span><span class="s5"> </span><span class="s2">class</span><span class="s3">=</span><span class="s1">"fixed inset-0 z-10 overflow-y-auto"</span><span class="s3">></span></p>
<p class="p2"><span class="s5"><span class="Apple-converted-space"> </span></span><span class="s3"><</span><span class="s4">div</span><span class="s5"> </span><span class="s2">class</span><span class="s3">=</span><span class="s1">"flex min-h-full items-center justify-center p-4 text-center sm:p-0"</span><span class="s3">></span></p>
<p class="p2"><span class="s5"><span class="Apple-converted-space"> </span></span><span class="s3"><</span><span class="s4">div</span><span class="s5"> </span><span class="s2">class</span><span class="s3">=</span><span class="s1">"relative transform overflow-hidden rounded-lg bg-white text-left shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-lg"</span><span class="s3">></span></p>
<p class="p2"><span class="s5"><span class="Apple-converted-space"> </span></span><span class="s3"><</span><span class="s4">div</span><span class="s5"> </span><span class="s2">class</span><span class="s3">=</span><span class="s1">"bg-white px-4 pb-4 pt-5 sm:p-6 sm:pb-4"</span><span class="s3">></span></p>
<p class="p4"><span class="s1"><span class="Apple-converted-space"> </span></span><span class="s3"><</span><span class="s4">div</span><span class="s1"> </span><span class="s2">class</span><span class="s3">=</span><span class="s6">"sm:flex sm:items-start"</span><span class="s3">></span></p>
<p class="p2"><span class="s5"><span class="Apple-converted-space"> </span></span><span class="s3"><</span><span class="s4">div</span><span class="s5"> </span><span class="s2">class</span><span class="s3">=</span><span class="s1">"mx-auto flex h-12 w-12 flex-shrink-0 items-center justify-center rounded-full bg-indigo-100 sm:mx-0 sm:h-10 sm:w-10"</span><span class="s3">></span></p>
<p class="p2"><span class="s5"><span class="Apple-converted-space"> </span></span><span class="s3"><</span><span class="s4">i</span><span class="s5"> </span><span class="s2">class</span><span class="s3">=</span><span class="s1">"fa-solid fa-bolt text-indigo-600"</span><span class="s3">></</span><span class="s4">i</span><span class="s3">></span></p>
<p class="p4"><span class="s1"><span class="Apple-converted-space"> </span></span><span class="s3"></</span><span class="s4">div</span><span class="s3">></span></p>
<p class="p2"><span class="s5"><span class="Apple-converted-space"> </span></span><span class="s3"><</span><span class="s4">div</span><span class="s5"> </span><span class="s2">class</span><span class="s3">=</span><span class="s1">"mt-3 text-center sm:ml-4 sm:mt-0 sm:text-left w-full"</span><span class="s3">></span></p>
<p class="p2"><span class="s5"><span class="Apple-converted-space"> </span></span><span class="s3"><</span><span class="s4">h3</span><span class="s5"> </span><span class="s2">class</span><span class="s3">=</span><span class="s1">"text-xl font-semibold leading-6 text-gray-900"</span><span class="s5"> </span><span class="s2">id</span><span class="s3">=</span><span class="s1">"modalTitle"</span><span class="s3">></span><span class="s5">API Name</span><span class="s3"></</span><span class="s4">h3</span><span class="s3">></span></p>
<p class="p4"><span class="s1"><span class="Apple-converted-space"> </span></span><span class="s3"><</span><span class="s4">div</span><span class="s1"> </span><span class="s2">class</span><span class="s3">=</span><span class="s6">"mt-1"</span><span class="s3">></span></p>
<p class="p2"><span class="s5"><span class="Apple-converted-space"> </span></span><span class="s3"><</span><span class="s4">span</span><span class="s5"> </span><span class="s2">id</span><span class="s3">=</span><span class="s1">"modalCategory"</span><span class="s5"> </span><span class="s2">class</span><span class="s3">=</span><span class="s1">"inline-flex items-center rounded-md bg-gray-50 px-2 py-1 text-xs font-medium text-gray-600 ring-1 ring-inset ring-gray-500/10"</span><span class="s3">></span><span class="s5">Category</span><span class="s3"></</span><span class="s4">span</span><span class="s3">></span></p>
<p class="p4"><span class="s1"><span class="Apple-converted-space"> </span></span><span class="s3"></</span><span class="s4">div</span><span class="s3">></span></p>
<p class="p4"><span class="s1"><span class="Apple-converted-space"> </span></span><span class="s3"><</span><span class="s4">div</span><span class="s1"> </span><span class="s2">class</span><span class="s3">=</span><span class="s6">"mt-4"</span><span class="s3">></span></p>
<p class="p4"><span class="s1"><span class="Apple-converted-space"> </span></span><span class="s3"><</span><span class="s4">p</span><span class="s1"> </span><span class="s2">class</span><span class="s3">=</span><span class="s6">"text-sm text-gray-500"</span><span class="s1"> </span><span class="s2">id</span><span class="s3">=</span><span class="s6">"modalDesc"</span><span class="s3">></span><span class="s1">Detailed description goes here.</span><span class="s3"></</span><span class="s4">p</span><span class="s3">></span></p>
<p class="p4"><span class="s1"><span class="Apple-converted-space"> </span></span><span class="s3"></</span><span class="s4">div</span><span class="s3">></span></p>
<p class="p5"><span class="s1"><span class="Apple-converted-space"> </span></span></p>
<p class="p2"><span class="s5"><span class="Apple-converted-space"> </span></span><span class="s3"><</span><span class="s4">div</span><span class="s5"> </span><span class="s2">class</span><span class="s3">=</span><span class="s1">"mt-6 grid grid-cols-2 gap-4 border-t border-gray-100 pt-4"</span><span class="s3">></span></p>
<p class="p4"><span class="s1"><span class="Apple-converted-space"> </span></span><span class="s3"><</span><span class="s4">div</span><span class="s3">></span></p>
<p class="p4"><span class="s1"><span class="Apple-converted-space"> </span></span><span class="s3"><</span><span class="s4">span</span><span class="s1"> </span><span class="s2">class</span><span class="s3">=</span><span class="s6">"text-xs text-gray-400 block uppercase"</span><span class="s3">></span><span class="s1">Auth</span><span class="s3"></</span><span class="s4">span</span><span class="s3">></span></p>
<p class="p4"><span class="s1"><span class="Apple-converted-space"> </span></span><span class="s3"><</span><span class="s4">span</span><span class="s1"> </span><span class="s2">id</span><span class="s3">=</span><span class="s6">"modalAuth"</span><span class="s1"> </span><span class="s2">class</span><span class="s3">=</span><span class="s6">"text-sm font-medium text-gray-800"</span><span class="s3">></span><span class="s1">None</span><span class="s3"></</span><span class="s4">span</span><span class="s3">></span></p>
<p class="p4"><span class="s1"><span class="Apple-converted-space"> </span></span><span class="s3"></</span><span class="s4">div</span><span class="s3">></span></p>
<p class="p4"><span class="s1"><span class="Apple-converted-space"> </span></span><span class="s3"><</span><span class="s4">div</span><span class="s3">></span></p>
<p class="p4"><span class="s1"><span class="Apple-converted-space"> </span></span><span class="s3"><</span><span class="s4">span</span><span class="s1"> </span><span class="s2">class</span><span class="s3">=</span><span class="s6">"text-xs text-gray-400 block uppercase"</span><span class="s3">></span><span class="s1">HTTPS</span><span class="s3"></</span><span class="s4">span</span><span class="s3">></span></p>
<p class="p2"><span class="s5"><span class="Apple-converted-space"> </span></span><span class="s3"><</span><span class="s4">span</span><span class="s5"> </span><span class="s2">id</span><span class="s3">=</span><span class="s1">"modalHttps"</span><span class="s5"> </span><span class="s2">class</span><span class="s3">=</span><span class="s1">"text-sm font-medium text-gray-800"</span><span class="s3">></span><span class="s5">Yes</span><span class="s3"></</span><span class="s4">span</span><span class="s3">></span></p>
<p class="p4"><span class="s1"><span class="Apple-converted-space"> </span></span><span class="s3"></</span><span class="s4">div</span><span class="s3">></span></p>
<p class="p4"><span class="s1"><span class="Apple-converted-space"> </span></span><span class="s3"><</span><span class="s4">div</span><span class="s3">></span></p>
<p class="p4"><span class="s1"><span class="Apple-converted-space"> </span></span><span class="s3"><</span><span class="s4">span</span><span class="s1"> </span><span class="s2">class</span><span class="s3">=</span><span class="s6">"text-xs text-gray-400 block uppercase"</span><span class="s3">></span><span class="s1">CORS</span><span class="s3"></</span><span class="s4">span</span><span class="s3">></span></p>
<p class="p4"><span class="s1"><span class="Apple-converted-space"> </span></span><span class="s3"><</span><span class="s4">span</span><span class="s1"> </span><span class="s2">id</span><span class="s3">=</span><span class="s6">"modalCors"</span><span class="s1"> </span><span class="s2">class</span><span class="s3">=</span><span class="s6">"text-sm font-medium text-gray-800"</span><span class="s3">></span><span class="s1">Unknown</span><span class="s3"></</span><span class="s4">span</span><span class="s3">></span></p>
<p class="p4"><span class="s1"><span class="Apple-converted-space"> </span></span><span class="s3"></</span><span class="s4">div</span><span class="s3">></span></p>
<p class="p4"><span class="s1"><span class="Apple-converted-space"> </span></span><span class="s3"></</span><span class="s4">div</span><span class="s3">></span></p>
<p class="p4"><span class="s1"><span class="Apple-converted-space"> </span></span><span class="s3"></</span><span class="s4">div</span><span class="s3">></span></p>
<p class="p4"><span class="s1"><span class="Apple-converted-space"> </span></span><span class="s3"></</span><span class="s4">div</span><span class="s3">></span></p>
<p class="p4"><span class="s1"><span class="Apple-converted-space"> </span></span><span class="s3"></</span><span class="s4">div</span><span class="s3">></span></p>
<p class="p2"><span class="s5"><span class="Apple-converted-space"> </span></span><span class="s3"><</span><span class="s4">div</span><span class="s5"> </span><span class="s2">class</span><span class="s3">=</span><span class="s1">"bg-gray-50 px-4 py-3 sm:flex sm:flex-row-reverse sm:px-6"</span><span class="s3">></span></p>
<p class="p2"><span class="s5"><span class="Apple-converted-space"> </span></span><span class="s3"><</span><span class="s4">a</span><span class="s5"> </span><span class="s2">id</span><span class="s3">=</span><span class="s1">"modalLink"</span><span class="s5"> </span><span class="s2">href</span><span class="s3">=</span><span class="s1">"#"</span><span class="s5"> </span><span class="s2">target</span><span class="s3">=</span><span class="s1">"_blank"</span><span class="s5"> </span><span class="s2">class</span><span class="s3">=</span><span class="s1">"inline-flex w-full justify-center rounded-md bg-indigo-600 px-3 py-2 text-sm font-semibold text-white shadow-sm hover:bg-indigo-500 sm:ml-3 sm:w-auto transition-colors"</span><span class="s3">></span></p>
<p class="p2"><span class="s5"><span class="Apple-converted-space"> </span></span><span class="s3"><</span><span class="s4">i</span><span class="s5"> </span><span class="s2">class</span><span class="s3">=</span><span class="s1">"fa-solid fa-external-link-alt mr-2 mt-1"</span><span class="s3">></</span><span class="s4">i</span><span class="s3">></span><span class="s5"> 前往文件</span></p>
<p class="p4"><span class="s1"><span class="Apple-converted-space"> </span></span><span class="s3"></</span><span class="s4">a</span><span class="s3">></span></p>
<p class="p2"><span class="s5"><span class="Apple-converted-space"> </span></span><span class="s3"><</span><span class="s4">button</span><span class="s5"> </span><span class="s2">type</span><span class="s3">=</span><span class="s1">"button"</span><span class="s5"> </span><span class="s2">class</span><span class="s3">=</span><span class="s1">"mt-3 inline-flex w-full justify-center rounded-md bg-white px-3 py-2 text-sm font-semibold text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 hover:bg-gray-50 sm:mt-0 sm:w-auto transition-colors"</span><span class="s5"> </span><span class="s2">onclick</span><span class="s3">=</span><span class="s1">"closeModal()"</span><span class="s3">></span></p>
<p class="p4"><span class="s1"><span class="Apple-converted-space"> </span>關閉</span></p>
<p class="p4"><span class="s1"><span class="Apple-converted-space"> </span></span><span class="s3"></</span><span class="s4">button</span><span class="s3">></span></p>
<p class="p4"><span class="s1"><span class="Apple-converted-space"> </span></span><span class="s3"></</span><span class="s4">div</span><span class="s3">></span></p>
<p class="p4"><span class="s1"><span class="Apple-converted-space"> </span></span><span class="s3"></</span><span class="s4">div</span><span class="s3">></span></p>
<p class="p4"><span class="s1"><span class="Apple-converted-space"> </span></span><span class="s3"></</span><span class="s4">div</span><span class="s3">></span></p>
<p class="p4"><span class="s1"><span class="Apple-converted-space"> </span></span><span class="s3"></</span><span class="s4">div</span><span class="s3">></span></p>
<p class="p4"><span class="s1"><span class="Apple-converted-space"> </span></span><span class="s3"></</span><span class="s4">div</span><span class="s3">></span></p>
<p class="p5"><span class="s7"></span><br></p>
<p class="p6"><span class="s5"><span class="Apple-converted-space"> </span></span><span class="s1"><!-- Notification Toast --></span></p>
<p class="p2"><span class="s5"><span class="Apple-converted-space"> </span></span><span class="s3"><</span><span class="s4">div</span><span class="s5"> </span><span class="s2">id</span><span class="s3">=</span><span class="s1">"toast"</span><span class="s5"> </span><span class="s2">class</span><span class="s3">=</span><span class="s1">"fixed bottom-5 right-5 bg-slate-800 text-white px-4 py-2 rounded shadow-lg transform translate-y-20 transition-transform duration-300 z-50 text-sm flex items-center gap-2"</span><span class="s3">></span></p>
<p class="p2"><span class="s5"><span class="Apple-converted-space"> </span></span><span class="s3"><</span><span class="s4">i</span><span class="s5"> </span><span class="s2">class</span><span class="s3">=</span><span class="s1">"fa-solid fa-check-circle text-green-400"</span><span class="s3">></</span><span class="s4">i</span><span class="s3">></span></p>
<p class="p4"><span class="s1"><span class="Apple-converted-space"> </span></span><span class="s3"><</span><span class="s4">span</span><span class="s3">></span><span class="s1">連結已複製</span><span class="s3"></</span><span class="s4">span</span><span class="s3">></span></p>
<p class="p4"><span class="s1"><span class="Apple-converted-space"> </span></span><span class="s3"></</span><span class="s4">div</span><span class="s3">></span></p>
<p class="p5"><span class="s7"></span><br></p>
<p class="p1"><span class="s5"><span class="Apple-converted-space"> </span></span><span class="s3"><</span><span class="s1">script</span><span class="s3">></span></p>
<p class="p6"><span class="s5"><span class="Apple-converted-space"> </span></span><span class="s1">// --- 1. Data Source (Simulated Source Report Content) ---</span></p>
<p class="p6"><span class="s5"><span class="Apple-converted-space"> </span></span><span class="s1">// Curated list of high-quality free APIs to simulate the "Top 100" request.</span></p>
<p class="p4"><span class="s1"><span class="Apple-converted-space"> </span></span><span class="s11">const</span><span class="s1"> apiData </span><span class="s8">=</span><span class="s1"> </span><span class="s8">[</span></p>
<p class="p8"><span class="s5"><span class="Apple-converted-space"> </span></span><span class="s8">{</span><span class="s5"> name</span><span class="s8">:</span><span class="s5"> </span><span class="s1">"Cat Facts"</span><span class="s8">,</span><span class="s5"> category</span><span class="s8">:</span><span class="s5"> </span><span class="s1">"Animals"</span><span class="s8">,</span><span class="s5"> auth</span><span class="s8">:</span><span class="s5"> </span><span class="s1">"No Auth"</span><span class="s8">,</span><span class="s5"> https</span><span class="s8">:</span><span class="s5"> </span><span class="s11">true</span><span class="s8">,</span><span class="s5"> cors</span><span class="s8">:</span><span class="s5"> </span><span class="s1">"Yes"</span><span class="s8">,</span><span class="s5"> desc</span><span class="s8">:</span><span class="s5"> </span><span class="s1">"每日隨機貓咪冷知識"</span><span class="s8">,</span><span class="s5"> link</span><span class="s8">:</span><span class="s5"> </span><span class="s1">"https://alexwohlbruck.github.io/cat-facts/"</span><span class="s5"> </span><span class="s8">},</span></p>
<p class="p8"><span class="s5"><span class="Apple-converted-space"> </span></span><span class="s8">{</span><span class="s5"> name</span><span class="s8">:</span><span class="s5"> </span><span class="s1">"Dog CEO"</span><span class="s8">,</span><span class="s5"> category</span><span class="s8">:</span><span class="s5"> </span><span class="s1">"Animals"</span><span class="s8">,</span><span class="s5"> auth</span><span class="s8">:</span><span class="s5"> </span><span class="s1">"No Auth"</span><span class="s8">,</span><span class="s5"> https</span><span class="s8">:</span><span class="s5"> </span><span class="s11">true</span><span class="s8">,</span><span class="s5"> cors</span><span class="s8">:</span><span class="s5"> </span><span class="s1">"Yes"</span><span class="s8">,</span><span class="s5"> desc</span><span class="s8">:</span><span class="s5"> </span><span class="s1">"根據品種獲取狗狗圖片集"</span><span class="s8">,</span><span class="s5"> link</span><span class="s8">:</span><span class="s5"> </span><span class="s1">"https://dog.ceo/dog-api/"</span><span class="s5"> </span><span class="s8">},</span></p>
<p class="p8"><span class="s5"><span class="Apple-converted-space"> </span></span><span class="s8">{</span><span class="s5"> name</span><span class="s8">:</span><span class="s5"> </span><span class="s1">"PetFinder"</span><span class="s8">,</span><span class="s5"> category</span><span class="s8">:</span><span class="s5"> </span><span class="s1">"Animals"</span><span class="s8">,</span><span class="s5"> auth</span><span class="s8">:</span><span class="s5"> </span><span class="s1">"ApiKey"</span><span class="s8">,</span><span class="s5"> https</span><span class="s8">:</span><span class="s5"> </span><span class="s11">true</span><span class="s8">,</span><span class="s5"> cors</span><span class="s8">:</span><span class="s5"> </span><span class="s1">"Yes"</span><span class="s8">,</span><span class="s5"> desc</span><span class="s8">:</span><span class="s5"> </span><span class="s1">"寵物領養數據庫 (需要申請)"</span><span class="s8">,</span><span class="s5"> link</span><span class="s8">:</span><span class="s5"> </span><span class="s1">"https://www.petfinder.com/developers/"</span><span class="s5"> </span><span class="s8">},</span></p>
<p class="p8"><span class="s5"><span class="Apple-converted-space"> </span></span><span class="s8">{</span><span class="s5"> name</span><span class="s8">:</span><span class="s5"> </span><span class="s1">"AnimeChan"</span><span class="s8">,</span><span class="s5"> category</span><span class="s8">:</span><span class="s5"> </span><span class="s1">"Anime"</span><span class="s8">,</span><span class="s5"> auth</span><span class="s8">:</span><span class="s5"> </span><span class="s1">"No Auth"</span><span class="s8">,</span><span class="s5"> https</span><span class="s8">:</span><span class="s5"> </span><span class="s11">true</span><span class="s8">,</span><span class="s5"> cors</span><span class="s8">:</span><span class="s5"> </span><span class="s1">"Yes"</span><span class="s8">,</span><span class="s5"> desc</span><span class="s8">:</span><span class="s5"> </span><span class="s1">"隨機動漫語錄"</span><span class="s8">,</span><span class="s5"> link</span><span class="s8">:</span><span class="s5"> </span><span class="s1">"https://github.com/rocktimsaikia/anime-chan"</span><span class="s5"> </span><span class="s8">},</span></p>
<p class="p8"><span class="s5"><span class="Apple-converted-space"> </span></span><span class="s8">{</span><span class="s5"> name</span><span class="s8">:</span><span class="s5"> </span><span class="s1">"Jikan"</span><span class="s8">,</span><span class="s5"> category</span><span class="s8">:</span><span class="s5"> </span><span class="s1">"Anime"</span><span class="s8">,</span><span class="s5"> auth</span><span class="s8">:</span><span class="s5"> </span><span class="s1">"No Auth"</span><span class="s8">,</span><span class="s5"> https</span><span class="s8">:</span><span class="s5"> </span><span class="s11">true</span><span class="s8">,</span><span class="s5"> cors</span><span class="s8">:</span><span class="s5"> </span><span class="s1">"Yes"</span><span class="s8">,</span><span class="s5"> desc</span><span class="s8">:</span><span class="s5"> </span><span class="s1">"非官方 MyAnimeList API"</span><span class="s8">,</span><span class="s5"> link</span><span class="s8">:</span><span class="s5"> </span><span class="s1">"https://jikan.moe/"</span><span class="s5"> </span><span class="s8">},</span></p>
<p class="p8"><span class="s5"><span class="Apple-converted-space"> </span></span><span class="s8">{</span><span class="s5"> name</span><span class="s8">:</span><span class="s5"> </span><span class="s1">"Studio Ghibli"</span><span class="s8">,</span><span class="s5"> category</span><span class="s8">:</span><span class="s5"> </span><span class="s1">"Anime"</span><span class="s8">,</span><span class="s5"> auth</span><span class="s8">:</span><span class="s5"> </span><span class="s1">"No Auth"</span><span class="s8">,</span><span class="s5"> https</span><span class="s8">:</span><span class="s5"> </span><span class="s11">true</span><span class="s8">,</span><span class="s5"> cors</span><span class="s8">:</span><span class="s5"> </span><span class="s1">"Yes"</span><span class="s8">,</span><span class="s5"> desc</span><span class="s8">:</span><span class="s5"> </span><span class="s1">"吉卜力工作室電影與角色資料"</span><span class="s8">,</span><span class="s5"> link</span><span class="s8">:</span><span class="s5"> </span><span class="s1">"https://ghibliapi.vercel.app/"</span><span class="s5"> </span><span class="s8">},</span></p>
<p class="p8"><span class="s5"><span class="Apple-converted-space"> </span></span><span class="s8">{</span><span class="s5"> name</span><span class="s8">:</span><span class="s5"> </span><span class="s1">"VirusTotal"</span><span class="s8">,</span><span class="s5"> category</span><span class="s8">:</span><span class="s5"> </span><span class="s1">"Security"</span><span class="s8">,</span><span class="s5"> auth</span><span class="s8">:</span><span class="s5"> </span><span class="s1">"ApiKey"</span><span class="s8">,</span><span class="s5"> https</span><span class="s8">:</span><span class="s5"> </span><span class="s11">true</span><span class="s8">,</span><span class="s5"> cors</span><span class="s8">:</span><span class="s5"> </span><span class="s1">"Unknown"</span><span class="s8">,</span><span class="s5"> desc</span><span class="s8">:</span><span class="s5"> </span><span class="s1">"分析可疑文件與網址"</span><span class="s8">,</span><span class="s5"> link</span><span class="s8">:</span><span class="s5"> </span><span class="s1">"https://www.virustotal.com/"</span><span class="s5"> </span><span class="s8">},</span></p>
<p class="p8"><span class="s5"><span class="Apple-converted-space"> </span></span><span class="s8">{</span><span class="s5"> name</span><span class="s8">:</span><span class="s5"> </span><span class="s1">"HaveIBeenPwned"</span><span class="s8">,</span><span class="s5"> category</span><span class="s8">:</span><span class="s5"> </span><span class="s1">"Security"</span><span class="s8">,</span><span class="s5"> auth</span><span class="s8">:</span><span class="s5"> </span><span class="s1">"ApiKey"</span><span class="s8">,</span><span class="s5"> https</span><span class="s8">:</span><span class="s5"> </span><span class="s11">true</span><span class="s8">,</span><span class="s5"> cors</span><span class="s8">:</span><span class="s5"> </span><span class="s1">"Yes"</span><span class="s8">,</span><span class="s5"> desc</span><span class="s8">:</span><span class="s5"> </span><span class="s1">"檢查 Email 是否在洩露名單"</span><span class="s8">,</span><span class="s5"> link</span><span class="s8">:</span><span class="s5"> </span><span class="s1">"https://haveibeenpwned.com/API/v3"</span><span class="s5"> </span><span class="s8">},</span></p>
<p class="p8"><span class="s5"><span class="Apple-converted-space"> </span></span><span class="s8">{</span><span class="s5"> name</span><span class="s8">:</span><span class="s5"> </span><span class="s1">"Open Library"</span><span class="s8">,</span><span class="s5"> category</span><span class="s8">:</span><span class="s5"> </span><span class="s1">"Books"</span><span class="s8">,</span><span class="s5"> auth</span><span class="s8">:</span><span class="s5"> </span><span class="s1">"No Auth"</span><span class="s8">,</span><span class="s5"> https</span><span class="s8">:</span><span class="s5"> </span><span class="s11">true</span><span class="s8">,</span><span class="s5"> cors</span><span class="s8">:</span><span class="s5"> </span><span class="s1">"Yes"</span><span class="s8">,</span><span class="s5"> desc</span><span class="s8">:</span><span class="s5"> </span><span class="s1">"圖書、封面與作者數據庫"</span><span class="s8">,</span><span class="s5"> link</span><span class="s8">:</span><span class="s5"> </span><span class="s1">"https://openlibrary.org/developers/api"</span><span class="s5"> </span><span class="s8">},</span></p>
<p class="p8"><span class="s5"><span class="Apple-converted-space"> </span></span><span class="s8">{</span><span class="s5"> name</span><span class="s8">:</span><span class="s5"> </span><span class="s1">"Gutendex"</span><span class="s8">,</span><span class="s5"> category</span><span class="s8">:</span><span class="s5"> </span><span class="s1">"Books"</span><span class="s8">,</span><span class="s5"> auth</span><span class="s8">:</span><span class="s5"> </span><span class="s1">"No Auth"</span><span class="s8">,</span><span class="s5"> https</span><span class="s8">:</span><span class="s5"> </span><span class="s11">true</span><span class="s8">,</span><span class="s5"> cors</span><span class="s8">:</span><span class="s5"> </span><span class="s1">"Yes"</span><span class="s8">,</span><span class="s5"> desc</span><span class="s8">:</span><span class="s5"> </span><span class="s1">"古騰堡計畫電子書索引"</span><span class="s8">,</span><span class="s5"> link</span><span class="s8">:</span><span class="s5"> </span><span class="s1">"https://gutendex.com/"</span><span class="s5"> </span><span class="s8">},</span></p>
<p class="p8"><span class="s5"><span class="Apple-converted-space"> </span></span><span class="s8">{</span><span class="s5"> name</span><span class="s8">:</span><span class="s5"> </span><span class="s1">"CoinGecko"</span><span class="s8">,</span><span class="s5"> category</span><span class="s8">:</span><span class="s5"> </span><span class="s1">"Finance"</span><span class="s8">,</span><span class="s5"> auth</span><span class="s8">:</span><span class="s5"> </span><span class="s1">"No Auth"</span><span class="s8">,</span><span class="s5"> https</span><span class="s8">:</span><span class="s5"> </span><span class="s11">true</span><span class="s8">,</span><span class="s5"> cors</span><span class="s8">:</span><span class="s5"> </span><span class="s1">"Yes"</span><span class="s8">,</span><span class="s5"> desc</span><span class="s8">:</span><span class="s5"> </span><span class="s1">"加密貨幣價格與市場數據"</span><span class="s8">,</span><span class="s5"> link</span><span class="s8">:</span><span class="s5"> </span><span class="s1">"https://www.coingecko.com/en/api"</span><span class="s5"> </span><span class="s8">},</span></p>
<p class="p8"><span class="s5"><span class="Apple-converted-space"> </span></span><span class="s8">{</span><span class="s5"> name</span><span class="s8">:</span><span class="s5"> </span><span class="s1">"Binance"</span><span class="s8">,</span><span class="s5"> category</span><span class="s8">:</span><span class="s5"> </span><span class="s1">"Finance"</span><span class="s8">,</span><span class="s5"> auth</span><span class="s8">:</span><span class="s5"> </span><span class="s1">"No Auth"</span><span class="s8">,</span><span class="s5"> https</span><span class="s8">:</span><span class="s5"> </span><span class="s11">true</span><span class="s8">,</span><span class="s5"> cors</span><span class="s8">:</span><span class="s5"> </span><span class="s1">"Yes"</span><span class="s8">,</span><span class="s5"> desc</span><span class="s8">:</span><span class="s5"> </span><span class="s1">"幣安交易所公共數據"</span><span class="s8">,</span><span class="s5"> link</span><span class="s8">:</span><span class="s5"> </span><span class="s1">"https://github.com/binance/binance-spot-api-docs"</span><span class="s5"> </span><span class="s8">},</span></p>
<p class="p8"><span class="s5"><span class="Apple-converted-space"> </span></span><span class="s8">{</span><span class="s5"> name</span><span class="s8">:</span><span class="s5"> </span><span class="s1">"ExchangeRate-API"</span><span class="s8">,</span><span class="s5"> category</span><span class="s8">:</span><span class="s5"> </span><span class="s1">"Finance"</span><span class="s8">,</span><span class="s5"> auth</span><span class="s8">:</span><span class="s5"> </span><span class="s1">"ApiKey"</span><span class="s8">,</span><span class="s5"> https</span><span class="s8">:</span><span class="s5"> </span><span class="s11">true</span><span class="s8">,</span><span class="s5"> cors</span><span class="s8">:</span><span class="s5"> </span><span class="s1">"Yes"</span><span class="s8">,</span><span class="s5"> desc</span><span class="s8">:</span><span class="s5"> </span><span class="s1">"法幣匯率轉換"</span><span class="s8">,</span><span class="s5"> link</span><span class="s8">:</span><span class="s5"> </span><span class="s1">"https://www.exchangerate-api.com/"</span><span class="s5"> </span><span class="s8">},</span></p>
<p class="p8"><span class="s5"><span class="Apple-converted-space"> </span></span><span class="s8">{</span><span class="s5"> name</span><span class="s8">:</span><span class="s5"> </span><span class="s1">"WallstreetBets"</span><span class="s8">,</span><span class="s5"> category</span><span class="s8">:</span><span class="s5"> </span><span class="s1">"Finance"</span><span class="s8">,</span><span class="s5"> auth</span><span class="s8">:</span><span class="s5"> </span><span class="s1">"No Auth"</span><span class="s8">,</span><span class="s5"> https</span><span class="s8">:</span><span class="s5"> </span><span class="s11">true</span><span class="s8">,</span><span class="s5"> cors</span><span class="s8">:</span><span class="s5"> </span><span class="s1">"Yes"</span><span class="s8">,</span><span class="s5"> desc</span><span class="s8">:</span><span class="s5"> </span><span class="s1">"WSB Reddit 討論趨勢"</span><span class="s8">,</span><span class="s5"> link</span><span class="s8">:</span><span class="s5"> </span><span class="s1">"https://wsb-api.onrender.com/"</span><span class="s5"> </span><span class="s8">},</span></p>
<p class="p8"><span class="s5"><span class="Apple-converted-space"> </span></span><span class="s8">{</span><span class="s5"> name</span><span class="s8">:</span><span class="s5"> </span><span class="s1">"Public Holidays"</span><span class="s8">,</span><span class="s5"> category</span><span class="s8">:</span><span class="s5"> </span><span class="s1">"Calendar"</span><span class="s8">,</span><span class="s5"> auth</span><span class="s8">:</span><span class="s5"> </span><span class="s1">"No Auth"</span><span class="s8">,</span><span class="s5"> https</span><span class="s8">:</span><span class="s5"> </span><span class="s11">true</span><span class="s8">,</span><span class="s5"> cors</span><span class="s8">:</span><span class="s5"> </span><span class="s1">"Yes"</span><span class="s8">,</span><span class="s5"> desc</span><span class="s8">:</span><span class="s5"> </span><span class="s1">"全球各國國定假日查詢"</span><span class="s8">,</span><span class="s5"> link</span><span class="s8">:</span><span class="s5"> </span><span class="s1">"https://date.nager.at/"</span><span class="s5"> </span><span class="s8">},</span></p>
<p class="p8"><span class="s5"><span class="Apple-converted-space"> </span></span><span class="s8">{</span><span class="s5"> name</span><span class="s8">:</span><span class="s5"> </span><span class="s1">"Google Fonts"</span><span class="s8">,</span><span class="s5"> category</span><span class="s8">:</span><span class="s5"> </span><span class="s1">"Design"</span><span class="s8">,</span><span class="s5"> auth</span><span class="s8">:</span><span class="s5"> </span><span class="s1">"ApiKey"</span><span class="s8">,</span><span class="s5"> https</span><span class="s8">:</span><span class="s5"> </span><span class="s11">true</span><span class="s8">,</span><span class="s5"> cors</span><span class="s8">:</span><span class="s5"> </span><span class="s1">"Yes"</span><span class="s8">,</span><span class="s5"> desc</span><span class="s8">:</span><span class="s5"> </span><span class="s1">"Google 字體元數據"</span><span class="s8">,</span><span class="s5"> link</span><span class="s8">:</span><span class="s5"> </span><span class="s1">"https://developers.google.com/fonts/docs/developer_api"</span><span class="s5"> </span><span class="s8">},</span></p>
<p class="p8"><span class="s5"><span class="Apple-converted-space"> </span></span><span class="s8">{</span><span class="s5"> name</span><span class="s8">:</span><span class="s5"> </span><span class="s1">"Unsplash"</span><span class="s8">,</span><span class="s5"> category</span><span class="s8">:</span><span class="s5"> </span><span class="s1">"Photography"</span><span class="s8">,</span><span class="s5"> auth</span><span class="s8">:</span><span class="s5"> </span><span class="s1">"ApiKey"</span><span class="s8">,</span><span class="s5"> https</span><span class="s8">:</span><span class="s5"> </span><span class="s11">true</span><span class="s8">,</span><span class="s5"> cors</span><span class="s8">:</span><span class="s5"> </span><span class="s1">"Yes"</span><span class="s8">,</span><span class="s5"> desc</span><span class="s8">:</span><span class="s5"> </span><span class="s1">"高畫質免版權圖片搜尋"</span><span class="s8">,</span><span class="s5"> link</span><span class="s8">:</span><span class="s5"> </span><span class="s1">"https://unsplash.com/developers"</span><span class="s5"> </span><span class="s8">},</span></p>
<p class="p8"><span class="s5"><span class="Apple-converted-space"> </span></span><span class="s8">{</span><span class="s5"> name</span><span class="s8">:</span><span class="s5"> </span><span class="s1">"JSONPlaceholder"</span><span class="s8">,</span><span class="s5"> category</span><span class="s8">:</span><span class="s5"> </span><span class="s1">"Development"</span><span class="s8">,</span><span class="s5"> auth</span><span class="s8">:</span><span class="s5"> </span><span class="s1">"No Auth"</span><span class="s8">,</span><span class="s5"> https</span><span class="s8">:</span><span class="s5"> </span><span class="s11">true</span><span class="s8">,</span><span class="s5"> cors</span><span class="s8">:</span><span class="s5"> </span><span class="s1">"Yes"</span><span class="s8">,</span><span class="s5"> desc</span><span class="s8">:</span><span class="s5"> </span><span class="s1">"測試用的假資料 (Posts, Users)"</span><span class="s8">,</span><span class="s5"> link</span><span class="s8">:</span><span class="s5"> </span><span class="s1">"https://jsonplaceholder.typicode.com/"</span><span class="s5"> </span><span class="s8">},</span></p>
<p class="p8"><span class="s5"><span class="Apple-converted-space"> </span></span><span class="s8">{</span><span class="s5"> name</span><span class="s8">:</span><span class="s5"> </span><span class="s1">"ReqRes"</span><span class="s8">,</span><span class="s5"> category</span><span class="s8">:</span><span class="s5"> </span><span class="s1">"Development"</span><span class="s8">,</span><span class="s5"> auth</span><span class="s8">:</span><span class="s5"> </span><span class="s1">"No Auth"</span><span class="s8">,</span><span class="s5"> https</span><span class="s8">:</span><span class="s5"> </span><span class="s11">true</span><span class="s8">,</span><span class="s5"> cors</span><span class="s8">:</span><span class="s5"> </span><span class="s1">"Yes"</span><span class="s8">,</span><span class="s5"> desc</span><span class="s8">:</span><span class="s5"> </span><span class="s1">"模擬 REST API 回應"</span><span class="s8">,</span><span class="s5"> link</span><span class="s8">:</span><span class="s5"> </span><span class="s1">"https://reqres.in/"</span><span class="s5"> </span><span class="s8">},</span></p>
<p class="p8"><span class="s5"><span class="Apple-converted-space"> </span></span><span class="s8">{</span><span class="s5"> name</span><span class="s8">:</span><span class="s5"> </span><span class="s1">"HttpBin"</span><span class="s8">,</span><span class="s5"> category</span><span class="s8">:</span><span class="s5"> </span><span class="s1">"Development"</span><span class="s8">,</span><span class="s5"> auth</span><span class="s8">:</span><span class="s5"> </span><span class="s1">"No Auth"</span><span class="s8">,</span><span class="s5"> https</span><span class="s8">:</span><span class="s5"> </span><span class="s11">true</span><span class="s8">,</span><span class="s5"> cors</span><span class="s8">:</span><span class="s5"> </span><span class="s1">"Yes"</span><span class="s8">,</span><span class="s5"> desc</span><span class="s8">:</span><span class="s5"> </span><span class="s1">"HTTP 請求與回應測試工具"</span><span class="s8">,</span><span class="s5"> link</span><span class="s8">:</span><span class="s5"> </span><span class="s1">"https://httpbin.org/"</span><span class="s5"> </span><span class="s8">},</span></p>
<p class="p8"><span class="s5"><span class="Apple-converted-space"> </span></span><span class="s8">{</span><span class="s5"> name</span><span class="s8">:</span><span class="s5"> </span><span class="s1">"IPify"</span><span class="s8">,</span><span class="s5"> category</span><span class="s8">:</span><span class="s5"> </span><span class="s1">"Development"</span><span class="s8">,</span><span class="s5"> auth</span><span class="s8">:</span><span class="s5"> </span><span class="s1">"No Auth"</span><span class="s8">,</span><span class="s5"> https</span><span class="s8">:</span><span class="s5"> </span><span class="s11">true</span><span class="s8">,</span><span class="s5"> cors</span><span class="s8">:</span><span class="s5"> </span><span class="s1">"Yes"</span><span class="s8">,</span><span class="s5"> desc</span><span class="s8">:</span><span class="s5"> </span><span class="s1">"簡單獲取公共 IP 地址"</span><span class="s8">,</span><span class="s5"> link</span><span class="s8">:</span><span class="s5"> </span><span class="s1">"https://www.ipify.org/"</span><span class="s5"> </span><span class="s8">},</span></p>
<p class="p8"><span class="s5"><span class="Apple-converted-space"> </span></span><span class="s8">{</span><span class="s5"> name</span><span class="s8">:</span><span class="s5"> </span><span class="s1">"Genderize.io"</span><span class="s8">,</span><span class="s5"> category</span><span class="s8">:</span><span class="s5"> </span><span class="s1">"Demographics"</span><span class="s8">,</span><span class="s5"> auth</span><span class="s8">:</span><span class="s5"> </span><span class="s1">"No Auth"</span><span class="s8">,</span><span class="s5"> https</span><span class="s8">:</span><span class="s5"> </span><span class="s11">true</span><span class="s8">,</span><span class="s5"> cors</span><span class="s8">:</span><span class="s5"> </span><span class="s1">"Yes"</span><span class="s8">,</span><span class="s5"> desc</span><span class="s8">:</span><span class="s5"> </span><span class="s1">"根據名字預測性別"</span><span class="s8">,</span><span class="s5"> link</span><span class="s8">:</span><span class="s5"> </span><span class="s1">"https://genderize.io/"</span><span class="s5"> </span><span class="s8">},</span></p>
<p class="p8"><span class="s5"><span class="Apple-converted-space"> </span></span><span class="s8">{</span><span class="s5"> name</span><span class="s8">:</span><span class="s5"> </span><span class="s1">"Agify.io"</span><span class="s8">,</span><span class="s5"> category</span><span class="s8">:</span><span class="s5"> </span><span class="s1">"Demographics"</span><span class="s8">,</span><span class="s5"> auth</span><span class="s8">:</span><span class="s5"> </span><span class="s1">"No Auth"</span><span class="s8">,</span><span class="s5"> https</span><span class="s8">:</span><span class="s5"> </span><span class="s11">true</span><span class="s8">,</span><span class="s5"> cors</span><span class="s8">:</span><span class="s5"> </span><span class="s1">"Yes"</span><span class="s8">,</span><span class="s5"> desc</span><span class="s8">:</span><span class="s5"> </span><span class="s1">"根據名字預測年齡"</span><span class="s8">,</span><span class="s5"> link</span><span class="s8">:</span><span class="s5"> </span><span class="s1">"https://agify.io/"</span><span class="s5"> </span><span class="s8">},</span></p>
<p class="p8"><span class="s5"><span class="Apple-converted-space"> </span></span><span class="s8">{</span><span class="s5"> name</span><span class="s8">:</span><span class="s5"> </span><span class="s1">"OpenWeather"</span><span class="s8">,</span><span class="s5"> category</span><span class="s8">:</span><span class="s5"> </span><span class="s1">"Weather"</span><span class="s8">,</span><span class="s5"> auth</span><span class="s8">:</span><span class="s5"> </span><span class="s1">"ApiKey"</span><span class="s8">,</span><span class="s5"> https</span><span class="s8">:</span><span class="s5"> </span><span class="s11">true</span><span class="s8">,</span><span class="s5"> cors</span><span class="s8">:</span><span class="s5"> </span><span class="s1">"Yes"</span><span class="s8">,</span><span class="s5"> desc</span><span class="s8">:</span><span class="s5"> </span><span class="s1">"全球天氣預報與歷史數據"</span><span class="s8">,</span><span class="s5"> link</span><span class="s8">:</span><span class="s5"> </span><span class="s1">"https://openweathermap.org/api"</span><span class="s5"> </span><span class="s8">},</span></p>
<p class="p8"><span class="s5"><span class="Apple-converted-space"> </span></span><span class="s8">{</span><span class="s5"> name</span><span class="s8">:</span><span class="s5"> </span><span class="s1">"7Timer!"</span><span class="s8">,</span><span class="s5"> category</span><span class="s8">:</span><span class="s5"> </span><span class="s1">"Weather"</span><span class="s8">,</span><span class="s5"> auth</span><span class="s8">:</span><span class="s5"> </span><span class="s1">"No Auth"</span><span class="s8">,</span><span class="s5"> https</span><span class="s8">:</span><span class="s5"> </span><span class="s11">true</span><span class="s8">,</span><span class="s5"> cors</span><span class="s8">:</span><span class="s5"> </span><span class="s1">"Yes"</span><span class="s8">,</span><span class="s5"> desc</span><span class="s8">:</span><span class="s5"> </span><span class="s1">"天文氣象預報"</span><span class="s8">,</span><span class="s5"> link</span><span class="s8">:</span><span class="s5"> </span><span class="s1">"http://www.7timer.info/doc.php"</span><span class="s5"> </span><span class="s8">},</span></p>
<p class="p8"><span class="s5"><span class="Apple-converted-space"> </span></span><span class="s8">{</span><span class="s5"> name</span><span class="s8">:</span><span class="s5"> </span><span class="s1">"NASA"</span><span class="s8">,</span><span class="s5"> category</span><span class="s8">:</span><span class="s5"> </span><span class="s1">"Science"</span><span class="s8">,</span><span class="s5"> auth</span><span class="s8">:</span><span class="s5"> </span><span class="s1">"ApiKey"</span><span class="s8">,</span><span class="s5"> https</span><span class="s8">:</span><span class="s5"> </span><span class="s11">true</span><span class="s8">,</span><span class="s5"> cors</span><span class="s8">:</span><span class="s5"> </span><span class="s1">"Yes"</span><span class="s8">,</span><span class="s5"> desc</span><span class="s8">:</span><span class="s5"> </span><span class="s1">"天文圖片、小行星數據等"</span><span class="s8">,</span><span class="s5"> link</span><span class="s8">:</span><span class="s5"> </span><span class="s1">"https://api.nasa.gov/"</span><span class="s5"> </span><span class="s8">},</span></p>
<p class="p8"><span class="s5"><span class="Apple-converted-space"> </span></span><span class="s8">{</span><span class="s5"> name</span><span class="s8">:</span><span class="s5"> </span><span class="s1">"SpaceX"</span><span class="s8">,</span><span class="s5"> category</span><span class="s8">:</span><span class="s5"> </span><span class="s1">"Science"</span><span class="s8">,</span><span class="s5"> auth</span><span class="s8">:</span><span class="s5"> </span><span class="s1">"No Auth"</span><span class="s8">,</span><span class="s5"> https</span><span class="s8">:</span><span class="s5"> </span><span class="s11">true</span><span class="s8">,</span><span class="s5"> cors</span><span class="s8">:</span><span class="s5"> </span><span class="s1">"Yes"</span><span class="s8">,</span><span class="s5"> desc</span><span class="s8">:</span><span class="s5"> </span><span class="s1">"SpaceX 發射任務數據"</span><span class="s8">,</span><span class="s5"> link</span><span class="s8">:</span><span class="s5"> </span><span class="s1">"https://github.com/r-spacex/SpaceX-API"</span><span class="s5"> </span><span class="s8">},</span></p>
<p class="p8"><span class="s5"><span class="Apple-converted-space"> </span></span><span class="s8">{</span><span class="s5"> name</span><span class="s8">:</span><span class="s5"> </span><span class="s1">"Rest Countries"</span><span class="s8">,</span><span class="s5"> category</span><span class="s8">:</span><span class="s5"> </span><span class="s1">"Geocoding"</span><span class="s8">,</span><span class="s5"> auth</span><span class="s8">:</span><span class="s5"> </span><span class="s1">"No Auth"</span><span class="s8">,</span><span class="s5"> https</span><span class="s8">:</span><span class="s5"> </span><span class="s11">true</span><span class="s8">,</span><span class="s5"> cors</span><span class="s8">:</span><span class="s5"> </span><span class="s1">"Yes"</span><span class="s8">,</span><span class="s5"> desc</span><span class="s8">:</span><span class="s5"> </span><span class="s1">"國家資訊 (人口、貨幣、國旗)"</span><span class="s8">,</span><span class="s5"> link</span><span class="s8">:</span><span class="s5"> </span><span class="s1">"https://restcountries.com/"</span><span class="s5"> </span><span class="s8">},</span></p>
<p class="p8"><span class="s5"><span class="Apple-converted-space"> </span></span><span class="s8">{</span><span class="s5"> name</span><span class="s8">:</span><span class="s5"> </span><span class="s1">"Zipcopotamus"</span><span class="s8">,</span><span class="s5"> category</span><span class="s8">:</span><span class="s5"> </span><span class="s1">"Geocoding"</span><span class="s8">,</span><span class="s5"> auth</span><span class="s8">:</span><span class="s5"> </span><span class="s1">"No Auth"</span><span class="s8">,</span><span class="s5"> https</span><span class="s8">:</span><span class="s5"> </span><span class="s11">true</span><span class="s8">,</span><span class="s5"> cors</span><span class="s8">:</span><span class="s5"> </span><span class="s1">"Yes"</span><span class="s8">,</span><span class="s5"> desc</span><span class="s8">:</span><span class="s5"> </span><span class="s1">"郵遞區號查詢城市"</span><span class="s8">,</span><span class="s5"> link</span><span class="s8">:</span><span class="s5"> </span><span class="s1">"https://www.zippopotam.us/"</span><span class="s5"> </span><span class="s8">},</span></p>
<p class="p8"><span class="s5"><span class="Apple-converted-space"> </span></span><span class="s8">{</span><span class="s5"> name</span><span class="s8">:</span><span class="s5"> </span><span class="s1">"Spotify"</span><span class="s8">,</span><span class="s5"> category</span><span class="s8">:</span><span class="s5"> </span><span class="s1">"Music"</span><span class="s8">,</span><span class="s5"> auth</span><span class="s8">:</span><span class="s5"> </span><span class="s1">"OAuth"</span><span class="s8">,</span><span class="s5"> https</span><span class="s8">:</span><span class="s5"> </span><span class="s11">true</span><span class="s8">,</span><span class="s5"> cors</span><span class="s8">:</span><span class="s5"> </span><span class="s1">"Yes"</span><span class="s8">,</span><span class="s5"> desc</span><span class="s8">:</span><span class="s5"> </span><span class="s1">"音樂元數據、播放清單"</span><span class="s8">,</span><span class="s5"> link</span><span class="s8">:</span><span class="s5"> </span><span class="s1">"https://developer.spotify.com/documentation/web-api/"</span><span class="s5"> </span><span class="s8">},</span></p>
<p class="p8"><span class="s5"><span class="Apple-converted-space"> </span></span><span class="s8">{</span><span class="s5"> name</span><span class="s8">:</span><span class="s5"> </span><span class="s1">"Last.fm"</span><span class="s8">,</span><span class="s5"> category</span><span class="s8">:</span><span class="s5"> </span><span class="s1">"Music"</span><span class="s8">,</span><span class="s5"> auth</span><span class="s8">:</span><span class="s5"> </span><span class="s1">"ApiKey"</span><span class="s8">,</span><span class="s5"> https</span><span class="s8">:</span><span class="s5"> </span><span class="s11">true</span><span class="s8">,</span><span class="s5"> cors</span><span class="s8">:</span><span class="s5"> </span><span class="s1">"Yes"</span><span class="s8">,</span><span class="s5"> desc</span><span class="s8">:</span><span class="s5"> </span><span class="s1">"音樂資料庫與聽歌紀錄"</span><span class="s8">,</span><span class="s5"> link</span><span class="s8">:</span><span class="s5"> </span><span class="s1">"https://www.last.fm/api"</span><span class="s5"> </span><span class="s8">},</span></p>
<p class="p8"><span class="s5"><span class="Apple-converted-space"> </span></span><span class="s8">{</span><span class="s5"> name</span><span class="s8">:</span><span class="s5"> </span><span class="s1">"Lyrics.ovh"</span><span class="s8">,</span><span class="s5"> category</span><span class="s8">:</span><span class="s5"> </span><span class="s1">"Music"</span><span class="s8">,</span><span class="s5"> auth</span><span class="s8">:</span><span class="s5"> </span><span class="s1">"No Auth"</span><span class="s8">,</span><span class="s5"> https</span><span class="s8">:</span><span class="s5"> </span><span class="s11">true</span><span class="s8">,</span><span class="s5"> cors</span><span class="s8">:</span><span class="s5"> </span><span class="s1">"Yes"</span><span class="s8">,</span><span class="s5"> desc</span><span class="s8">:</span><span class="s5"> </span><span class="s1">"簡單歌詞查詢"</span><span class="s8">,</span><span class="s5"> link</span><span class="s8">:</span><span class="s5"> </span><span class="s1">"https://lyrics.ovh/"</span><span class="s5"> </span><span class="s8">},</span></p>
<p class="p8"><span class="s5"><span class="Apple-converted-space"> </span></span><span class="s8">{</span><span class="s5"> name</span><span class="s8">:</span><span class="s5"> </span><span class="s1">"OpenFoodFacts"</span><span class="s8">,</span><span class="s5"> category</span><span class="s8">:</span><span class="s5"> </span><span class="s1">"Food"</span><span class="s8">,</span><span class="s5"> auth</span><span class="s8">:</span><span class="s5"> </span><span class="s1">"No Auth"</span><span class="s8">,</span><span class="s5"> https</span><span class="s8">:</span><span class="s5"> </span><span class="s11">true</span><span class="s8">,</span><span class="s5"> cors</span><span class="s8">:</span><span class="s5"> </span><span class="s1">"Yes"</span><span class="s8">,</span><span class="s5"> desc</span><span class="s8">:</span><span class="s5"> </span><span class="s1">"全球食品成分數據庫"</span><span class="s8">,</span><span class="s5"> link</span><span class="s8">:</span><span class="s5"> </span><span class="s1">"https://world.openfoodfacts.org/data"</span><span class="s5"> </span><span class="s8">},</span></p>
<p class="p8"><span class="s5"><span class="Apple-converted-space"> </span></span><span class="s8">{</span><span class="s5"> name</span><span class="s8">:</span><span class="s5"> </span><span class="s1">"TheCocktailDB"</span><span class="s8">,</span><span class="s5"> category</span><span class="s8">:</span><span class="s5"> </span><span class="s1">"Food"</span><span class="s8">,</span><span class="s5"> auth</span><span class="s8">:</span><span class="s5"> </span><span class="s1">"ApiKey"</span><span class="s8">,</span><span class="s5"> https</span><span class="s8">:</span><span class="s5"> </span><span class="s11">true</span><span class="s8">,</span><span class="s5"> cors</span><span class="s8">:</span><span class="s5"> </span><span class="s1">"Yes"</span><span class="s8">,</span><span class="s5"> desc</span><span class="s8">:</span><span class="s5"> </span><span class="s1">"雞尾酒配方資料庫"</span><span class="s8">,</span><span class="s5"> link</span><span class="s8">:</span><span class="s5"> </span><span class="s1">"https://www.thecocktaildb.com/api.php"</span><span class="s5"> </span><span class="s8">},</span></p>
<p class="p8"><span class="s5"><span class="Apple-converted-space"> </span></span><span class="s8">{</span><span class="s5"> name</span><span class="s8">:</span><span class="s5"> </span><span class="s1">"PunkAPI"</span><span class="s8">,</span><span class="s5"> category</span><span class="s8">:</span><span class="s5"> </span><span class="s1">"Food"</span><span class="s8">,</span><span class="s5"> auth</span><span class="s8">:</span><span class="s5"> </span><span class="s1">"No Auth"</span><span class="s8">,</span><span class="s5"> https</span><span class="s8">:</span><span class="s5"> </span><span class="s11">true</span><span class="s8">,</span><span class="s5"> cors</span><span class="s8">:</span><span class="s5"> </span><span class="s1">"Yes"</span><span class="s8">,</span><span class="s5"> desc</span><span class="s8">:</span><span class="s5"> </span><span class="s1">"BrewDog 啤酒配方"</span><span class="s8">,</span><span class="s5"> link</span><span class="s8">:</span><span class="s5"> </span><span class="s1">"https://punkapi.com/"</span><span class="s5"> </span><span class="s8">},</span></p>
<p class="p4"><span class="s1"><span class="Apple-converted-space"> </span></span><span class="s8">{</span><span class="s1"> name</span><span class="s8">:</span><span class="s1"> </span><span class="s9">"NewsAPI"</span><span class="s8">,</span><span class="s1"> category</span><span class="s8">:</span><span class="s1"> </span><span class="s9">"News"</span><span class="s8">,</span><span class="s1"> auth</span><span class="s8">:</span><span class="s1"> </span><span class="s9">"ApiKey"</span><span class="s8">,</span><span class="s1"> https</span><span class="s8">:</span><span class="s1"> </span><span class="s11">true</span><span class="s8">,</span><span class="s1"> cors</span><span class="s8">:</span><span class="s1"> </span><span class="s9">"Yes"</span><span class="s8">,</span><span class="s1"> desc</span><span class="s8">:</span><span class="s1"> </span><span class="s9">"全球新聞標題索引"</span><span class="s8">,</span><span class="s1"> link</span><span class="s8">:</span><span class="s1"> </span><span class="s9">"https://newsapi.org/"</span><span class="s1"> </span><span class="s8">},</span></p>
<p class="p8"><span class="s5"><span class="Apple-converted-space"> </span></span><span class="s8">{</span><span class="s5"> name</span><span class="s8">:</span><span class="s5"> </span><span class="s1">"HackerNews"</span><span class="s8">,</span><span class="s5"> category</span><span class="s8">:</span><span class="s5"> </span><span class="s1">"News"</span><span class="s8">,</span><span class="s5"> auth</span><span class="s8">:</span><span class="s5"> </span><span class="s1">"No Auth"</span><span class="s8">,</span><span class="s5"> https</span><span class="s8">:</span><span class="s5"> </span><span class="s11">true</span><span class="s8">,</span><span class="s5"> cors</span><span class="s8">:</span><span class="s5"> </span><span class="s1">"Yes"</span><span class="s8">,</span><span class="s5"> desc</span><span class="s8">:</span><span class="s5"> </span><span class="s1">"官方 Firebase API"</span><span class="s8">,</span><span class="s5"> link</span><span class="s8">:</span><span class="s5"> </span><span class="s1">"https://github.com/HackerNews/API"</span><span class="s5"> </span><span class="s8">},</span></p>
<p class="p8"><span class="s5"><span class="Apple-converted-space"> </span></span><span class="s8">{</span><span class="s5"> name</span><span class="s8">:</span><span class="s5"> </span><span class="s1">"Advice Slip"</span><span class="s8">,</span><span class="s5"> category</span><span class="s8">:</span><span class="s5"> </span><span class="s1">"Fun"</span><span class="s8">,</span><span class="s5"> auth</span><span class="s8">:</span><span class="s5"> </span><span class="s1">"No Auth"</span><span class="s8">,</span><span class="s5"> https</span><span class="s8">:</span><span class="s5"> </span><span class="s11">true</span><span class="s8">,</span><span class="s5"> cors</span><span class="s8">:</span><span class="s5"> </span><span class="s1">"Yes"</span><span class="s8">,</span><span class="s5"> desc</span><span class="s8">:</span><span class="s5"> </span><span class="s1">"隨機產生一條建議"</span><span class="s8">,</span><span class="s5"> link</span><span class="s8">:</span><span class="s5"> </span><span class="s1">"https://api.adviceslip.com/"</span><span class="s5"> </span><span class="s8">},</span></p>
<p class="p8"><span class="s5"><span class="Apple-converted-space"> </span></span><span class="s8">{</span><span class="s5"> name</span><span class="s8">:</span><span class="s5"> </span><span class="s1">"Bored API"</span><span class="s8">,</span><span class="s5"> category</span><span class="s8">:</span><span class="s5"> </span><span class="s1">"Fun"</span><span class="s8">,</span><span class="s5"> auth</span><span class="s8">:</span><span class="s5"> </span><span class="s1">"No Auth"</span><span class="s8">,</span><span class="s5"> https</span><span class="s8">:</span><span class="s5"> </span><span class="s11">true</span><span class="s8">,</span><span class="s5"> cors</span><span class="s8">:</span><span class="s5"> </span><span class="s1">"Yes"</span><span class="s8">,</span><span class="s5"> desc</span><span class="s8">:</span><span class="s5"> </span><span class="s1">"當你無聊時的活動建議"</span><span class="s8">,</span><span class="s5"> link</span><span class="s8">:</span><span class="s5"> </span><span class="s1">"https://www.boredapi.com/"</span><span class="s5"> </span><span class="s8">},</span></p>
<p class="p8"><span class="s5"><span class="Apple-converted-space"> </span></span><span class="s8">{</span><span class="s5"> name</span><span class="s8">:</span><span class="s5"> </span><span class="s1">"FunTranslations"</span><span class="s8">,</span><span class="s5"> category</span><span class="s8">:</span><span class="s5"> </span><span class="s1">"Fun"</span><span class="s8">,</span><span class="s5"> auth</span><span class="s8">:</span><span class="s5"> </span><span class="s1">"ApiKey"</span><span class="s8">,</span><span class="s5"> https</span><span class="s8">:</span><span class="s5"> </span><span class="s11">true</span><span class="s8">,</span><span class="s5"> cors</span><span class="s8">:</span><span class="s5"> </span><span class="s1">"Yes"</span><span class="s8">,</span><span class="s5"> desc</span><span class="s8">:</span><span class="s5"> </span><span class="s1">"尤達大師、精靈語翻譯"</span><span class="s8">,</span><span class="s5"> link</span><span class="s8">:</span><span class="s5"> </span><span class="s1">"https://funtranslations.com/api"</span><span class="s5"> </span><span class="s8">},</span></p>
<p class="p8"><span class="s5"><span class="Apple-converted-space"> </span></span><span class="s8">{</span><span class="s5"> name</span><span class="s8">:</span><span class="s5"> </span><span class="s1">"Pokemon TCG"</span><span class="s8">,</span><span class="s5"> category</span><span class="s8">:</span><span class="s5"> </span><span class="s1">"Games"</span><span class="s8">,</span><span class="s5"> auth</span><span class="s8">:</span><span class="s5"> </span><span class="s1">"ApiKey"</span><span class="s8">,</span><span class="s5"> https</span><span class="s8">:</span><span class="s5"> </span><span class="s11">true</span><span class="s8">,</span><span class="s5"> cors</span><span class="s8">:</span><span class="s5"> </span><span class="s1">"Yes"</span><span class="s8">,</span><span class="s5"> desc</span><span class="s8">:</span><span class="s5"> </span><span class="s1">"寶可夢集換式卡牌資料"</span><span class="s8">,</span><span class="s5"> link</span><span class="s8">:</span><span class="s5"> </span><span class="s1">"https://pokemontcg.io/"</span><span class="s5"> </span><span class="s8">},</span></p>
<p class="p8"><span class="s5"><span class="Apple-converted-space"> </span></span><span class="s8">{</span><span class="s5"> name</span><span class="s8">:</span><span class="s5"> </span><span class="s1">"OpenDota"</span><span class="s8">,</span><span class="s5"> category</span><span class="s8">:</span><span class="s5"> </span><span class="s1">"Games"</span><span class="s8">,</span><span class="s5"> auth</span><span class="s8">:</span><span class="s5"> </span><span class="s1">"No Auth"</span><span class="s8">,</span><span class="s5"> https</span><span class="s8">:</span><span class="s5"> </span><span class="s11">true</span><span class="s8">,</span><span class="s5"> cors</span><span class="s8">:</span><span class="s5"> </span><span class="s1">"Yes"</span><span class="s8">,</span><span class="s5"> desc</span><span class="s8">:</span><span class="s5"> </span><span class="s1">"Dota 2 比賽數據"</span><span class="s8">,</span><span class="s5"> link</span><span class="s8">:</span><span class="s5"> </span><span class="s1">"https://docs.opendota.com/"</span><span class="s5"> </span><span class="s8">},</span></p>
<p class="p8"><span class="s5"><span class="Apple-converted-space"> </span></span><span class="s8">{</span><span class="s5"> name</span><span class="s8">:</span><span class="s5"> </span><span class="s1">"CheapShark"</span><span class="s8">,</span><span class="s5"> category</span><span class="s8">:</span><span class="s5"> </span><span class="s1">"Games"</span><span class="s8">,</span><span class="s5"> auth</span><span class="s8">:</span><span class="s5"> </span><span class="s1">"No Auth"</span><span class="s8">,</span><span class="s5"> https</span><span class="s8">:</span><span class="s5"> </span><span class="s11">true</span><span class="s8">,</span><span class="s5"> cors</span><span class="s8">:</span><span class="s5"> </span><span class="s1">"Yes"</span><span class="s8">,</span><span class="s5"> desc</span><span class="s8">:</span><span class="s5"> </span><span class="s1">"PC 遊戲特價追蹤"</span><span class="s8">,</span><span class="s5"> link</span><span class="s8">:</span><span class="s5"> </span><span class="s1">"https://www.cheapshark.com/api/1.0/"</span><span class="s5"> </span><span class="s8">},</span></p>
<p class="p8"><span class="s5"><span class="Apple-converted-space"> </span></span><span class="s8">{</span><span class="s5"> name</span><span class="s8">:</span><span class="s5"> </span><span class="s1">"DictionaryAPI"</span><span class="s8">,</span><span class="s5"> category</span><span class="s8">:</span><span class="s5"> </span><span class="s1">"Utility"</span><span class="s8">,</span><span class="s5"> auth</span><span class="s8">:</span><span class="s5"> </span><span class="s1">"No Auth"</span><span class="s8">,</span><span class="s5"> https</span><span class="s8">:</span><span class="s5"> </span><span class="s11">true</span><span class="s8">,</span><span class="s5"> cors</span><span class="s8">:</span><span class="s5"> </span><span class="s1">"Yes"</span><span class="s8">,</span><span class="s5"> desc</span><span class="s8">:</span><span class="s5"> </span><span class="s1">"免費英語字典"</span><span class="s8">,</span><span class="s5"> link</span><span class="s8">:</span><span class="s5"> </span><span class="s1">"https://dictionaryapi.dev/"</span><span class="s5"> </span><span class="s8">},</span></p>
<p class="p8"><span class="s5"><span class="Apple-converted-space"> </span></span><span class="s8">{</span><span class="s5"> name</span><span class="s8">:</span><span class="s5"> </span><span class="s1">"Urban Dictionary"</span><span class="s8">,</span><span class="s5"> category</span><span class="s8">:</span><span class="s5"> </span><span class="s1">"Utility"</span><span class="s8">,</span><span class="s5"> auth</span><span class="s8">:</span><span class="s5"> </span><span class="s1">"ApiKey"</span><span class="s8">,</span><span class="s5"> https</span><span class="s8">:</span><span class="s5"> </span><span class="s11">true</span><span class="s8">,</span><span class="s5"> cors</span><span class="s8">:</span><span class="s5"> </span><span class="s1">"Yes"</span><span class="s8">,</span><span class="s5"> desc</span><span class="s8">:</span><span class="s5"> </span><span class="s1">"俚語字典"</span><span class="s8">,</span><span class="s5"> link</span><span class="s8">:</span><span class="s5"> </span><span class="s1">"https://rapidapi.com/community/api/urban-dictionary"</span><span class="s5"> </span><span class="s8">},</span></p>
<p class="p8"><span class="s5"><span class="Apple-converted-space"> </span></span><span class="s8">{</span><span class="s5"> name</span><span class="s8">:</span><span class="s5"> </span><span class="s1">"QR Code Generator"</span><span class="s8">,</span><span class="s5"> category</span><span class="s8">:</span><span class="s5"> </span><span class="s1">"Utility"</span><span class="s8">,</span><span class="s5"> auth</span><span class="s8">:</span><span class="s5"> </span><span class="s1">"No Auth"</span><span class="s8">,</span><span class="s5"> https</span><span class="s8">:</span><span class="s5"> </span><span class="s11">true</span><span class="s8">,</span><span class="s5"> cors</span><span class="s8">:</span><span class="s5"> </span><span class="s1">"Yes"</span><span class="s8">,</span><span class="s5"> desc</span><span class="s8">:</span><span class="s5"> </span><span class="s1">"生成 QR Code 圖片"</span><span class="s8">,</span><span class="s5"> link</span><span class="s8">:</span><span class="s5"> </span><span class="s1">"https://goqr.me/api/"</span><span class="s5"> </span><span class="s8">},</span></p>
<p class="p8"><span class="s5"><span class="Apple-converted-space"> </span></span><span class="s8">{</span><span class="s5"> name</span><span class="s8">:</span><span class="s5"> </span><span class="s1">"Random User"</span><span class="s8">,</span><span class="s5"> category</span><span class="s8">:</span><span class="s5"> </span><span class="s1">"Development"</span><span class="s8">,</span><span class="s5"> auth</span><span class="s8">:</span><span class="s5"> </span><span class="s1">"No Auth"</span><span class="s8">,</span><span class="s5"> https</span><span class="s8">:</span><span class="s5"> </span><span class="s11">true</span><span class="s8">,</span><span class="s5"> cors</span><span class="s8">:</span><span class="s5"> </span><span class="s1">"Yes"</span><span class="s8">,</span><span class="s5"> desc</span><span class="s8">:</span><span class="s5"> </span><span class="s1">"產生隨機用戶個資"</span><span class="s8">,</span><span class="s5"> link</span><span class="s8">:</span><span class="s5"> </span><span class="s1">"https://randomuser.me/"</span><span class="s5"> </span><span class="s8">},</span></p>
<p class="p8"><span class="s5"><span class="Apple-converted-space"> </span></span><span class="s8">{</span><span class="s5"> name</span><span class="s8">:</span><span class="s5"> </span><span class="s1">"DiceBear"</span><span class="s8">,</span><span class="s5"> category</span><span class="s8">:</span><span class="s5"> </span><span class="s1">"Development"</span><span class="s8">,</span><span class="s5"> auth</span><span class="s8">:</span><span class="s5"> </span><span class="s1">"No Auth"</span><span class="s8">,</span><span class="s5"> https</span><span class="s8">:</span><span class="s5"> </span><span class="s11">true</span><span class="s8">,</span><span class="s5"> cors</span><span class="s8">:</span><span class="s5"> </span><span class="s1">"Yes"</span><span class="s8">,</span><span class="s5"> desc</span><span class="s8">:</span><span class="s5"> </span><span class="s1">"生成 SVG 頭像"</span><span class="s8">,</span><span class="s5"> link</span><span class="s8">:</span><span class="s5"> </span><span class="s1">"https://dicebear.com/"</span><span class="s5"> </span><span class="s8">},</span></p>
<p class="p8"><span class="s5"><span class="Apple-converted-space"> </span></span><span class="s8">{</span><span class="s5"> name</span><span class="s8">:</span><span class="s5"> </span><span class="s1">"Mapbox"</span><span class="s8">,</span><span class="s5"> category</span><span class="s8">:</span><span class="s5"> </span><span class="s1">"Geocoding"</span><span class="s8">,</span><span class="s5"> auth</span><span class="s8">:</span><span class="s5"> </span><span class="s1">"ApiKey"</span><span class="s8">,</span><span class="s5"> https</span><span class="s8">:</span><span class="s5"> </span><span class="s11">true</span><span class="s8">,</span><span class="s5"> cors</span><span class="s8">:</span><span class="s5"> </span><span class="s1">"Yes"</span><span class="s8">,</span><span class="s5"> desc</span><span class="s8">:</span><span class="s5"> </span><span class="s1">"地圖與導航服務"</span><span class="s8">,</span><span class="s5"> link</span><span class="s8">:</span><span class="s5"> </span><span class="s1">"https://docs.mapbox.com/api/"</span><span class="s5"> </span><span class="s8">},</span></p>
<p class="p8"><span class="s5"><span class="Apple-converted-space"> </span></span><span class="s8">{</span><span class="s5"> name</span><span class="s8">:</span><span class="s5"> </span><span class="s1">"Discord"</span><span class="s8">,</span><span class="s5"> category</span><span class="s8">:</span><span class="s5"> </span><span class="s1">"Social"</span><span class="s8">,</span><span class="s5"> auth</span><span class="s8">:</span><span class="s5"> </span><span class="s1">"OAuth"</span><span class="s8">,</span><span class="s5"> https</span><span class="s8">:</span><span class="s5"> </span><span class="s11">true</span><span class="s8">,</span><span class="s5"> cors</span><span class="s8">:</span><span class="s5"> </span><span class="s1">"Yes"</span><span class="s8">,</span><span class="s5"> desc</span><span class="s8">:</span><span class="s5"> </span><span class="s1">"Discord 機器人與互動"</span><span class="s8">,</span><span class="s5"> link</span><span class="s8">:</span><span class="s5"> </span><span class="s1">"https://discord.com/developers/docs/intro"</span><span class="s5"> </span><span class="s8">},</span></p>
<p class="p8"><span class="s5"><span class="Apple-converted-space"> </span></span><span class="s8">{</span><span class="s5"> name</span><span class="s8">:</span><span class="s5"> </span><span class="s1">"Telegram"</span><span class="s8">,</span><span class="s5"> category</span><span class="s8">:</span><span class="s5"> </span><span class="s1">"Social"</span><span class="s8">,</span><span class="s5"> auth</span><span class="s8">:</span><span class="s5"> </span><span class="s1">"ApiKey"</span><span class="s8">,</span><span class="s5"> https</span><span class="s8">:</span><span class="s5"> </span><span class="s11">true</span><span class="s8">,</span><span class="s5"> cors</span><span class="s8">:</span><span class="s5"> </span><span class="s1">"Yes"</span><span class="s8">,</span><span class="s5"> desc</span><span class="s8">:</span><span class="s5"> </span><span class="s1">"Telegram Bot API"</span><span class="s8">,</span><span class="s5"> link</span><span class="s8">:</span><span class="s5"> </span><span class="s1">"https://core.telegram.org/bots/api"</span><span class="s5"> </span><span class="s8">}</span></p>
<p class="p4"><span class="s1"><span class="Apple-converted-space"> </span></span><span class="s8">];</span></p>
<p class="p5"><span class="s7"></span><br></p>
<p class="p6"><span class="s5"><span class="Apple-converted-space"> </span></span><span class="s1">// State Management</span></p>
<p class="p4"><span class="s1"><span class="Apple-converted-space"> </span></span><span class="s11">let</span><span class="s1"> currentData </span><span class="s8">=</span><span class="s1"> </span><span class="s8">[...</span><span class="s1">apiData</span><span class="s8">];</span></p>
<p class="p4"><span class="s1"><span class="Apple-converted-space"> </span></span><span class="s11">let</span><span class="s1"> categoryChart </span><span class="s8">=</span><span class="s1"> </span><span class="s11">null</span><span class="s8">;</span></p>
<p class="p4"><span class="s1"><span class="Apple-converted-space"> </span></span><span class="s11">let</span><span class="s1"> authChart </span><span class="s8">=</span><span class="s1"> </span><span class="s11">null</span><span class="s8">;</span></p>
<p class="p5"><span class="s7"></span><br></p>
<p class="p6"><span class="s5"><span class="Apple-converted-space"> </span></span><span class="s1">// --- 2. Chart Configuration & Rendering ---</span></p>
<p class="p5"><span class="s1"><span class="Apple-converted-space"> </span></span></p>
<p class="p6"><span class="s5"><span class="Apple-converted-space"> </span></span><span class="s1">// Helper to get color palette</span></p>
<p class="p4"><span class="s1"><span class="Apple-converted-space"> </span></span><span class="s11">const</span><span class="s1"> getColors </span><span class="s8">=</span><span class="s1"> </span><span class="s8">(</span><span class="s1">count</span><span class="s8">)</span><span class="s1"> </span><span class="s8">=></span><span class="s1"> </span><span class="s8">{</span></p>
<p class="p4"><span class="s1"><span class="Apple-converted-space"> </span></span><span class="s11">const</span><span class="s1"> colors </span><span class="s8">=</span><span class="s1"> </span><span class="s8">[</span></p>
<p class="p8"><span class="s5"><span class="Apple-converted-space"> </span></span><span class="s1">'#6366f1'</span><span class="s8">,</span><span class="s5"> </span><span class="s1">'#10b981'</span><span class="s8">,</span><span class="s5"> </span><span class="s1">'#f59e0b'</span><span class="s8">,</span><span class="s5"> </span><span class="s1">'#ef4444'</span><span class="s8">,</span><span class="s5"> </span><span class="s1">'#8b5cf6'</span><span class="s8">,</span><span class="s5"><span class="Apple-converted-space"> </span></span></p>
<p class="p8"><span class="s5"><span class="Apple-converted-space"> </span></span><span class="s1">'#ec4899'</span><span class="s8">,</span><span class="s5"> </span><span class="s1">'#06b6d4'</span><span class="s8">,</span><span class="s5"> </span><span class="s1">'#84cc16'</span><span class="s8">,</span><span class="s5"> </span><span class="s1">'#f97316'</span><span class="s8">,</span><span class="s5"> </span><span class="s1">'#3b82f6'</span></p>
<p class="p4"><span class="s1"><span class="Apple-converted-space"> </span></span><span class="s8">];</span></p>
<p class="p4"><span class="s1"><span class="Apple-converted-space"> </span></span><span class="s11">return</span><span class="s1"> </span><span class="s12">Array</span><span class="s8">(</span><span class="s1">count</span><span class="s8">).</span><span class="s1">fill</span><span class="s8">().</span><span class="s1">map</span><span class="s8">((</span><span class="s1">_</span><span class="s8">,</span><span class="s1"> i</span><span class="s8">)</span><span class="s1"> </span><span class="s8">=></span><span class="s1"> colors</span><span class="s8">[</span><span class="s1">i </span><span class="s8">%</span><span class="s1"> colors</span><span class="s8">.</span><span class="s1">length</span><span class="s8">]);</span></p>
<p class="p4"><span class="s1"><span class="Apple-converted-space"> </span></span><span class="s8">};</span></p>
<p class="p5"><span class="s7"></span><br></p>
<p class="p4"><span class="s1"><span class="Apple-converted-space"> </span></span><span class="s11">function</span><span class="s1"> renderStats</span><span class="s8">()</span><span class="s1"> </span><span class="s8">{</span></p>
<p class="p6"><span class="s5"><span class="Apple-converted-space"> </span></span><span class="s1">// Update Text Counters</span></p>
<p class="p4"><span class="s1"><span class="Apple-converted-space"> </span>document</span><span class="s8">.</span><span class="s1">getElementById</span><span class="s8">(</span><span class="s9">'total-apis-count'</span><span class="s8">).</span><span class="s1">innerText </span><span class="s8">=</span><span class="s1"> apiData</span><span class="s8">.</span><span class="s1">length</span><span class="s8">;</span></p>
<p class="p4"><span class="s1"><span class="Apple-converted-space"> </span>document</span><span class="s8">.</span><span class="s1">getElementById</span><span class="s8">(</span><span class="s9">'free-apis-count'</span><span class="s8">).</span><span class="s1">innerText </span><span class="s8">=</span><span class="s1"> apiData</span><span class="s8">.</span><span class="s1">filter</span><span class="s8">(</span><span class="s1">d </span><span class="s8">=></span><span class="s1"> d</span><span class="s8">.</span><span class="s1">auth </span><span class="s8">===</span><span class="s1"> </span><span class="s9">'No Auth'</span><span class="s8">).</span><span class="s1">length</span><span class="s8">;</span></p>
<p class="p5"><span class="s7"></span><br></p>
<p class="p6"><span class="s5"><span class="Apple-converted-space"> </span></span><span class="s1">// Prepare Data for Charts</span></p>
<p class="p5"><span class="s1"><span class="Apple-converted-space"> </span></span></p>
<p class="p6"><span class="s5"><span class="Apple-converted-space"> </span></span><span class="s1">// 1. Categories</span></p>
<p class="p4"><span class="s1"><span class="Apple-converted-space"> </span></span><span class="s11">const</span><span class="s1"> catCounts </span><span class="s8">=</span><span class="s1"> </span><span class="s8">{};</span></p>
<p class="p4"><span class="s1"><span class="Apple-converted-space"> </span>apiData</span><span class="s8">.</span><span class="s1">forEach</span><span class="s8">(</span><span class="s1">item </span><span class="s8">=></span><span class="s1"> </span><span class="s8">{</span></p>
<p class="p4"><span class="s1"><span class="Apple-converted-space"> </span>catCounts</span><span class="s8">[</span><span class="s1">item</span><span class="s8">.</span><span class="s1">category</span><span class="s8">]</span><span class="s1"> </span><span class="s8">=</span><span class="s1"> </span><span class="s8">(</span><span class="s1">catCounts</span><span class="s8">[</span><span class="s1">item</span><span class="s8">.</span><span class="s1">category</span><span class="s8">]</span><span class="s1"> </span><span class="s8">||</span><span class="s1"> </span><span class="s13">0</span><span class="s8">)</span><span class="s1"> </span><span class="s8">+</span><span class="s1"> </span><span class="s13">1</span><span class="s8">;</span></p>
<p class="p4"><span class="s1"><span class="Apple-converted-space"> </span></span><span class="s8">});</span></p>
<p class="p4"><span class="s1"><span class="Apple-converted-space"> </span></span><span class="s11">const</span><span class="s1"> sortedCats </span><span class="s8">=</span><span class="s1"> </span><span class="s12">Object</span><span class="s8">.</span><span class="s1">entries</span><span class="s8">(</span><span class="s1">catCounts</span><span class="s8">).</span><span class="s1">sort</span><span class="s8">((</span><span class="s1">a</span><span class="s8">,</span><span class="s1">b</span><span class="s8">)</span><span class="s1"> </span><span class="s8">=></span><span class="s1"> b</span><span class="s8">[</span><span class="s13">1</span><span class="s8">]</span><span class="s1"> </span><span class="s8">-</span><span class="s1"> a</span><span class="s8">[</span><span class="s13">1</span><span class="s8">]);</span></p>
<p class="p5"><span class="s1"><span class="Apple-converted-space"> </span></span></p>
<p class="p4"><span class="s1"><span class="Apple-converted-space"> </span></span><span class="s11">const</span><span class="s1"> catLabels </span><span class="s8">=</span><span class="s1"> sortedCats</span><span class="s8">.</span><span class="s1">map</span><span class="s8">(</span><span class="s1">x </span><span class="s8">=></span><span class="s1"> x</span><span class="s8">[</span><span class="s13">0</span><span class="s8">]);</span></p>
<p class="p4"><span class="s1"><span class="Apple-converted-space"> </span></span><span class="s11">const</span><span class="s1"> catValues </span><span class="s8">=</span><span class="s1"> sortedCats</span><span class="s8">.</span><span class="s1">map</span><span class="s8">(</span><span class="s1">x </span><span class="s8">=></span><span class="s1"> x</span><span class="s8">[</span><span class="s13">1</span><span class="s8">]);</span></p>
<p class="p5"><span class="s7"></span><br></p>
<p class="p6"><span class="s5"><span class="Apple-converted-space"> </span></span><span class="s1">// 2. Auth Types</span></p>
<p class="p4"><span class="s1"><span class="Apple-converted-space"> </span></span><span class="s11">const</span><span class="s1"> authCounts </span><span class="s8">=</span><span class="s1"> </span><span class="s8">{};</span></p>
<p class="p4"><span class="s1"><span class="Apple-converted-space"> </span>apiData</span><span class="s8">.</span><span class="s1">forEach</span><span class="s8">(</span><span class="s1">item </span><span class="s8">=></span><span class="s1"> </span><span class="s8">{</span></p>
<p class="p4"><span class="s1"><span class="Apple-converted-space"> </span>authCounts</span><span class="s8">[</span><span class="s1">item</span><span class="s8">.</span><span class="s1">auth</span><span class="s8">]</span><span class="s1"> </span><span class="s8">=</span><span class="s1"> </span><span class="s8">(</span><span class="s1">authCounts</span><span class="s8">[</span><span class="s1">item</span><span class="s8">.</span><span class="s1">auth</span><span class="s8">]</span><span class="s1"> </span><span class="s8">||</span><span class="s1"> </span><span class="s13">0</span><span class="s8">)</span><span class="s1"> </span><span class="s8">+</span><span class="s1"> </span><span class="s13">1</span><span class="s8">;</span></p>
<p class="p4"><span class="s1"><span class="Apple-converted-space"> </span></span><span class="s8">});</span></p>
<p class="p5"><span class="s1"><span class="Apple-converted-space"> </span></span></p>
<p class="p6"><span class="s5"><span class="Apple-converted-space"> </span></span><span class="s1">// Chart 1: Categories (Doughnut)</span></p>
<p class="p4"><span class="s1"><span class="Apple-converted-space"> </span></span><span class="s11">const</span><span class="s1"> ctxCat </span><span class="s8">=</span><span class="s1"> document</span><span class="s8">.</span><span class="s1">getElementById</span><span class="s8">(</span><span class="s9">'categoryChart'</span><span class="s8">).</span><span class="s1">getContext</span><span class="s8">(</span><span class="s9">'2d'</span><span class="s8">);</span></p>
<p class="p4"><span class="s1"><span class="Apple-converted-space"> </span></span><span class="s11">if</span><span class="s1"> </span><span class="s8">(</span><span class="s1">categoryChart</span><span class="s8">)</span><span class="s1"> categoryChart</span><span class="s8">.</span><span class="s1">destroy</span><span class="s8">();</span></p>
<p class="p5"><span class="s1"><span class="Apple-converted-space"> </span></span></p>
<p class="p4"><span class="s1"><span class="Apple-converted-space"> </span>categoryChart </span><span class="s8">=</span><span class="s1"> </span><span class="s11">new</span><span class="s1"> </span><span class="s12">Chart</span><span class="s8">(</span><span class="s1">ctxCat</span><span class="s8">,</span><span class="s1"> </span><span class="s8">{</span></p>
<p class="p4"><span class="s1"><span class="Apple-converted-space"> </span>type</span><span class="s8">:</span><span class="s1"> </span><span class="s9">'doughnut'</span><span class="s8">,</span></p>
<p class="p4"><span class="s1"><span class="Apple-converted-space"> </span>data</span><span class="s8">:</span><span class="s1"> </span><span class="s8">{</span></p>
<p class="p4"><span class="s1"><span class="Apple-converted-space"> </span>labels</span><span class="s8">:</span><span class="s1"> catLabels</span><span class="s8">,</span></p>
<p class="p4"><span class="s1"><span class="Apple-converted-space"> </span>datasets</span><span class="s8">:</span><span class="s1"> </span><span class="s8">[{</span></p>
<p class="p4"><span class="s1"><span class="Apple-converted-space"> </span>data</span><span class="s8">:</span><span class="s1"> catValues</span><span class="s8">,</span></p>
<p class="p4"><span class="s1"><span class="Apple-converted-space"> </span>backgroundColor</span><span class="s8">:</span><span class="s1"> getColors</span><span class="s8">(</span><span class="s1">catLabels</span><span class="s8">.</span><span class="s1">length</span><span class="s8">),</span></p>
<p class="p4"><span class="s1"><span class="Apple-converted-space"> </span>borderWidth</span><span class="s8">:</span><span class="s1"> </span><span class="s13">0</span><span class="s8">,</span></p>
<p class="p4"><span class="s1"><span class="Apple-converted-space"> </span>hoverOffset</span><span class="s8">:</span><span class="s1"> </span><span class="s13">4</span></p>
<p class="p4"><span class="s1"><span class="Apple-converted-space"> </span></span><span class="s8">}]</span></p>
<p class="p4"><span class="s1"><span class="Apple-converted-space"> </span></span><span class="s8">},</span></p>
<p class="p4"><span class="s1"><span class="Apple-converted-space"> </span>options</span><span class="s8">:</span><span class="s1"> </span><span class="s8">{</span></p>
<p class="p4"><span class="s1"><span class="Apple-converted-space"> </span>responsive</span><span class="s8">:</span><span class="s1"> </span><span class="s11">true</span><span class="s8">,</span></p>
<p class="p4"><span class="s1"><span class="Apple-converted-space"> </span>maintainAspectRatio</span><span class="s8">:</span><span class="s1"> </span><span class="s11">false</span><span class="s8">,</span></p>
<p class="p4"><span class="s1"><span class="Apple-converted-space"> </span>plugins</span><span class="s8">:</span><span class="s1"> </span><span class="s8">{</span></p>
<p class="p4"><span class="s1"><span class="Apple-converted-space"> </span>legend</span><span class="s8">:</span><span class="s1"> </span><span class="s8">{</span><span class="s1"> position</span><span class="s8">:</span><span class="s1"> </span><span class="s9">'right'</span><span class="s8">,</span><span class="s1"> labels</span><span class="s8">:</span><span class="s1"> </span><span class="s8">{</span><span class="s1"> boxWidth</span><span class="s8">:</span><span class="s1"> </span><span class="s13">10</span><span class="s8">,</span><span class="s1"> font</span><span class="s8">:</span><span class="s1"> </span><span class="s8">{</span><span class="s1"> size</span><span class="s8">:</span><span class="s1"> </span><span class="s13">10</span><span class="s1"> </span><span class="s8">}</span><span class="s1"> </span><span class="s8">}</span><span class="s1"> </span><span class="s8">},</span></p>
<p class="p4"><span class="s1"><span class="Apple-converted-space"> </span>tooltip</span><span class="s8">:</span><span class="s1"> </span><span class="s8">{</span></p>
<p class="p4"><span class="s1"><span class="Apple-converted-space"> </span>callbacks</span><span class="s8">:</span><span class="s1"> </span><span class="s8">{</span></p>
<p class="p4"><span class="s1"><span class="Apple-converted-space"> </span>label</span><span class="s8">:</span><span class="s1"> </span><span class="s11">function</span><span class="s8">(</span><span class="s1">context</span><span class="s8">)</span><span class="s1"> </span><span class="s8">{</span></p>
<p class="p4"><span class="s1"><span class="Apple-converted-space"> </span></span><span class="s11">let</span><span class="s1"> label </span><span class="s8">=</span><span class="s1"> context</span><span class="s8">.</span><span class="s1">label </span><span class="s8">||</span><span class="s1"> </span><span class="s9">''</span><span class="s8">;</span></p>
<p class="p4"><span class="s1"><span class="Apple-converted-space"> </span></span><span class="s11">if</span><span class="s1"> </span><span class="s8">(</span><span class="s1">label</span><span class="s8">)</span><span class="s1"> label </span><span class="s8">+=</span><span class="s1"> </span><span class="s9">': '</span><span class="s8">;</span></p>
<p class="p4"><span class="s1"><span class="Apple-converted-space"> </span></span><span class="s11">let</span><span class="s1"> value </span><span class="s8">=</span><span class="s1"> context</span><span class="s8">.</span><span class="s1">parsed</span><span class="s8">;</span></p>
<p class="p4"><span class="s1"><span class="Apple-converted-space"> </span></span><span class="s11">let</span><span class="s1"> total </span><span class="s8">=</span><span class="s1"> context</span><span class="s8">.</span><span class="s1">dataset</span><span class="s8">.</span><span class="s1">data</span><span class="s8">.</span><span class="s1">reduce</span><span class="s8">((</span><span class="s1">a</span><span class="s8">,</span><span class="s1"> b</span><span class="s8">)</span><span class="s1"> </span><span class="s8">=></span><span class="s1"> a </span><span class="s8">+</span><span class="s1"> b</span><span class="s8">,</span><span class="s1"> </span><span class="s13">0</span><span class="s8">);</span></p>
<p class="p4"><span class="s1"><span class="Apple-converted-space"> </span></span><span class="s11">let</span><span class="s1"> percentage </span><span class="s8">=</span><span class="s1"> </span><span class="s12">Math</span><span class="s8">.</span><span class="s1">round</span><span class="s8">((</span><span class="s1">value </span><span class="s8">/</span><span class="s1"> total</span><span class="s8">)</span><span class="s1"> </span><span class="s8">*</span><span class="s1"> </span><span class="s13">100</span><span class="s8">)</span><span class="s1"> </span><span class="s8">+</span><span class="s1"> </span><span class="s9">'%'</span><span class="s8">;</span></p>
<p class="p4"><span class="s1"><span class="Apple-converted-space"> </span></span><span class="s11">return</span><span class="s1"> label </span><span class="s8">+</span><span class="s1"> value </span><span class="s8">+</span><span class="s1"> </span><span class="s9">' ('</span><span class="s1"> </span><span class="s8">+</span><span class="s1"> percentage </span><span class="s8">+</span><span class="s1"> </span><span class="s9">')'</span><span class="s8">;</span></p>
<p class="p4"><span class="s1"><span class="Apple-converted-space"> </span></span><span class="s8">}</span></p>
<p class="p4"><span class="s1"><span class="Apple-converted-space"> </span></span><span class="s8">}</span></p>
<p class="p4"><span class="s1"><span class="Apple-converted-space"> </span></span><span class="s8">}</span></p>
<p class="p4"><span class="s1"><span class="Apple-converted-space"> </span></span><span class="s8">},</span></p>
<p class="p4"><span class="s1"><span class="Apple-converted-space"> </span>layout</span><span class="s8">:</span><span class="s1"> </span><span class="s8">{</span><span class="s1"> padding</span><span class="s8">:</span><span class="s1"> </span><span class="s13">10</span><span class="s1"> </span><span class="s8">}</span></p>
<p class="p4"><span class="s1"><span class="Apple-converted-space"> </span></span><span class="s8">}</span></p>
<p class="p4"><span class="s1"><span class="Apple-converted-space"> </span></span><span class="s8">});</span></p>
<p class="p5"><span class="s7"></span><br></p>
<p class="p6"><span class="s5"><span class="Apple-converted-space"> </span></span><span class="s1">// Chart 2: Auth Types (Bar)</span></p>
<p class="p4"><span class="s1"><span class="Apple-converted-space"> </span></span><span class="s11">const</span><span class="s1"> ctxAuth </span><span class="s8">=</span><span class="s1"> document</span><span class="s8">.</span><span class="s1">getElementById</span><span class="s8">(</span><span class="s9">'authChart'</span><span class="s8">).</span><span class="s1">getContext</span><span class="s8">(</span><span class="s9">'2d'</span><span class="s8">);</span></p>
<p class="p4"><span class="s1"><span class="Apple-converted-space"> </span></span><span class="s11">if</span><span class="s1"> </span><span class="s8">(</span><span class="s1">authChart</span><span class="s8">)</span><span class="s1"> authChart</span><span class="s8">.</span><span class="s1">destroy</span><span class="s8">();</span></p>
<p class="p5"><span class="s7"></span><br></p>
<p class="p4"><span class="s1"><span class="Apple-converted-space"> </span>authChart </span><span class="s8">=</span><span class="s1"> </span><span class="s11">new</span><span class="s1"> </span><span class="s12">Chart</span><span class="s8">(</span><span class="s1">ctxAuth</span><span class="s8">,</span><span class="s1"> </span><span class="s8">{</span></p>
<p class="p4"><span class="s1"><span class="Apple-converted-space"> </span>type</span><span class="s8">:</span><span class="s1"> </span><span class="s9">'bar'</span><span class="s8">,</span></p>
<p class="p4"><span class="s1"><span class="Apple-converted-space"> </span>data</span><span class="s8">:</span><span class="s1"> </span><span class="s8">{</span></p>
<p class="p4"><span class="s1"><span class="Apple-converted-space"> </span>labels</span><span class="s8">:</span><span class="s1"> </span><span class="s12">Object</span><span class="s8">.</span><span class="s1">keys</span><span class="s8">(</span><span class="s1">authCounts</span><span class="s8">),</span></p>
<p class="p4"><span class="s1"><span class="Apple-converted-space"> </span>datasets</span><span class="s8">:</span><span class="s1"> </span><span class="s8">[{</span></p>
<p class="p4"><span class="s1"><span class="Apple-converted-space"> </span>label</span><span class="s8">:</span><span class="s1"> </span><span class="s9">'數量'</span><span class="s8">,</span></p>
<p class="p4"><span class="s1"><span class="Apple-converted-space"> </span>data</span><span class="s8">:</span><span class="s1"> </span><span class="s12">Object</span><span class="s8">.</span><span class="s1">values</span><span class="s8">(</span><span class="s1">authCounts</span><span class="s8">),</span></p>
<p class="p4"><span class="s1"><span class="Apple-converted-space"> </span>backgroundColor</span><span class="s8">:</span><span class="s1"> </span><span class="s8">[</span><span class="s9">'#dcfce7'</span><span class="s8">,</span><span class="s1"> </span><span class="s9">'#fff7ed'</span><span class="s8">,</span><span class="s1"> </span><span class="s9">'#eff6ff'</span><span class="s8">],</span><span class="s1"> </span><span class="s14">// Match badge colors approx</span></p>
<p class="p4"><span class="s1"><span class="Apple-converted-space"> </span>borderColor</span><span class="s8">:</span><span class="s1"> </span><span class="s8">[</span><span class="s9">'#166534'</span><span class="s8">,</span><span class="s1"> </span><span class="s9">'#9a3412'</span><span class="s8">,</span><span class="s1"> </span><span class="s9">'#1e40af'</span><span class="s8">],</span></p>
<p class="p4"><span class="s1"><span class="Apple-converted-space"> </span>borderWidth</span><span class="s8">:</span><span class="s1"> </span><span class="s13">1</span><span class="s8">,</span></p>
<p class="p4"><span class="s1"><span class="Apple-converted-space"> </span>borderRadius</span><span class="s8">:</span><span class="s1"> </span><span class="s13">4</span></p>
<p class="p4"><span class="s1"><span class="Apple-converted-space"> </span></span><span class="s8">}]</span></p>
<p class="p4"><span class="s1"><span class="Apple-converted-space"> </span></span><span class="s8">},</span></p>
<p class="p4"><span class="s1"><span class="Apple-converted-space"> </span>options</span><span class="s8">:</span><span class="s1"> </span><span class="s8">{</span></p>
<p class="p4"><span class="s1"><span class="Apple-converted-space"> </span>responsive</span><span class="s8">:</span><span class="s1"> </span><span class="s11">true</span><span class="s8">,</span></p>
<p class="p4"><span class="s1"><span class="Apple-converted-space"> </span>maintainAspectRatio</span><span class="s8">:</span><span class="s1"> </span><span class="s11">false</span><span class="s8">,</span></p>
<p class="p6"><span class="s5"><span class="Apple-converted-space"> </span>indexAxis</span><span class="s8">:</span><span class="s5"> </span><span class="s9">'y'</span><span class="s8">,</span><span class="s5"> </span><span class="s1">// Horizontal Bar for better reading</span></p>
<p class="p4"><span class="s1"><span class="Apple-converted-space"> </span>plugins</span><span class="s8">:</span><span class="s1"> </span><span class="s8">{</span></p>
<p class="p4"><span class="s1"><span class="Apple-converted-space"> </span>legend</span><span class="s8">:</span><span class="s1"> </span><span class="s8">{</span><span class="s1"> display</span><span class="s8">:</span><span class="s1"> </span><span class="s11">false</span><span class="s1"> </span><span class="s8">}</span></p>
<p class="p4"><span class="s1"><span class="Apple-converted-space"> </span></span><span class="s8">},</span></p>
<p class="p4"><span class="s1"><span class="Apple-converted-space"> </span>scales</span><span class="s8">:</span><span class="s1"> </span><span class="s8">{</span></p>
<p class="p4"><span class="s1"><span class="Apple-converted-space"> </span>x</span><span class="s8">:</span><span class="s1"> </span><span class="s8">{</span><span class="s1"> beginAtZero</span><span class="s8">:</span><span class="s1"> </span><span class="s11">true</span><span class="s8">,</span><span class="s1"> grid</span><span class="s8">:</span><span class="s1"> </span><span class="s8">{</span><span class="s1"> display</span><span class="s8">:</span><span class="s1"> </span><span class="s11">false</span><span class="s1"> </span><span class="s8">}</span><span class="s1"> </span><span class="s8">},</span></p>
<p class="p4"><span class="s1"><span class="Apple-converted-space"> </span>y</span><span class="s8">:</span><span class="s1"> </span><span class="s8">{</span><span class="s1"> grid</span><span class="s8">:</span><span class="s1"> </span><span class="s8">{</span><span class="s1"> display</span><span class="s8">:</span><span class="s1"> </span><span class="s11">false</span><span class="s1"> </span><span class="s8">}</span><span class="s1"> </span><span class="s8">}</span></p>
<p class="p4"><span class="s1"><span class="Apple-converted-space"> </span></span><span class="s8">}</span></p>
<p class="p4"><span class="s1"><span class="Apple-converted-space"> </span></span><span class="s8">}</span></p>
<p class="p4"><span class="s1"><span class="Apple-converted-space"> </span></span><span class="s8">});</span></p>
<p class="p5"><span class="s7"></span><br></p>
<p class="p6"><span class="s5"><span class="Apple-converted-space"> </span></span><span class="s1">// Populate Filter Dropdown</span></p>
<p class="p4"><span class="s1"><span class="Apple-converted-space"> </span></span><span class="s11">const</span><span class="s1"> selectInfo </span><span class="s8">=</span><span class="s1"> document</span><span class="s8">.</span><span class="s1">getElementById</span><span class="s8">(</span><span class="s9">'categoryFilter'</span><span class="s8">);</span></p>
<p class="p4"><span class="s1"><span class="Apple-converted-space"> </span>catLabels</span><span class="s8">.</span><span class="s1">sort</span><span class="s8">().</span><span class="s1">forEach</span><span class="s8">(</span><span class="s1">cat </span><span class="s8">=></span><span class="s1"> </span><span class="s8">{</span></p>
<p class="p4"><span class="s1"><span class="Apple-converted-space"> </span></span><span class="s11">const</span><span class="s1"> opt </span><span class="s8">=</span><span class="s1"> document</span><span class="s8">.</span><span class="s1">createElement</span><span class="s8">(</span><span class="s9">'option'</span><span class="s8">);</span></p>
<p class="p4"><span class="s1"><span class="Apple-converted-space"> </span>opt</span><span class="s8">.</span><span class="s1">value </span><span class="s8">=</span><span class="s1"> cat</span><span class="s8">;</span></p>
<p class="p4"><span class="s1"><span class="Apple-converted-space"> </span>opt</span><span class="s8">.</span><span class="s1">innerText </span><span class="s8">=</span><span class="s1"> cat</span><span class="s8">;</span></p>
<p class="p4"><span class="s1"><span class="Apple-converted-space"> </span>selectInfo</span><span class="s8">.</span><span class="s1">appendChild</span><span class="s8">(</span><span class="s1">opt</span><span class="s8">);</span></p>
<p class="p4"><span class="s1"><span class="Apple-converted-space"> </span></span><span class="s8">});</span></p>
<p class="p4"><span class="s1"><span class="Apple-converted-space"> </span></span><span class="s8">}</span></p>
<p class="p5"><span class="s7"></span><br></p>
<p class="p6"><span class="s5"><span class="Apple-converted-space"> </span></span><span class="s1">// --- 3. Table/Grid Rendering & Logic ---</span></p>
<p class="p5"><span class="s7"></span><br></p>
<p class="p4"><span class="s1"><span class="Apple-converted-space"> </span></span><span class="s11">function</span><span class="s1"> getAuthBadge</span><span class="s8">(</span><span class="s1">authType</span><span class="s8">)</span><span class="s1"> </span><span class="s8">{</span></p>
<p class="p8"><span class="s5"><span class="Apple-converted-space"> </span></span><span class="s11">if</span><span class="s5"> </span><span class="s8">(</span><span class="s5">authType </span><span class="s8">===</span><span class="s5"> </span><span class="s1">'No Auth'</span><span class="s8">)</span><span class="s5"> </span><span class="s11">return</span><span class="s5"> </span><span class="s1">`<span class="inline-flex items-center rounded-md px-2 py-1 text-xs font-medium badge-auth-none ring-1 ring-inset ring-green-600/20">無須認證</span>`</span><span class="s8">;</span></p>
<p class="p8"><span class="s5"><span class="Apple-converted-space"> </span></span><span class="s11">if</span><span class="s5"> </span><span class="s8">(</span><span class="s5">authType </span><span class="s8">===</span><span class="s5"> </span><span class="s1">'ApiKey'</span><span class="s8">)</span><span class="s5"> </span><span class="s11">return</span><span class="s5"> </span><span class="s1">`<span class="inline-flex items-center rounded-md px-2 py-1 text-xs font-medium badge-auth-key ring-1 ring-inset ring-orange-600/20">API Key</span>`</span><span class="s8">;</span></p>
<p class="p8"><span class="s5"><span class="Apple-converted-space"> </span></span><span class="s11">if</span><span class="s5"> </span><span class="s8">(</span><span class="s5">authType </span><span class="s8">===</span><span class="s5"> </span><span class="s1">'OAuth'</span><span class="s8">)</span><span class="s5"> </span><span class="s11">return</span><span class="s5"> </span><span class="s1">`<span class="inline-flex items-center rounded-md px-2 py-1 text-xs font-medium badge-auth-oauth ring-1 ring-inset ring-blue-700/10">OAuth</span>`</span><span class="s8">;</span></p>
<p class="p8"><span class="s5"><span class="Apple-converted-space"> </span></span><span class="s11">return</span><span class="s5"> </span><span class="s1">`<span class="inline-flex items-center rounded-md bg-gray-50 px-2 py-1 text-xs font-medium text-gray-600 ring-1 ring-inset ring-gray-500/10"></span><span class="s8">${</span><span class="s5">authType</span><span class="s8">}</span><span class="s1"></span>`</span><span class="s8">;</span></p>
<p class="p4"><span class="s1"><span class="Apple-converted-space"> </span></span><span class="s8">}</span></p>
<p class="p5"><span class="s7"></span><br></p>
<p class="p4"><span class="s1"><span class="Apple-converted-space"> </span></span><span class="s11">function</span><span class="s1"> getHttpsIcon</span><span class="s8">(</span><span class="s1">isHttps</span><span class="s8">)</span><span class="s1"> </span><span class="s8">{</span></p>
<p class="p4"><span class="s1"><span class="Apple-converted-space"> </span></span><span class="s11">return</span><span class="s1"> isHttps<span class="Apple-converted-space"> </span></span></p>
<p class="p8"><span class="s5"><span class="Apple-converted-space"> </span></span><span class="s8">?</span><span class="s5"> </span><span class="s1">`<i class="fa-solid fa-lock text-emerald-500" title="HTTPS Supported"></i>`</span><span class="s5"><span class="Apple-converted-space"> </span></span></p>
<p class="p8"><span class="s5"><span class="Apple-converted-space"> </span></span><span class="s8">:</span><span class="s5"> </span><span class="s1">`<i class="fa-solid fa-lock-open text-gray-400" title="HTTP Only"></i>`</span><span class="s8">;</span></p>
<p class="p4"><span class="s1"><span class="Apple-converted-space"> </span></span><span class="s8">}</span></p>
<p class="p5"><span class="s7"></span><br></p>
<p class="p4"><span class="s1"><span class="Apple-converted-space"> </span></span><span class="s11">function</span><span class="s1"> renderTable</span><span class="s8">(</span><span class="s1">data</span><span class="s8">)</span><span class="s1"> </span><span class="s8">{</span></p>
<p class="p4"><span class="s1"><span class="Apple-converted-space"> </span></span><span class="s11">const</span><span class="s1"> tbody </span><span class="s8">=</span><span class="s1"> document</span><span class="s8">.</span><span class="s1">getElementById</span><span class="s8">(</span><span class="s9">'apiTableBody'</span><span class="s8">);</span></p>
<p class="p4"><span class="s1"><span class="Apple-converted-space"> </span>tbody</span><span class="s8">.</span><span class="s1">innerHTML </span><span class="s8">=</span><span class="s1"> </span><span class="s9">''</span><span class="s8">;</span></p>
<p class="p5"><span class="s7"></span><br></p>
<p class="p4"><span class="s1"><span class="Apple-converted-space"> </span>document</span><span class="s8">.</span><span class="s1">getElementById</span><span class="s8">(</span><span class="s9">'showing-count'</span><span class="s8">).</span><span class="s1">innerText </span><span class="s8">=</span><span class="s1"> </span><span class="s9">`顯示 </span><span class="s8">${</span><span class="s1">data</span><span class="s8">.</span><span class="s1">length</span><span class="s8">}</span><span class="s9"> / </span><span class="s8">${</span><span class="s1">apiData</span><span class="s8">.</span><span class="s1">length</span><span class="s8">}</span><span class="s9"> 筆資料`</span><span class="s8">;</span></p>
<p class="p5"><span class="s7"></span><br></p>
<p class="p4"><span class="s1"><span class="Apple-converted-space"> </span></span><span class="s11">if</span><span class="s1"> </span><span class="s8">(</span><span class="s1">data</span><span class="s8">.</span><span class="s1">length </span><span class="s8">===</span><span class="s1"> </span><span class="s13">0</span><span class="s8">)</span><span class="s1"> </span><span class="s8">{</span></p>
<p class="p8"><span class="s5"><span class="Apple-converted-space"> </span>tbody</span><span class="s8">.</span><span class="s5">innerHTML </span><span class="s8">=</span><span class="s5"> </span><span class="s1">`<tr><td colspan="6" class="px-6 py-8 text-center text-slate-400 italic">找不到符合的 API 資源</td></tr>`</span><span class="s8">;</span></p>
<p class="p4"><span class="s1"><span class="Apple-converted-space"> </span></span><span class="s11">return</span><span class="s8">;</span></p>
<p class="p4"><span class="s1"><span class="Apple-converted-space"> </span></span><span class="s8">}</span></p>
<p class="p5"><span class="s7"></span><br></p>
<p class="p4"><span class="s1"><span class="Apple-converted-space"> </span>data</span><span class="s8">.</span><span class="s1">forEach</span><span class="s8">((</span><span class="s1">item</span><span class="s8">,</span><span class="s1"> index</span><span class="s8">)</span><span class="s1"> </span><span class="s8">=></span><span class="s1"> </span><span class="s8">{</span></p>
<p class="p4"><span class="s1"><span class="Apple-converted-space"> </span></span><span class="s11">const</span><span class="s1"> tr </span><span class="s8">=</span><span class="s1"> document</span><span class="s8">.</span><span class="s1">createElement</span><span class="s8">(</span><span class="s9">'tr'</span><span class="s8">);</span></p>
<p class="p8"><span class="s5"><span class="Apple-converted-space"> </span>tr</span><span class="s8">.</span><span class="s5">className </span><span class="s8">=</span><span class="s5"> </span><span class="s1">"hover:bg-slate-50 transition-colors cursor-pointer group"</span><span class="s8">;</span></p>
<p class="p4"><span class="s1"><span class="Apple-converted-space"> </span>tr</span><span class="s8">.</span><span class="s1">onclick </span><span class="s8">=</span><span class="s1"> </span><span class="s8">(</span><span class="s1">e</span><span class="s8">)</span><span class="s1"> </span><span class="s8">=></span><span class="s1"> </span><span class="s8">{</span></p>
<p class="p6"><span class="s5"><span class="Apple-converted-space"> </span></span><span class="s1">// Prevent firing when clicking buttons</span></p>
<p class="p4"><span class="s1"><span class="Apple-converted-space"> </span></span><span class="s11">if</span><span class="s1"> </span><span class="s8">(</span><span class="s1">e</span><span class="s8">.</span><span class="s1">target</span><span class="s8">.</span><span class="s1">closest</span><span class="s8">(</span><span class="s9">'button'</span><span class="s8">)</span><span class="s1"> </span><span class="s8">||</span><span class="s1"> e</span><span class="s8">.</span><span class="s1">target</span><span class="s8">.</span><span class="s1">closest</span><span class="s8">(</span><span class="s9">'a'</span><span class="s8">))</span><span class="s1"> </span><span class="s11">return</span><span class="s8">;</span></p>
<p class="p4"><span class="s1"><span class="Apple-converted-space"> </span>openModal</span><span class="s8">(</span><span class="s1">item</span><span class="s8">);</span></p>
<p class="p4"><span class="s1"><span class="Apple-converted-space"> </span></span><span class="s8">};</span></p>
<p class="p5"><span class="s7"></span><br></p>
<p class="p4"><span class="s1"><span class="Apple-converted-space"> </span>tr</span><span class="s8">.</span><span class="s1">innerHTML </span><span class="s8">=</span><span class="s1"> </span><span class="s9">`</span></p>
<p class="p8"><span class="s1"><span class="Apple-converted-space"> </span><td class="px-6 py-4"></span></p>
<p class="p8"><span class="s1"><span class="Apple-converted-space"> </span><div class="font-medium text-slate-900 group-hover:text-indigo-600 transition-colors"></span><span class="s8">${</span><span class="s5">item</span><span class="s8">.</span><span class="s5">name</span><span class="s8">}</span><span class="s1"></div></span></p>
<p class="p8"><span class="s1"><span class="Apple-converted-space"> </span></td></span></p>
<p class="p8"><span class="s1"><span class="Apple-converted-space"> </span><td class="px-6 py-4"></span></p>
<p class="p8"><span class="s1"><span class="Apple-converted-space"> </span><span class="inline-flex items-center rounded-full bg-slate-100 px-2.5 py-0.5 text-xs font-medium text-slate-800"></span></p>
<p class="p8"><span class="s1"><span class="Apple-converted-space"> </span></span><span class="s8">${</span><span class="s5">item</span><span class="s8">.</span><span class="s5">category</span><span class="s8">}</span></p>
<p class="p8"><span class="s1"><span class="Apple-converted-space"> </span></span></span></p>
<p class="p8"><span class="s1"><span class="Apple-converted-space"> </span></td></span></p>
<p class="p8"><span class="s1"><span class="Apple-converted-space"> </span><td class="px-6 py-4 text-slate-500 truncate max-w-xs" title="</span><span class="s8">${</span><span class="s5">item</span><span class="s8">.</span><span class="s5">desc</span><span class="s8">}</span><span class="s1">"></span></p>
<p class="p8"><span class="s1"><span class="Apple-converted-space"> </span></span><span class="s8">${</span><span class="s5">item</span><span class="s8">.</span><span class="s5">desc</span><span class="s8">}</span></p>
<p class="p8"><span class="s1"><span class="Apple-converted-space"> </span></td></span></p>
<p class="p8"><span class="s1"><span class="Apple-converted-space"> </span><td class="px-6 py-4"></span></p>
<p class="p8"><span class="s1"><span class="Apple-converted-space"> </span></span><span class="s8">${</span><span class="s5">getAuthBadge</span><span class="s8">(</span><span class="s5">item</span><span class="s8">.</span><span class="s5">auth</span><span class="s8">)}</span></p>
<p class="p8"><span class="s1"><span class="Apple-converted-space"> </span></td></span></p>
<p class="p8"><span class="s1"><span class="Apple-converted-space"> </span><td class="px-6 py-4 text-center"></span></p>
<p class="p8"><span class="s1"><span class="Apple-converted-space"> </span></span><span class="s8">${</span><span class="s5">getHttpsIcon</span><span class="s8">(</span><span class="s5">item</span><span class="s8">.</span><span class="s5">https</span><span class="s8">)}</span></p>
<p class="p8"><span class="s1"><span class="Apple-converted-space"> </span></td></span></p>
<p class="p8"><span class="s1"><span class="Apple-converted-space"> </span><td class="px-6 py-4 text-right"></span></p>
<p class="p8"><span class="s1"><span class="Apple-converted-space"> </span><button onclick="copyLink('</span><span class="s8">${</span><span class="s5">item</span><span class="s8">.</span><span class="s5">link</span><span class="s8">}</span><span class="s1">')" class="text-slate-400 hover:text-indigo-600 p-2" title="複製連結"></span></p>
<p class="p8"><span class="s1"><span class="Apple-converted-space"> </span><i class="fa-regular fa-copy"></i></span></p>
<p class="p8"><span class="s1"><span class="Apple-converted-space"> </span></button></span></p>
<p class="p8"><span class="s1"><span class="Apple-converted-space"> </span><a href="</span><span class="s8">${</span><span class="s5">item</span><span class="s8">.</span><span class="s5">link</span><span class="s8">}</span><span class="s1">" target="_blank" class="text-slate-400 hover:text-indigo-600 p-2 ml-1" title="開啟連結"></span></p>
<p class="p8"><span class="s1"><span class="Apple-converted-space"> </span><i class="fa-solid fa-arrow-up-right-from-square"></i></span></p>
<p class="p8"><span class="s1"><span class="Apple-converted-space"> </span></a></span></p>
<p class="p8"><span class="s1"><span class="Apple-converted-space"> </span></td></span></p>
<p class="p8"><span class="s1"><span class="Apple-converted-space"> </span>`</span><span class="s8">;</span></p>
<p class="p4"><span class="s1"><span class="Apple-converted-space"> </span>tbody</span><span class="s8">.</span><span class="s1">appendChild</span><span class="s8">(</span><span class="s1">tr</span><span class="s8">);</span></p>
<p class="p4"><span class="s1"><span class="Apple-converted-space"> </span></span><span class="s8">});</span></p>
<p class="p4"><span class="s1"><span class="Apple-converted-space"> </span></span><span class="s8">}</span></p>
<p class="p5"><span class="s7"></span><br></p>
<p class="p6"><span class="s5"><span class="Apple-converted-space"> </span></span><span class="s1">// --- 4. Filtering Logic ---</span></p>
<p class="p5"><span class="s7"></span><br></p>
<p class="p4"><span class="s1"><span class="Apple-converted-space"> </span></span><span class="s11">function</span><span class="s1"> filterData</span><span class="s8">()</span><span class="s1"> </span><span class="s8">{</span></p>
<p class="p4"><span class="s1"><span class="Apple-converted-space"> </span></span><span class="s11">const</span><span class="s1"> searchTerm </span><span class="s8">=</span><span class="s1"> document</span><span class="s8">.</span><span class="s1">getElementById</span><span class="s8">(</span><span class="s9">'searchInput'</span><span class="s8">).</span><span class="s1">value</span><span class="s8">.</span><span class="s1">toLowerCase</span><span class="s8">();</span></p>
<p class="p4"><span class="s1"><span class="Apple-converted-space"> </span></span><span class="s11">const</span><span class="s1"> category </span><span class="s8">=</span><span class="s1"> document</span><span class="s8">.</span><span class="s1">getElementById</span><span class="s8">(</span><span class="s9">'categoryFilter'</span><span class="s8">).</span><span class="s1">value</span><span class="s8">;</span></p>
<p class="p5"><span class="s7"></span><br></p>
<p class="p4"><span class="s1"><span class="Apple-converted-space"> </span>currentData </span><span class="s8">=</span><span class="s1"> apiData</span><span class="s8">.</span><span class="s1">filter</span><span class="s8">(</span><span class="s1">item </span><span class="s8">=></span><span class="s1"> </span><span class="s8">{</span></p>
<p class="p4"><span class="s1"><span class="Apple-converted-space"> </span></span><span class="s11">const</span><span class="s1"> matchesSearch </span><span class="s8">=</span><span class="s1"> item</span><span class="s8">.</span><span class="s1">name</span><span class="s8">.</span><span class="s1">toLowerCase</span><span class="s8">().</span><span class="s1">includes</span><span class="s8">(</span><span class="s1">searchTerm</span><span class="s8">)</span><span class="s1"> </span><span class="s8">||</span><span class="s1"><span class="Apple-converted-space"> </span></span></p>
<p class="p4"><span class="s1"><span class="Apple-converted-space"> </span>item</span><span class="s8">.</span><span class="s1">desc</span><span class="s8">.</span><span class="s1">toLowerCase</span><span class="s8">().</span><span class="s1">includes</span><span class="s8">(</span><span class="s1">searchTerm</span><span class="s8">)</span><span class="s1"> </span><span class="s8">||</span></p>
<p class="p4"><span class="s1"><span class="Apple-converted-space"> </span>item</span><span class="s8">.</span><span class="s1">category</span><span class="s8">.</span><span class="s1">toLowerCase</span><span class="s8">().</span><span class="s1">includes</span><span class="s8">(</span><span class="s1">searchTerm</span><span class="s8">);</span></p>
<p class="p4"><span class="s1"><span class="Apple-converted-space"> </span></span><span class="s11">const</span><span class="s1"> matchesCategory </span><span class="s8">=</span><span class="s1"> category </span><span class="s8">===</span><span class="s1"> </span><span class="s9">'All'</span><span class="s1"> </span><span class="s8">||</span><span class="s1"> item</span><span class="s8">.</span><span class="s1">category </span><span class="s8">===</span><span class="s1"> category</span><span class="s8">;</span></p>
<p class="p5"><span class="s1"><span class="Apple-converted-space"> </span></span></p>
<p class="p4"><span class="s1"><span class="Apple-converted-space"> </span></span><span class="s11">return</span><span class="s1"> matchesSearch </span><span class="s8">&&</span><span class="s1"> matchesCategory</span><span class="s8">;</span></p>
<p class="p4"><span class="s1"><span class="Apple-converted-space"> </span></span><span class="s8">});</span></p>
<p class="p5"><span class="s7"></span><br></p>
<p class="p4"><span class="s1"><span class="Apple-converted-space"> </span>renderTable</span><span class="s8">(</span><span class="s1">currentData</span><span class="s8">);</span></p>
<p class="p4"><span class="s1"><span class="Apple-converted-space"> </span></span><span class="s8">}</span></p>
<p class="p5"><span class="s7"></span><br></p>
<p class="p6"><span class="s5"><span class="Apple-converted-space"> </span></span><span class="s1">// Event Listeners</span></p>
<p class="p4"><span class="s1"><span class="Apple-converted-space"> </span>document</span><span class="s8">.</span><span class="s1">getElementById</span><span class="s8">(</span><span class="s9">'searchInput'</span><span class="s8">).</span><span class="s1">addEventListener</span><span class="s8">(</span><span class="s9">'input'</span><span class="s8">,</span><span class="s1"> filterData</span><span class="s8">);</span></p>
<p class="p4"><span class="s1"><span class="Apple-converted-space"> </span>document</span><span class="s8">.</span><span class="s1">getElementById</span><span class="s8">(</span><span class="s9">'categoryFilter'</span><span class="s8">).</span><span class="s1">addEventListener</span><span class="s8">(</span><span class="s9">'change'</span><span class="s8">,</span><span class="s1"> filterData</span><span class="s8">);</span></p>
<p class="p5"><span class="s7"></span><br></p>
<p class="p6"><span class="s5"><span class="Apple-converted-space"> </span></span><span class="s1">// --- 5. Modal & Utilities ---</span></p>
<p class="p5"><span class="s7"></span><br></p>
<p class="p4"><span class="s1"><span class="Apple-converted-space"> </span></span><span class="s11">function</span><span class="s1"> openModal</span><span class="s8">(</span><span class="s1">item</span><span class="s8">)</span><span class="s1"> </span><span class="s8">{</span></p>
<p class="p4"><span class="s1"><span class="Apple-converted-space"> </span>document</span><span class="s8">.</span><span class="s1">getElementById</span><span class="s8">(</span><span class="s9">'modalTitle'</span><span class="s8">).</span><span class="s1">innerText </span><span class="s8">=</span><span class="s1"> item</span><span class="s8">.</span><span class="s1">name</span><span class="s8">;</span></p>
<p class="p4"><span class="s1"><span class="Apple-converted-space"> </span>document</span><span class="s8">.</span><span class="s1">getElementById</span><span class="s8">(</span><span class="s9">'modalCategory'</span><span class="s8">).</span><span class="s1">innerText </span><span class="s8">=</span><span class="s1"> item</span><span class="s8">.</span><span class="s1">category</span><span class="s8">;</span></p>
<p class="p4"><span class="s1"><span class="Apple-converted-space"> </span>document</span><span class="s8">.</span><span class="s1">getElementById</span><span class="s8">(</span><span class="s9">'modalDesc'</span><span class="s8">).</span><span class="s1">innerText </span><span class="s8">=</span><span class="s1"> item</span><span class="s8">.</span><span class="s1">desc</span><span class="s8">;</span></p>
<p class="p4"><span class="s1"><span class="Apple-converted-space"> </span>document</span><span class="s8">.</span><span class="s1">getElementById</span><span class="s8">(</span><span class="s9">'modalAuth'</span><span class="s8">).</span><span class="s1">innerHTML </span><span class="s8">=</span><span class="s1"> getAuthBadge</span><span class="s8">(</span><span class="s1">item</span><span class="s8">.</span><span class="s1">auth</span><span class="s8">);</span></p>
<p class="p4"><span class="s1"><span class="Apple-converted-space"> </span>document</span><span class="s8">.</span><span class="s1">getElementById</span><span class="s8">(</span><span class="s9">'modalHttps'</span><span class="s8">).</span><span class="s1">innerText </span><span class="s8">=</span><span class="s1"> item</span><span class="s8">.</span><span class="s1">https </span><span class="s8">?</span><span class="s1"> </span><span class="s9">"支援"</span><span class="s1"> </span><span class="s8">:</span><span class="s1"> </span><span class="s9">"不支援"</span><span class="s8">;</span></p>
<p class="p4"><span class="s1"><span class="Apple-converted-space"> </span>document</span><span class="s8">.</span><span class="s1">getElementById</span><span class="s8">(</span><span class="s9">'modalCors'</span><span class="s8">).</span><span class="s1">innerText </span><span class="s8">=</span><span class="s1"> item</span><span class="s8">.</span><span class="s1">cors</span><span class="s8">;</span></p>
<p class="p4"><span class="s1"><span class="Apple-converted-space"> </span>document</span><span class="s8">.</span><span class="s1">getElementById</span><span class="s8">(</span><span class="s9">'modalLink'</span><span class="s8">).</span><span class="s1">href </span><span class="s8">=</span><span class="s1"> item</span><span class="s8">.</span><span class="s1">link</span><span class="s8">;</span></p>
<p class="p5"><span class="s1"><span class="Apple-converted-space"> </span></span></p>
<p class="p4"><span class="s1"><span class="Apple-converted-space"> </span>document</span><span class="s8">.</span><span class="s1">getElementById</span><span class="s8">(</span><span class="s9">'detailModal'</span><span class="s8">).</span><span class="s1">classList</span><span class="s8">.</span><span class="s1">remove</span><span class="s8">(</span><span class="s9">'hidden'</span><span class="s8">);</span></p>
<p class="p4"><span class="s1"><span class="Apple-converted-space"> </span></span><span class="s8">}</span></p>
<p class="p5"><span class="s7"></span><br></p>
<p class="p4"><span class="s1"><span class="Apple-converted-space"> </span></span><span class="s11">function</span><span class="s1"> closeModal</span><span class="s8">()</span><span class="s1"> </span><span class="s8">{</span></p>
<p class="p4"><span class="s1"><span class="Apple-converted-space"> </span>document</span><span class="s8">.</span><span class="s1">getElementById</span><span class="s8">(</span><span class="s9">'detailModal'</span><span class="s8">).</span><span class="s1">classList</span><span class="s8">.</span><span class="s1">add</span><span class="s8">(</span><span class="s9">'hidden'</span><span class="s8">);</span></p>
<p class="p4"><span class="s1"><span class="Apple-converted-space"> </span></span><span class="s8">}</span></p>
<p class="p5"><span class="s7"></span><br></p>
<p class="p4"><span class="s1"><span class="Apple-converted-space"> </span></span><span class="s11">function</span><span class="s1"> copyLink</span><span class="s8">(</span><span class="s1">url</span><span class="s8">)</span><span class="s1"> </span><span class="s8">{</span></p>
<p class="p4"><span class="s1"><span class="Apple-converted-space"> </span>navigator</span><span class="s8">.</span><span class="s1">clipboard</span><span class="s8">.</span><span class="s1">writeText</span><span class="s8">(</span><span class="s1">url</span><span class="s8">).</span><span class="s1">then</span><span class="s8">(()</span><span class="s1"> </span><span class="s8">=></span><span class="s1"> </span><span class="s8">{</span></p>
<p class="p4"><span class="s1"><span class="Apple-converted-space"> </span></span><span class="s11">const</span><span class="s1"> toast </span><span class="s8">=</span><span class="s1"> document</span><span class="s8">.</span><span class="s1">getElementById</span><span class="s8">(</span><span class="s9">'toast'</span><span class="s8">);</span></p>
<p class="p4"><span class="s1"><span class="Apple-converted-space"> </span>toast</span><span class="s8">.</span><span class="s1">classList</span><span class="s8">.</span><span class="s1">remove</span><span class="s8">(</span><span class="s9">'translate-y-20'</span><span class="s8">);</span></p>
<p class="p4"><span class="s1"><span class="Apple-converted-space"> </span>setTimeout</span><span class="s8">(()</span><span class="s1"> </span><span class="s8">=></span><span class="s1"> </span><span class="s8">{</span></p>
<p class="p4"><span class="s1"><span class="Apple-converted-space"> </span>toast</span><span class="s8">.</span><span class="s1">classList</span><span class="s8">.</span><span class="s1">add</span><span class="s8">(</span><span class="s9">'translate-y-20'</span><span class="s8">);</span></p>
<p class="p4"><span class="s1"><span class="Apple-converted-space"> </span></span><span class="s8">},</span><span class="s1"> </span><span class="s13">2000</span><span class="s8">);</span></p>
<p class="p4"><span class="s1"><span class="Apple-converted-space"> </span></span><span class="s8">});</span></p>
<p class="p4"><span class="s1"><span class="Apple-converted-space"> </span></span><span class="s8">}</span></p>
<p class="p5"><span class="s7"></span><br></p>
<p class="p4"><span class="s1"><span class="Apple-converted-space"> </span></span><span class="s11">function</span><span class="s1"> exportCSV</span><span class="s8">()</span><span class="s1"> </span><span class="s8">{</span></p>
<p class="p8"><span class="s5"><span class="Apple-converted-space"> </span></span><span class="s11">const</span><span class="s5"> headers </span><span class="s8">=</span><span class="s5"> </span><span class="s8">[</span><span class="s1">"Name"</span><span class="s8">,</span><span class="s5"> </span><span class="s1">"Category"</span><span class="s8">,</span><span class="s5"> </span><span class="s1">"Description"</span><span class="s8">,</span><span class="s5"> </span><span class="s1">"Auth"</span><span class="s8">,</span><span class="s5"> </span><span class="s1">"HTTPS"</span><span class="s8">,</span><span class="s5"> </span><span class="s1">"Link"</span><span class="s8">];</span></p>
<p class="p8"><span class="s5"><span class="Apple-converted-space"> </span></span><span class="s11">const</span><span class="s5"> csvContent </span><span class="s8">=</span><span class="s5"> </span><span class="s1">"data:text/csv;charset=utf-8,\uFEFF"</span><span class="s5"><span class="Apple-converted-space"> </span></span></p>
<p class="p4"><span class="s1"><span class="Apple-converted-space"> </span></span><span class="s8">+</span><span class="s1"> headers</span><span class="s8">.</span><span class="s1">join</span><span class="s8">(</span><span class="s9">","</span><span class="s8">)</span><span class="s1"> </span><span class="s8">+</span><span class="s1"> </span><span class="s9">"\n"</span></p>
<p class="p4"><span class="s1"><span class="Apple-converted-space"> </span></span><span class="s8">+</span><span class="s1"> currentData</span><span class="s8">.</span><span class="s1">map</span><span class="s8">(</span><span class="s1">e </span><span class="s8">=></span><span class="s1"> </span><span class="s9">`"</span><span class="s8">${</span><span class="s1">e</span><span class="s8">.</span><span class="s1">name</span><span class="s8">}</span><span class="s9">","</span><span class="s8">${</span><span class="s1">e</span><span class="s8">.</span><span class="s1">category</span><span class="s8">}</span><span class="s9">","</span><span class="s8">${</span><span class="s1">e</span><span class="s8">.</span><span class="s1">desc</span><span class="s8">}</span><span class="s9">","</span><span class="s8">${</span><span class="s1">e</span><span class="s8">.</span><span class="s1">auth</span><span class="s8">}</span><span class="s9">","</span><span class="s8">${</span><span class="s1">e</span><span class="s8">.</span><span class="s1">https</span><span class="s8">}</span><span class="s9">","</span><span class="s8">${</span><span class="s1">e</span><span class="s8">.</span><span class="s1">link</span><span class="s8">}</span><span class="s9">"`</span><span class="s8">).</span><span class="s1">join</span><span class="s8">(</span><span class="s9">"\n"</span><span class="s8">);</span></p>
<p class="p5"><span class="s1"><span class="Apple-converted-space"> </span></span></p>
<p class="p4"><span class="s1"><span class="Apple-converted-space"> </span></span><span class="s11">const</span><span class="s1"> encodedUri </span><span class="s8">=</span><span class="s1"> encodeURI</span><span class="s8">(</span><span class="s1">csvContent</span><span class="s8">);</span></p>
<p class="p4"><span class="s1"><span class="Apple-converted-space"> </span></span><span class="s11">const</span><span class="s1"> link </span><span class="s8">=</span><span class="s1"> document</span><span class="s8">.</span><span class="s1">createElement</span><span class="s8">(</span><span class="s9">"a"</span><span class="s8">);</span></p>
<p class="p4"><span class="s1"><span class="Apple-converted-space"> </span>link</span><span class="s8">.</span><span class="s1">setAttribute</span><span class="s8">(</span><span class="s9">"href"</span><span class="s8">,</span><span class="s1"> encodedUri</span><span class="s8">);</span></p>
<p class="p8"><span class="s5"><span class="Apple-converted-space"> </span>link</span><span class="s8">.</span><span class="s5">setAttribute</span><span class="s8">(</span><span class="s1">"download"</span><span class="s8">,</span><span class="s5"> </span><span class="s1">"public_apis_report.csv"</span><span class="s8">);</span></p>
<p class="p4"><span class="s1"><span class="Apple-converted-space"> </span>document</span><span class="s8">.</span><span class="s1">body</span><span class="s8">.</span><span class="s1">appendChild</span><span class="s8">(</span><span class="s1">link</span><span class="s8">);</span></p>
<p class="p4"><span class="s1"><span class="Apple-converted-space"> </span>link</span><span class="s8">.</span><span class="s1">click</span><span class="s8">();</span></p>
<p class="p4"><span class="s1"><span class="Apple-converted-space"> </span>document</span><span class="s8">.</span><span class="s1">body</span><span class="s8">.</span><span class="s1">removeChild</span><span class="s8">(</span><span class="s1">link</span><span class="s8">);</span></p>
<p class="p4"><span class="s1"><span class="Apple-converted-space"> </span></span><span class="s8">}</span></p>
<p class="p5"><span class="s7"></span><br></p>
<p class="p6"><span class="s5"><span class="Apple-converted-space"> </span></span><span class="s1">// --- Initialization ---</span></p>
<p class="p4"><span class="s1"><span class="Apple-converted-space"> </span>window</span><span class="s8">.</span><span class="s1">onload </span><span class="s8">=</span><span class="s1"> </span><span class="s11">function</span><span class="s8">()</span><span class="s1"> </span><span class="s8">{</span></p>
<p class="p4"><span class="s1"><span class="Apple-converted-space"> </span>renderStats</span><span class="s8">();</span></p>
<p class="p4"><span class="s1"><span class="Apple-converted-space"> </span>renderTable</span><span class="s8">(</span><span class="s1">apiData</span><span class="s8">);</span></p>
<p class="p4"><span class="s1"><span class="Apple-converted-space"> </span></span><span class="s8">};</span></p>
<p class="p5"><span class="s7"></span><br></p>
<p class="p1"><span class="s5"><span class="Apple-converted-space"> </span></span><span class="s3"></</span><span class="s1">script</span><span class="s3">></span></p>
<p class="p1"><span class="s3"></</span><span class="s1">body</span><span class="s3">></span></p>
<p class="p1"><span class="s3"></</span><span class="s1">html</span><span class="s3">></span></p>
</body>
</html>