dev-vault/index.html at main · gokuscraper/dev-vault · GitHub

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
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
649
650
651
652
653
654
655
656
657
658
659
660
661
662
663
664
665
666
667
668
669
670
671
672
673
674
675
676
677
678
679
680
681
682
683
684
685
686
687
688
689
690
691
692
693
694
695
696
697
698
699
700
701
702
703
704
705
706
707
708
709
710
711
712
713
714
715
716
717
718
719
720
721
722
723
724
725
726
727
728
729
730
731
732
733
734
735
736
737
738
739
740
741
742
743
744
745
746
747
748
749
750
751
752
753
754
755
756
757
758
759
760
761
762
763
764
765
766
767
768
769
770
771
772
773
774
775
776
777
778
779
780
781
782
783
784
785
786
787
788
789
790
791
792
793
794
795
796
797
798
799
800
801
802
803
804
805
806
807
808
809
810
811
812
813
814
815
816
817
818
819
820
821
822
823
824
825
826
827
828
829
830
831
832
833
834
835
836
837
838
839
840
841
842
843
844
845
846
847
848
849
850
851
852
853
854
855
856
857
858
859
860
861
862
863
864
865
866
867
868
869
870
871
872
873
874
875
876
877
878
879
880
881
882
883
884
885
886
887
888
889
890
891
892
893
894
895
896
897
898
899
900
901
902
903
904
905
906
907
908
909
910
911
912
913
914
915
916
917
918
919
920
921
922
923
924
925
926
927
928
929
930
931
932
933
934
935
936
937
938
939
940
941
942
943
944
945
946
947
948
949
950
951
952
953
954
955
956
957
958
959
960
961
962
963
964
965
966
967
968
969
970
971
972
973
974
975
976
977
978
979
980
981
982
983
984
985
986
987
988
989
990
991
992
993
994
995
996
997
998
999
1000
<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Dev Vault — Free Developer Tools</title>

<meta name="description" content="Free developer tools. JSON, CSS, regex, color, font, image, API, and more. No signup, no ads, no tracking. Single HTML files.">

<meta property="og:title" content="Dev Vault — Free Developer Tools">

<meta property="og:description" content="JSON, YAML, TOML, CSV, SQL, regex, colors, fonts, image resize, and more. All free.">

<meta property="og:type" content="website">

<meta property="og:url" content="https://gokuscraper.github.io/dev-vault/">

<meta name="twitter:card" content="summary_large_image">

<link rel="canonical" href="https://gokuscraper.github.io/dev-vault/">

<script type="application/ld+json">

{

  "@context": "https://schema.org",

  "@type": "WebApplication",

  "name": "Dev Vault",

  "description": "453 free developer tools. JSON, CSS, regex, color, font, image, API, security, config generators, and more. No signup, no ads, no tracking.",

  "url": "https://gokuscraper.github.io/dev-vault/",

  "applicationCategory": "DeveloperApplication",

  "operatingSystem": "Any",

  "offers": {"@type": "Offer", "price": "0", "priceCurrency": "USD"},

  "author": {"@type": "Person", "name": "gokuscraper", "url": "https://github.com/gokuscraper"}

}

</script>

<style>

*{margin:0;padding:0;box-sizing:border-box}

body{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;background:#0a0a0a;color:#e6e6e6;min-height:100vh}

.container{max-width:960px;margin:0 auto;padding:24px 16px}

.hero{text-align:center;padding:48px 0 32px}

.hero h1{font-size:2.2rem;color:#fff;margin-bottom:10px}

.hero .tagline{font-size:1.1rem;color:#888;margin-bottom:6px}

.hero .meta{font-size:0.85rem;color:#555}


.search-row{max-width:480px;margin:0 auto 24px}

.search-row input{width:100%;padding:12px 18px;border-radius:10px;border:1px solid #333;background:#161616;color:#fff;font-size:1rem;outline:none}

.search-row input:focus{border-color:#3b82f6}


.filters{display:flex;gap:8px;justify-content:center;margin-bottom:28px;flex-wrap:wrap}

.filter-btn{padding:7px 14px;border-radius:8px;border:1px solid #333;background:#161616;color:#888;font-size:0.8rem;cursor:pointer;font-weight:600}

.filter-btn.active{background:#1a2744;color:#4da6ff;border-color:#2a4a7a}

.filter-btn:hover:not(.active){background:#1c1c1c}


.tool-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:14px;margin-bottom:40px}

.tool-card{background:#161616;border:1px solid #222;border-radius:12px;padding:20px;transition:border-color 0.2s,transform 0.2s;text-decoration:none;display:block}

.tool-card:hover{border-color:#3b82f6;transform:translateY(-2px)}

.tool-card .icon{font-size:1.4rem;margin-bottom:8px}

.tool-card h3{font-size:1rem;color:#fff;margin-bottom:6px}

.tool-card p{font-size:0.82rem;color:#888;line-height:1.5}

.tool-card .tag{display:inline-block;font-size:0.68rem;color:#555;background:#1a1a1a;padding:3px 8px;border-radius:10px;margin-top:8px}

.tool-card.featured{border-color:#2a4a7a;background:#0d1520}

.tool-card.featured:hover{border-color:#4da6ff}


.picks{margin-bottom:32px}

.picks h2{font-size:1.1rem;color:#4da6ff;margin-bottom:14px;font-weight:600}

.picks .tool-grid{margin-bottom:0}


.cta{text-align:center;background:#0d1b2a;border:1px solid #1b3a5c;border-radius:14px;padding:28px;margin-bottom:32px}

.cta h2{color:#4da6ff;margin-bottom:8px;font-size:1.2rem}

.cta p{color:#a0c4e8;font-size:0.88rem;margin-bottom:16px}

.cta a{display:inline-block;padding:10px 24px;background:#3b82f6;color:#fff;border-radius:10px;text-decoration:none;font-weight:700;font-size:0.9rem}

.cta a:hover{background:#2563eb}


.principles{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-bottom:32px}

.principle{text-align:center;padding:16px}

.principle .icon{font-size:1.5rem;margin-bottom:8px}

.principle h3{font-size:0.9rem;color:#ccc;margin-bottom:4px}

.principle p{font-size:0.78rem;color:#666}


footer{text-align:center;padding:32px 0;color:#555;font-size:0.78rem;border-top:1px solid #1a1a1a}

footer a{color:#666;text-decoration:none}

footer a:hover{color:#999}

@media(max-width:600px){.tool-grid{grid-template-columns:1fr}.principles{grid-template-columns:1fr}.hero h1{font-size:1.6rem}}


.lang-btn.active{background:#1a2744;color:#4da6ff;border-color:#2a4a7a}
</style>

</head>

<body>

<div class="container" style="position:relative">


<div style="position:absolute;top:16px;right:16px;display:flex;gap:6px;z-index:10"><button class="lang-btn" data-lang="en" onclick="setLang('en')" style="padding:4px 10px;border-radius:6px;border:1px solid #333;background:#161616;color:#888;font-size:0.78rem;cursor:pointer;font-weight:600">EN</button><button class="lang-btn" data-lang="zh" onclick="setLang('zh')" style="padding:4px 10px;border-radius:6px;border:1px solid #333;background:#161616;color:#888;font-size:0.78rem;cursor:pointer;font-weight:600">中</button></div>
  <div class="hero">

  <h1>Dev Vault</h1>

  <div class="tagline">Free browser tools for developers and designers</div>

  <div class="meta">No signup. No ads. No tracking. Single HTML files.</div>

</div>


<div class="search-row">

  <input type="text" id="search" placeholder="Search 500 tools...  ( / to focus)" oninput="filterTools()">

</div>


<div class="filters" id="filters"></div>


<div class="picks" id="picksSection">

  <h2>Staff Picks</h2>

  <div class="tool-grid" id="picksGrid"></div>

</div>


<div class="tool-grid" id="toolGrid"></div>


<div class="principles">

  <div class="principle">

    <div class="icon">0</div>

    <h3>Zero Dependencies</h3>

    <p>Every tool is a single HTML file. No npm, no build step.</p>

  </div>

  <div class="principle">

    <div class="icon">&lt;/&gt;</div>

    <h3>Open Source</h3>

    <p>All tools on GitHub. Fork, modify, self-host.</p>

  </div>

  <div class="principle">

    <div class="icon">~</div>

    <h3>Privacy First</h3>

    <p>Everything runs in your browser. No data leaves your machine.</p>

  </div>

</div>


</div>


<footer>

  <a href="https://github.com/gokuscraper">GitHub</a> ·

  <a href="https://ko-fi.com/gokuscraper">Support on Ko-fi</a> ·

  Built by <a href="https://github.com/gokuscraper">gokuscraper</a>

</footer>


<script>

const TOOLS=[{name:'JSON Format',desc:'Beautify, validate, minify JSON. Tree view, stats, download.',url:'tools/code/json-format.html',cat:'code',icon:'📋'},
{name:'JSON Diff',desc:'Compare two JSON objects. Added, removed, modified with path highlighting.',url:'tools/code/json-diff.html',cat:'code',icon:'🔀'},
{name:'Regex Test',desc:'Live regex tester. Match highlighting, capture groups, 12 common patterns.',url:'tools/code/regex-test.html',cat:'code',icon:'🔍'},
{name:'Diff Text',desc:'Compare two texts side by side. Line diff and word-level diff.',url:'tools/code/diff-text.html',cat:'code',icon:'📝'},
{name:'Cron Explain',desc:'Paste a cron expression. Get plain English + next 10 run times.',url:'tools/code/cron-explain.html',cat:'code',icon:'⏰'},
{name:'Word Count',desc:'Word/char/sentence count. Reading time, readability score, keywords.',url:'tools/writing/word-count.html',cat:'writing',icon:'🔢'},
{name:'Title Score',desc:'Blog title analyzer. 16 scoring elements based on research.',url:'tools/writing/title-score.html',cat:'writing',icon:'📊'},
{name:'README Score',desc:'README quality checker. 16 best-practice checks with grade A-F.',url:'tools/writing/readme-score.html',cat:'writing',icon:'📊'},
{name:'Color Palette',desc:'Pick a color, get 6 harmony palettes. WCAG contrast, CSS/Tailwind export.',url:'tools/design/color-palette.html',cat:'design',icon:'🎨'},
{name:'Font Pair',desc:'20 curated Google Font pairings. Live preview, CSS export.',url:'tools/design/font-pair.html',cat:'design',icon:'🔤'},
{name:'Font Preview',desc:'Browse 1500+ Google Fonts. Live preview, compare up to 6, CSS export.',url:'tools/design/font-preview.html',cat:'design',icon:'🔤'},
{name:'Color Extract',desc:'Extract dominant colors from images. K-means, HEX/RGB/HSL, palette PNG.',url:'tools/design/color-extract.html',cat:'design',icon:'🎨'},
{name:'Contrast Check',desc:'WCAG color contrast checker. AA/AAA compliance, live preview, suggestions.',url:'tools/design/contrast-check.html',cat:'design',icon:'♿'},
{name:'CSS Shadow',desc:'Visual box-shadow generator. Multi-layer, 10 presets, live preview.',url:'tools/design/css-shadow.html',cat:'design',icon:'🌑'},
{name:'gh-stats',desc:'GitHub profile dashboard. Repos, stars, languages, activity timeline.',url:'tools/data/gh-stats.html',cat:'data',icon:'📊'},
{name:'Repo Compare',desc:'Side-by-side GitHub repo comparison. Stars, commits, languages, activity.',url:'tools/data/repo-compare.html',cat:'data',icon:'⚔'},
{name:'npm Health',desc:'npm package health checker. 9 metrics, download trends, grade A-F.',url:'tools/data/npm-health.html',cat:'data',icon:'📊'},
{name:'npm Compare',desc:'Side-by-side npm package comparison. Downloads, size, deps, trends.',url:'tools/data/npm-compare.html',cat:'data',icon:'⚖'},
{name:'Dep Tree',desc:'Visualize npm dependency trees. See what you install before installing.',url:'tools/data/dep-tree.html',cat:'data',icon:'🌳'},
{name:'License Audit',desc:'Upload package.json to spot license conflicts. SPDX categories, copyleft detection, CSV export.',url:'tools/data/license-audit.html',cat:'data',icon:'⚖️'},
{name:'npm Alt',desc:'Find alternative npm packages. Compare downloads, quality, maintenance by keyword overlap.',url:'tools/data/npm-alt.html',cat:'data',icon:'🔀'},
{name:'Semver Calc',desc:'Visual semver range calculator. See which versions match ^, ~, >= ranges. Interactive grid + comparison table.',url:'tools/data/semver-calc.html',cat:'data',icon:'📐'},
{name:'TS Error',desc:'TypeScript error code decoder. 80+ errors with explanations, causes, and fix examples. Search by code or keyword.',url:'tools/code/ts-error.html',cat:'code',icon:'❌'},
{name:'pkg-lint',desc:'package.json quality checker. 25+ checks for fields, metadata, entry points, scripts, deps. Grade A-F.',url:'tools/data/pkg-lint.html',cat:'data',icon:'📦'},
{name:'env-vars',desc:'Environment variable reference. 80+ vars across AWS, GCP, GitHub Actions, Docker, Node.js, and more. Click to copy.',url:'tools/code/env-vars.html',cat:'code',icon:'🔤'},
{name:'gh-releases',desc:'Browse GitHub release notes for any repo. Markdown rendering, version filter, asset downloads. Preset repos included.',url:'tools/data/gh-releases.html',cat:'data',icon:'📋'},
{name:'PyPI Search',desc:'Explore Python packages from PyPI. Version history, dependencies, license, classifiers. pip install copy.',url:'tools/data/pypi-search.html',cat:'data',icon:'🐍'},
{name:'Crate Search',desc:'Explore Rust crates from crates.io. Versions, dependencies, categories, keywords. cargo add copy.',url:'tools/data/crate-search.html',cat:'data',icon:'🦀'},
{name:'can-i-npm',desc:'Check npm package name availability. Batch check, name validation, alternative suggestions. Real-time registry lookup.',url:'tools/data/can-i-npm.html',cat:'data',icon:'📛'},
{name:'npm Dep Graph',desc:'Visualize npm package dependency trees. Force-directed graph, depth 1-3, draggable nodes, SVG export.',url:'tools/data/npm-dep-graph.html',cat:'data',icon:'🕸️'},
{name:'Unicode Search',desc:'Search 500+ Unicode characters. Copy to clipboard, UTF-8/HTML/CSS/JS escapes, category filters, recent history.',url:'tools/code/unicode-search.html',cat:'code',icon:'🔣'},
{name:'GitHub Contrib',desc:'View GitHub user activity. Profile card, event breakdown chart, top languages, most active repos.',url:'tools/data/github-contrib.html',cat:'data',icon:'📊'},
{name:'npm Trends',desc:'Compare npm package download trends. Line chart, period selector, summary table. Up to 5 packages.',url:'tools/data/npm-trends.html',cat:'data',icon:'📈'},
{name:'Port Ref',desc:'Network port reference. 130 well-known ports, 10 categories, security notes, debugging tips.',url:'tools/code/port-ref.html',cat:'code',icon:'🔌'},
{name:'MIME Types',desc:'MIME type reference. 150+ types, two-way lookup (extension↔MIME), Content-Type examples, click to copy.',url:'tools/code/mime-types.html',cat:'code',icon:'📄'},
{name:'GitHub Card',desc:'Generate shareable GitHub profile cards. 6 themes, PNG download.',url:'tools/data/gh-card.html',cat:'data',icon:'🃏'},
{name:'dev.to Stats',desc:'dev.to article performance dashboard. Views, tags, posting patterns.',url:'tools/data/devto-stats.html',cat:'data',icon:'📊'},
{name:'LLM Price',desc:'Compare AI model pricing across 35+ models and 7 providers.',url:'tools/ai/llm-price.html',cat:'ai',icon:'💰',featured:true},
{name:'Prompt Price',desc:'Paste text, see API cost across 35+ models. Token calculator.',url:'tools/ai/prompt-price.html',cat:'ai',icon:'💵',featured:true},
{name:'Model Picker',desc:'4-question quiz to find the right AI model for your use case.',url:'tools/ai/model-picker.html',cat:'ai',icon:'🤖',featured:true},
{name:'AI ROI Calc',desc:'AI vs human cost comparison. Annual savings and ROI calculator.',url:'tools/ai/ai-roi-calc.html',cat:'ai',icon:'📈',featured:true},
{name:'Base64 Tool',desc:'Encode/decode Base64, URL, HTML entities. JWT token decoder.',url:'tools/code/base64-tool.html',cat:'code',icon:'🔐'},
{name:'Hash Gen',desc:'Generate SHA-1, SHA-256, SHA-512 hashes. File hashing, hash compare.',url:'tools/code/hash-gen.html',cat:'code',icon:'🔑'},
{name:'Timestamp',desc:'Unix timestamp converter. ISO 8601, relative time, time diff.',url:'tools/code/timestamp-tool.html',cat:'code',icon:'⏱'},
{name:'CSS Gradient',desc:'Visual gradient generator. Linear, radial, conic. 12 presets.',url:'tools/design/css-gradient.html',cat:'design',icon:'▓'},
{name:'MD Preview',desc:'Live Markdown editor. GFM tables, code blocks, task lists.',url:'tools/writing/md-preview.html',cat:'writing',icon:'📝'},
{name:'Lorem Gen',desc:'Lorem Ipsum placeholder text. Words, sentences, paragraphs.',url:'tools/writing/lorem-gen.html',cat:'writing',icon:'📝'},
{name:'CLAUDE.md Builder',desc:'7-step wizard to generate CLAUDE.md for Claude Code. Best practices built in.',url:'tools/ai/claudemd-builder.html',cat:'ai',icon:'📋',featured:true},
{name:'Commit Msg',desc:'Paste git diff, get Conventional Commit message. 8 types, scope, body.',url:'tools/code/commit-msg.html',cat:'code',icon:'💬'},
{name:'Env Check',desc:'.env file validator. Detect secrets, generate .env.example, compare files.',url:'tools/code/env-check.html',cat:'code',icon:'✅'},
{name:'License Pick',desc:'Find the right OSS license. 4-question quiz, 10 license comparison, full text.',url:'tools/code/license-pick.html',cat:'code',icon:'⚖'},
{name:'Chmod Calc',desc:'Unix file permission calculator. Octal, symbolic, chmod command.',url:'tools/code/chmod-calc.html',cat:'code',icon:'🔢'},
{name:'HTTP Status',desc:'HTTP status code reference. 38 codes, search, filter by category.',url:'tools/code/http-status.html',cat:'code',icon:'🌐'},
{name:'JWT Builder',desc:'Build and decode JWT tokens. Custom claims, expiration analysis.',url:'tools/code/jwt-builder.html',cat:'code',icon:'🪪'},
{name:'Aspect Ratio',desc:'Calculate ratios, resize proportionally. Video, social, print presets.',url:'tools/design/aspect-ratio.html',cat:'design',icon:'📐'},
{name:'Favicon Gen',desc:'Create favicons from emoji or text. Multiple sizes, download PNG.',url:'tools/design/favicon-gen.html',cat:'design',icon:'🖼️'},
{name:'IP Info',desc:'IP address lookup. Geolocation, ISP, timezone, currency. Auto-detect.',url:'tools/data/ip-info.html',cat:'data',icon:'🌐'},
{name:'DNS Lookup',desc:'Query DNS records. A, AAAA, MX, TXT, NS, SOA via Google DNS.',url:'tools/data/dns-lookup.html',cat:'data',icon:'🌐'},
{name:'SSL Check',desc:'SSL/TLS certificate inspector. Security scoring, HSTS, header audit.',url:'tools/data/ssl-check.html',cat:'data',icon:'🔒'},
{name:'Headers Check',desc:'HTTP response header analyzer. 9-point security audit, raw export.',url:'tools/data/headers-check.html',cat:'data',icon:'📋'},
{name:'URL Parser',desc:'Parse URLs into components. Query params, encode/decode, visual breakdown.',url:'tools/code/url-parser.html',cat:'code',icon:'🔗'},
{name:'UUID Gen',desc:'Generate UUID v4, v7, ULID, nanoid. Bulk generate, validate, parse.',url:'tools/code/uuid-gen.html',cat:'code',icon:'🆔'},
{name:'Emoji Picker',desc:'Search 300+ emojis. Click to copy. Categories, recently used.',url:'tools/design/emoji-picker.html',cat:'design',icon:'😀'},
{name:'QR Code',desc:'Generate QR codes for URLs, WiFi, email, phone. Custom colors, PNG.',url:'tools/design/qr-code.html',cat:'design',icon:'📱'},
{name:'Password Gen',desc:'Secure random password generator. Entropy meter, bulk generate.',url:'tools/code/password-gen.html',cat:'code',icon:'🔒'},
{name:'Meta Tags',desc:'Generate SEO, OGP, Twitter Card meta tags. Google & social preview.',url:'tools/code/meta-tags.html',cat:'code',icon:'🏷️'},
{name:'SVG Preview',desc:'Live SVG editor. Optimize, convert to data URI or CSS background. Download PNG.',url:'tools/design/svg-preview.html',cat:'design',icon:'🖼️'},
{name:'Box Model',desc:'Interactive CSS box model visualizer. Adjust margin, border, padding, content. Copy CSS.',url:'tools/design/box-model.html',cat:'design',icon:'📦'},
{name:'CSS Flex',desc:'Interactive flexbox playground. Adjust container & item properties, see layout live. Copy CSS.',url:'tools/design/css-flex.html',cat:'design',icon:'⇔'},
{name:'CSS Grid',desc:'Visual grid layout generator. Define columns, rows, gaps. Place items. Copy CSS.',url:'tools/design/css-grid.html',cat:'design',icon:'⊞'},
{name:'HTML Escape',desc:'Encode/decode HTML entities. 56 named entity reference. Click to copy.',url:'tools/code/html-escape.html',cat:'code',icon:'&️⃣'},
{name:'Markdown Table',desc:'Visual markdown table generator. Edit cells, set alignment. Copy markdown.',url:'tools/writing/markdown-table.html',cat:'writing',icon:'📊'},
{name:'CSS Animation',desc:'Keyframe animation generator. 12 presets (bounce, pulse, shake, spin). Custom timing, easing.',url:'tools/design/css-animation.html',cat:'design',icon:'▸▸'},
{name:'Border Radius',desc:'Visual border-radius generator. 4-corner sliders, 10 presets, link/unlink mode.',url:'tools/design/border-radius.html',cat:'design',icon:'◜◝'},
{name:'CSS Filter',desc:'Visual CSS filter generator. Blur, brightness, contrast, saturate, hue-rotate. 10 presets.',url:'tools/design/css-filter.html',cat:'design',icon:'◑'},
{name:'Text Transform',desc:'Case converter: UPPER, lower, Title, camelCase, snake_case, kebab-case. Sort, dedupe, trim.',url:'tools/code/text-transform.html',cat:'code',icon:'Aa→'},
{name:'Spacing Calc',desc:'Design system spacing scale generator. Tailwind, Material, Bootstrap presets. CSS/SCSS/Tailwind export.',url:'tools/design/spacing-calc.html',cat:'design',icon:'⊟'},
{name:'CSS Units',desc:'Convert between CSS units: px, rem, em, vw, vh, %, pt, cm. Auto-detect viewport.',url:'tools/design/css-units.html',cat:'design',icon:'px↔'},
{name:'Color Convert',desc:'Convert colors: HEX, RGB, HSL, HSB, CMYK. Color picker, WCAG contrast check.',url:'tools/design/color-convert.html',cat:'design',icon:'#→'},
{name:'Image Resize',desc:'Resize images in browser. Aspect ratio lock, PNG/JPEG/WebP export, quality control.',url:'tools/design/image-resize.html',cat:'design',icon:'📐'},
{name:'CSV ↔ JSON',desc:'Convert CSV to JSON and back. Auto-detect headers, custom delimiters, table preview.',url:'tools/code/csv-json.html',cat:'code',icon:'⇄'},
{name:'SQL Format',desc:'Format and beautify SQL queries. Uppercase keywords, indent, minify. 6 presets.',url:'tools/code/sql-format.html',cat:'code',icon:'🗄️'},
{name:'YAML ↔ JSON',desc:'Convert YAML to JSON and back. Docker Compose sample. Live validation.',url:'tools/code/yaml-json.html',cat:'code',icon:'🔄'},
{name:'TOML ↔ JSON',desc:'Convert TOML to JSON and back. Cargo.toml, pyproject.toml presets.',url:'tools/code/toml-json.html',cat:'code',icon:'🔄'},
{name:'CSS Clip-Path',desc:'Visual clip-path generator. Drag points, presets, circle/ellipse/inset/polygon.',url:'tools/design/css-clip-path.html',cat:'design',icon:'✂'},
{name:'Placeholder Image',desc:'Generate placeholder images. Custom size, colors, text. PNG/JPEG/WebP download.',url:'tools/design/placeholder-img.html',cat:'design',icon:'▧'},
{name:'JSON → TypeScript',desc:'Generate TypeScript interfaces from JSON. Smart type inference, nested objects.',url:'tools/code/json-to-ts.html',cat:'code',icon:'🔷'},
{name:'Color Blind Sim',desc:'Simulate 8 types of color blindness on any image. Accessibility testing.',url:'tools/design/color-blind-sim.html',cat:'design',icon:'👁',featured:true},
{name:'OG Preview',desc:'Preview how URLs look on Twitter, Facebook, LinkedIn, Slack, Discord.',url:'tools/data/og-preview.html',cat:'data',icon:'🔍'},
{name:'CSS Text Shadow',desc:'Visual text-shadow generator. Multi-layer, 12 presets, live preview.',url:'tools/design/css-text-shadow.html',cat:'design',icon:'🌓'},
{name:'Regex Replace',desc:'Find & replace with regex. Live preview, match highlights, backreferences.',url:'tools/code/regex-replace.html',cat:'code',icon:'✂️'},
{name:'CSS Glass',desc:'Glassmorphism generator. Blur, opacity, borders. Live preview, 8 presets.',url:'tools/design/css-glass.html',cat:'design',icon:'◻'},
{name:'JSON Path',desc:'Query JSON with JSONPath. Filters, recursive descent, array slicing.',url:'tools/code/json-path.html',cat:'code',icon:'📍'},
{name:'CSS Neumorphism',desc:'Soft UI generator. Flat, concave, convex, pressed. Auto shadow colors.',url:'tools/design/css-neumorphism.html',cat:'design',icon:'⬜'},
{name:'Char Count',desc:'Character counter with Twitter, Instagram, LinkedIn, SMS limits.',url:'tools/writing/char-count.html',cat:'writing',icon:'🔢'},
{name:'Encode Decode',desc:'URL, Base64, HTML, Unicode, Hex, Binary, ROT13, Punycode. All in one.',url:'tools/code/encode-decode.html',cat:'code',icon:'⇌'},
{name:'HSL Picker',desc:'HSL color picker with harmonies, lightness/saturation scales, history.',url:'tools/design/hsl-picker.html',cat:'design',icon:'◐'},
{name:'Number Base',desc:'Convert binary, hex, octal, decimal. Bit visualization, two\'s complement.',url:'tools/code/number-base.html',cat:'code',icon:'🔢'},
{name:'Data URI',desc:'Convert files to data URIs. Images, SVG, CSS. Copy as background or img tag.',url:'tools/code/data-uri.html',cat:'code',icon:'🖼️'},
{name:'Case Convert',desc:'camelCase, snake_case, PascalCase, kebab-case and 10+ naming conventions.',url:'tools/code/case-convert.html',cat:'code',icon:'🔤'},
{name:'Subnet Calc',desc:'IP subnet calculator. Network, broadcast, host range, CIDR, visual breakdown.',url:'tools/code/subnet-calc.html',cat:'code',icon:'🌐',featured:true},
{name:'JSON Schema',desc:'Generate JSON Schema from samples. Type inference, validation, multiple drafts.',url:'tools/code/json-schema.html',cat:'code',icon:'📋'},
{name:'Keycode',desc:'Press any key to see keyCode, key, code, which. Clipboard copy, history.',url:'tools/code/keycode.html',cat:'code',icon:'⌨'},
{name:'CSS Cursor',desc:'Preview all 37 CSS cursor types. Click to copy, live test area.',url:'tools/design/css-cursor.html',cat:'design',icon:'↗'},
{name:'CSS Transform',desc:'Visual transform generator. Translate, rotate, scale, skew, perspective. 10 presets.',url:'tools/design/css-transform.html',cat:'design',icon:'⟳'},
{name:'Git Cheatsheet',desc:'57 Git commands with examples. Search, categories, danger levels.',url:'tools/code/git-cheatsheet.html',cat:'code',icon:'📘'},
{name:'Regex Cheatsheet',desc:'67 regex patterns with examples. Search, categories, click to copy.',url:'tools/code/regex-cheatsheet.html',cat:'code',icon:'📘'},
{name:'CSS Transition',desc:'Visual transition generator. Duration, delay, cubic-bezier editor. 10 presets.',url:'tools/design/css-transition.html',cat:'design',icon:'→→'},
{name:'HTML to JSX',desc:'Convert HTML to valid JSX/React. class→className, inline style objects.',url:'tools/code/html-to-jsx.html',cat:'code',icon:'⚛️'},
{name:'CSS Variables',desc:'Custom properties generator. Theme builder, 6 starter themes, 4 export formats.',url:'tools/design/css-variable.html',cat:'design',icon:'🏷️'},
{name:'Tailwind Converter',desc:'CSS ↔ Tailwind bidirectional converter. 200+ utilities, spacing scale.',url:'tools/code/tailwind-converter.html',cat:'code',icon:'🎨',featured:true},
{name:'CSS Media Query',desc:'Visual media query builder. 25 device/framework presets, breakpoint visualizer.',url:'tools/design/css-media.html',cat:'design',icon:'📱'},
{name:'CSS Specificity',desc:'Specificity calculator. Compare selectors, quiz mode, :where()/:is() support.',url:'tools/design/css-specificity.html',cat:'design',icon:'🎯'},
{name:'JS Minifier',desc:'Minify & beautify JavaScript. Comment/whitespace removal, boolean shortening.',url:'tools/code/js-minifier.html',cat:'code',icon:'✂️'},
{name:'Color Mixer',desc:'Mix colors with weights. RGB/HSL/CIELAB modes, 8 presets, history.',url:'tools/design/color-mixer.html',cat:'design',icon:'🎨'},
{name:'CSS Minifier',desc:'Minify & beautify CSS. Color shortening, duplicate merge, statistics.',url:'tools/code/css-minifier.html',cat:'code',icon:'✂️'},
{name:'JSON Viewer',desc:'Interactive tree viewer. Search, path copy, table mode, virtualized.',url:'tools/code/json-viewer.html',cat:'code',icon:'{▸}'},
{name:'API Tester',desc:'Browser REST client. Send requests, view responses, history. 5 presets.',url:'tools/code/api-tester.html',cat:'code',icon:'🧪'},
{name:'CSS Reset',desc:'Browse, compare, customize 8 popular CSS resets. Custom builder.',url:'tools/design/css-reset.html',cat:'design',icon:'↺'},
{name:'Dep Changelog',desc:'See what changed in your dependencies. npm registry + GitHub releases + breaking change detection.',url:'tools/data/dep-changelog.html',cat:'data',icon:'📋'},
{name:'Locale Format',desc:'See how dates, numbers, and currencies render in 25+ locales using the Intl API.',url:'tools/code/locale-format.html',cat:'code',icon:'🌐'},
{name:'CSP Builder',desc:'Build Content Security Policy headers visually. 16 directives, 4 presets.',url:'tools/security/csp-builder.html',cat:'security',icon:'🛡️'},
{name:'SRI Gen',desc:'Generate SRI integrity hashes for CDN scripts. SHA-256/384/512.',url:'tools/security/sri-gen.html',cat:'security',icon:'🔒'},
{name:'Robots.txt',desc:'Build and validate robots.txt files. AI crawler blocking, 5 templates.',url:'tools/security/robots-txt.html',cat:'security',icon:'🤖'},
{name:'CORS Test',desc:'Test CORS headers for any URL. Diagnose cross-origin issues instantly.',url:'tools/security/cors-test.html',cat:'security',icon:'⛓'},
{name:'Cookie Check',desc:'Analyze HTTP cookie security. SameSite, Secure, HttpOnly audit with grades.',url:'tools/security/cookie-check.html',cat:'security',icon:'🍪'},
{name:'gitignore Gen',desc:'Generate .gitignore from 150+ GitHub templates. Combine languages, IDEs, OS.',url:'tools/code/gitignore-gen.html',cat:'code',icon:'📄'},
{name:'htaccess Gen',desc:'Generate .htaccess files. Redirects, caching, HTTPS, CORS, security. 7 presets.',url:'tools/code/htaccess-gen.html',cat:'code',icon:'⚙️'},
{name:'Env Gen',desc:'Generate .env files for any framework. 12 templates, random secrets, .env.example.',url:'tools/code/env-gen.html',cat:'code',icon:'🔤'},
{name:'Nginx Config',desc:'Generate nginx.conf visually. Reverse proxy, SSL, gzip, security. 6 presets.',url:'tools/code/nginx-config.html',cat:'code',icon:'⚙️'},
{name:'Dockerfile Gen',desc:'Generate Dockerfile, .dockerignore, docker-compose.yml. 10 languages. Multi-stage builds.',url:'tools/code/dockerfile-gen.html',cat:'code',icon:'🐳'},
{name:'GH Actions Gen',desc:'Build GitHub Actions CI/CD workflows visually. 8 templates: Node.js, Python, Go, Rust, Docker, npm publish.',url:'tools/code/gh-actions-gen.html',cat:'code',icon:'⚡'},
{name:'Makefile Gen',desc:'Generate Makefiles visually. C/C++, Go, Python, Docker, Node.js, Rust, LaTeX templates. Custom targets.',url:'tools/code/makefile-gen.html',cat:'code',icon:'🔧'},
{name:'package.json Gen',desc:'Create npm package.json visually. CLI, Library, Web App, Express, TypeScript, Monorepo templates.',url:'tools/code/package-json-gen.html',cat:'code',icon:'📦'},
{name:'tsconfig Gen',desc:'Build tsconfig.json visually. Node.js, React, Next.js, Library, CLI, Deno presets. Path aliases.',url:'tools/code/tsconfig-gen.html',cat:'code',icon:'⚙️'},
{name:'ESLint Config Gen',desc:'Build ESLint v9 flat config visually. TypeScript, React, Next.js, Node.js, Strict presets. Rules editor.',url:'tools/code/eslint-config-gen.html',cat:'code',icon:'🧹'},
{name:'Prettier Config Gen',desc:'Build .prettierrc visually. Airbnb, Standard, Google presets. Live code preview. JSON/YAML/JS output.',url:'tools/code/prettier-config-gen.html',cat:'code',icon:'✨'},
{name:'EditorConfig Gen',desc:'Generate .editorconfig visually. Per-filetype indent, charset, EOL rules. 6 presets.',url:'tools/code/editorconfig-gen.html',cat:'code',icon:'⚙️'},
{name:'License Chooser',desc:'Compare 11 open source licenses side-by-side. Permissions, conditions, limitations. Generate LICENSE file.',url:'tools/code/license-gen.html',cat:'code',icon:'📜'},
{name:'README Gen',desc:'Scaffold README.md visually. Badges, install, usage, API, contributing sections. 6 project templates.',url:'tools/code/readme-gen.html',cat:'code',icon:'📖'},
{name:'Commit Message Gen',desc:'Build conventional commit messages. Type, scope, body, breaking changes, co-authors. Gitmoji support.',url:'tools/code/commit-gen.html',cat:'code',icon:'💬'},
{name:'Dependabot Config Gen',desc:'Build .github/dependabot.yml visually. 14 ecosystems, schedule, groups, ignore rules. 6 project presets.',url:'tools/code/dependabot-gen.html',cat:'code',icon:'🤖'},
{name:'Cron Builder',desc:'Build cron expressions visually. 12 presets, quick-set dropdowns, next 5 run times, human-readable explanation.',url:'tools/code/cron-builder.html',cat:'code',icon:'⏰'},
{name:'JSON Schema Gen',desc:'Infer JSON Schema from sample data. Auto-detect types, formats, required fields. Draft 2020-12. 5 sample templates.',url:'tools/code/json-schema-gen.html',cat:'code',icon:'📋'},
{name:'cURL Builder',desc:'Build curl commands visually. Method, headers, body, auth, query params. 5 presets. Shell-safe escaping.',url:'tools/code/curl-builder.html',cat:'code',icon:'🌐'},
{name:'Nginx Config Gen',desc:'Generate nginx server blocks visually. Reverse proxy, SPA, PHP, SSL, gzip, rate limiting. 8 presets.',url:'tools/code/nginx-config-gen.html',cat:'code',icon:'⚙️'},
{name:'Docker Compose Gen',desc:'Build docker-compose.yml visually. Services, volumes, networks, env vars. 8 stack presets (MERN, WordPress, etc).',url:'tools/code/docker-compose-gen.html',cat:'code',icon:'🐳'},
{name:'SSH Config Gen',desc:'Build ~/.ssh/config visually. Host entries, keys, ProxyJump, port forwarding. 6 presets.',url:'tools/code/ssh-config-gen.html',cat:'code',icon:'🔑'},
{name:'Systemd Service Gen',desc:'Generate systemd .service unit files visually. Type, restart, security hardening, logging. 8 presets.',url:'tools/code/systemd-gen.html',cat:'code',icon:'⚙️'},
{name:'GitHub Profile Gen',desc:'Build GitHub profile README.md visually. Badges, stats cards, tech stack, social links. 6 themes.',url:'tools/code/github-profile-gen.html',cat:'code',icon:'👤'},
{name:'Image Filter',desc:'Apply image filters in your browser. 9 adjustments + 10 presets (vintage, dramatic, noir). PNG/JPEG download. No upload.',url:'tools/image/image-filter.html',cat:'image',icon:'🎨'},
{name:'Image Crop',desc:'Crop images in your browser. Aspect ratio presets (1:1, 16:9, 4:3, OG Image). Drag selection with rule-of-thirds grid. PNG/JPEG download.',url:'tools/image/image-crop.html',cat:'image',icon:'✂️'},
{name:'Image Color Picker',desc:'Pick colors from any image. Auto-extract dominant palettes. HEX/RGB/HSL. Zoom ring eyedropper. Export CSS/SCSS/Tailwind vars.',url:'tools/color/color-picker-image.html',cat:'color',icon:'🎨'},
{name:'Chart Builder',desc:'Create bar, line, pie, doughnut, area charts from data. 5 color palettes. Dark/white/transparent background. Download PNG.',url:'tools/data/chart-builder.html',cat:'data',icon:'📊'},
{name:'Image Watermark',desc:'Add text or image watermarks to photos. Adjust position, opacity, size, rotation. Tiling mode. PNG/JPEG download. No upload.',url:'tools/image/image-watermark.html',cat:'image',icon:'💧'},
{name:'Image Compare',desc:'Compare two images with before/after slider. Side-by-side and pixel difference modes. Drag to reveal. No upload.',url:'tools/image/image-compare.html',cat:'image',icon:'🔀'},
{name:'Image to Base64',desc:'Convert images to Base64 data URIs. Get CSS background-image, HTML img tag, Markdown, raw Base64. Size stats.',url:'tools/image/image-to-base64.html',cat:'image',icon:'🔄'},
{name:'Sprite Sheet',desc:'Combine multiple images into a CSS sprite sheet. Horizontal/vertical/grid layout. Auto-generate CSS with background-position.',url:'tools/image/sprite-sheet.html',cat:'image',icon:'🖼️'},
{name:'K8s YAML Generator',desc:'Generate Kubernetes YAML manifests. Deployment, Service, Ingress, ConfigMap, Secret, CronJob, PVC. 6 stack presets.',url:'tools/devops/k8s-yaml-gen.html',cat:'devops',icon:'☸️'},
{name:'GitHub Actions Generator',desc:'Create CI/CD workflow YAML visually. Node.js, Python, Go, Rust, Docker presets. Triggers, steps, matrix, caching.',url:'tools/devops/github-actions-gen.html',cat:'devops',icon:'⚡'},
{name:'Terraform Generator',desc:'Generate Terraform HCL visually. AWS (EC2, S3, RDS, VPC, Lambda), GCP, Azure. 3 providers × 6-8 resources. Presets.',url:'tools/devops/terraform-gen.html',cat:'devops',icon:'🏗️'},
{name:'Grafana Dashboard',desc:'Generate import-ready Grafana dashboard JSON. Panels, PromQL queries, thresholds. Node Exporter, Docker, K8s, API presets.',url:'tools/devops/grafana-dashboard-gen.html',cat:'devops',icon:'📊'},
{name:'JWT Debugger',desc:'Decode and inspect JWT tokens. View header, payload, claims. Build new tokens. Expiration check. Samples included.',url:'tools/security/jwt-debugger.html',cat:'security',icon:'🪪'},
{name:'API Mock Generator',desc:'Generate realistic mock API responses. Users, posts, products, auth. JSON/XML. Status codes, pagination, error responses.',url:'tools/api/api-mock-gen.html',cat:'api',icon:'🧪'},
{name:'Meta Tag Generator',desc:'Generate SEO & social media meta tags. Open Graph, Twitter Card. Google search preview. Live social card preview.',url:'tools/seo/meta-tag-gen.html',cat:'seo',icon:'🏷️'},
{name:'robots.txt Generator',desc:'Create robots.txt visually. User-agent rules, allow/disallow paths. Block AI crawlers preset. Sitemap URL. Download ready.',url:'tools/seo/robots-txt-gen.html',cat:'seo',icon:'🤖'},
{name:'CORS Header Generator',desc:'Generate CORS configurations. Nginx, Apache, Express, Flask, Spring Boot. Methods, headers, credentials. 4 presets.',url:'tools/devops/cors-tester.html',cat:'devops',icon:'🔗'},
{name:'Changelog Generator',desc:'Create CHANGELOG.md following Keep a Changelog format. Version entries, semantic versioning. Compare links. Copy or download.',url:'tools/code/changelog-gen.html',cat:'code',icon:'📋'},
{name:'OG Image Generator',desc:'Create Open Graph images (1200×630) with Canvas. Gradients, text, badges, patterns. 5 presets. Download PNG or copy to clipboard.',url:'tools/design/og-image-gen.html',cat:'design',icon:'🖼️'},
{name:'Performance Budget',desc:'Calculate page performance budget. Asset sizes, load times for 3G/4G/WiFi/Fiber. Visual breakdown. Optimization recommendations.',url:'tools/code/performance-budget.html',cat:'code',icon:'📊'},
{name:'Manifest Generator',desc:'Create manifest.json for PWAs. Icons, display mode, theme colors, shortcuts, screenshots. Download JSON or webmanifest.',url:'tools/code/manifest-gen.html',cat:'code',icon:'📋'},
{name:'Security Headers',desc:'Generate HTTP security headers. HSTS, X-Frame-Options, Permissions-Policy. Nginx, Apache, Express configs. A-F security grade.',url:'tools/security/security-headers.html',cat:'security',icon:'🛡️'},
{name:'Accessibility Checker',desc:'WCAG compliance checker. Color contrast ratio calculator. Touch target sizes. Interactive checklist. ARIA landmark reference.',url:'tools/design/a11y-check.html',cat:'design',icon:'♿'},
{name:'SVG Optimizer',desc:'Clean and minify SVG code. Remove comments, metadata, editor attributes. Live preview. Export as data URI or CSS background.',url:'tools/design/svg-optimizer.html',cat:'design',icon:'✂️'},
{name:'XML Formatter',desc:'Format, validate, and minify XML. Convert to JSON. XPath queries. Syntax highlighting. Statistics and error reporting.',url:'tools/code/xml-formatter.html',cat:'code',icon:'📄'},
{name:'.env Validator',desc:'Validate .env files. Detect duplicates, empty values, security risks. Compare .env vs .env.example. Generate .env.example.',url:'tools/code/env-validator.html',cat:'code',icon:'✅'},
{name:'Typography Scale',desc:'Generate harmonious type scales. Modular ratios from Minor Second to Golden Ratio. CSS vars, SCSS, Tailwind. Live preview.',url:'tools/design/typography-scale.html',cat:'design',icon:'📐'},
{name:'Animation Easing',desc:'Preview CSS easing functions. Interactive cubic-bezier editor. 16 presets. Compare animations side-by-side. Steps function.',url:'tools/css/animation-easing.html',cat:'css',icon:'🎬'},
{name:'Color Harmony',desc:'Generate harmonious palettes from color theory. Complementary, analogous, triadic. Color wheel. Tints & shades. Export CSS, SCSS, Tailwind.',url:'tools/design/color-harmony.html',cat:'design',icon:'🎨'},
{name:'Grid Calculator',desc:'Calculate CSS grid layouts visually. Column widths, gaps, areas. Responsive breakpoints. Holy Grail, dashboard, gallery presets.',url:'tools/css/grid-calculator.html',cat:'css',icon:'📐'},
{name:'Responsive Breakpoints',desc:'Manage responsive breakpoints visually. Bootstrap, Tailwind, Material presets. CSS media queries, SCSS mixins. Device preview.',url:'tools/css/responsive-breakpoints.html',cat:'css',icon:'📱'},
{name:'Table Generator',desc:'Create tables in HTML, Markdown, CSV, JSON, LaTeX, ASCII. Interactive editor. Import CSV/JSON. Style options. Sort columns.',url:'tools/code/table-gen.html',cat:'code',icon:'📊'},
{name:'CSS Scroll Snap',desc:'Generate CSS scroll snap layouts. Horizontal carousel, vertical sections, gallery. Live preview. Mandatory vs proximity.',url:'tools/css/css-scroll-snap.html',cat:'css',icon:'📐'},
{name:'Form Builder',desc:'Build HTML forms visually. 13 field types. Export HTML, React JSX, Vue. Contact, login, registration presets. Drag to reorder.',url:'tools/code/form-builder.html',cat:'code',icon:'📝'},
{name:'Regex Visualizer',desc:'Visualize and explain regular expressions. Match highlighting, group capture, replace mode. Quick reference. Presets included.',url:'tools/code/regex-visual.html',cat:'code',icon:'🔍'},
{name:'API Rate Calculator',desc:'Calculate API rate limits. Token bucket, sliding window algorithms. JS, Python, Go code. Cost calculator. GitHub, OpenAI presets.',url:'tools/api/api-rate-calc.html',cat:'api',icon:'📊'},
{name:'Tone Generator',desc:'Generate audio frequencies with Web Audio API. Sine, square, sawtooth, triangle waveforms. Musical note detection. Octave shift. Detune.',url:'tools/code/tone-gen.html',cat:'code',icon:'🎵'},
{name:'Noise Generator',desc:'White, pink & brown noise generator. Low-pass and high-pass filters. Auto-stop timer. Great for focus, sleep, and audio testing.',url:'tools/code/noise-gen.html',cat:'code',icon:'🔊'},
{name:'Web Metronome',desc:'Precise metronome with tap tempo. Time signatures, subdivisions, BPM presets. Click, beep, woodblock sounds. Beat visualization.',url:'tools/code/metronome.html',cat:'code',icon:'🎵'},
{name:'Frequency Calculator',desc:'Musical note frequency reference. Equal temperament table. Hz-to-note converter. MIDI numbers. Wavelength. Interval calculator.',url:'tools/code/frequency-calc.html',cat:'code',icon:'🎵'},
{name:'Audio Visualizer',desc:'Real-time audio visualization. Microphone or file input. Spectrum analyzer, waveform, circular mode. FFT size and color themes.',url:'tools/code/audio-visualizer.html',cat:'code',icon:'📊'},
{name:'Color Name Finder',desc:'Find the nearest CSS named color for any hex, RGB, or HSL value. All 148 CSS colors. Top 5 closest matches. Color family filter.',url:'tools/design/color-name.html',cat:'design',icon:'🎨'},
{name:'CSS Gradient Text',desc:'Generate gradient text effects. Linear, radial, conic gradients. Animation toggle. 10 beautiful presets. Text stroke option.',url:'tools/css/gradient-text.html',cat:'css',icon:'🌈'},
{name:'Text to Speech',desc:'Browser-based text-to-speech. Multiple voices and languages. Rate, pitch, volume controls. Word highlighting. Fun presets.',url:'tools/code/text-to-speech.html',cat:'code',icon:'🔊'},
{name:'ASCII Art Generator',desc:'Convert text to ASCII art. Multiple built-in fonts: Standard, Banner, Small, Script, Shadow. Copy or download as .txt.',url:'tools/code/ascii-art.html',cat:'code',icon:'🎨'},
{name:'Typing Speed Test',desc:'Measure typing speed in WPM. Easy, medium, hard, code modes. Live accuracy tracking. History with best score.',url:'tools/code/typing-speed.html',cat:'code',icon:'⌨️'},
{name:'Reading Time Calculator',desc:'Estimate reading time, speaking time. Flesch readability scores. Word, sentence, paragraph counts. Medium-style badge.',url:'tools/writing/reading-time.html',cat:'writing',icon:'⏱️'},
{name:'Screen Resolution',desc:'Device and viewport info. Screen size, DPR, color depth, orientation. CSS media query tester. Device comparison table.',url:'tools/code/screen-resolution.html',cat:'code',icon:'📱'},
{name:'Pomodoro Timer',desc:'Focus timer with work/break cycles. SVG progress ring. Browser notifications. Audio alerts. Session history in localStorage.',url:'tools/code/pomodoro.html',cat:'code',icon:'🍅'},
{name:'Stopwatch',desc:'Precision timer with lap tracking. Fastest/slowest lap highlights. Keyboard shortcuts. Fullscreen mode. Export laps as CSV.',url:'tools/code/stopwatch.html',cat:'code',icon:'⏱️'},
{name:'Countdown Timer',desc:'Custom countdown timers. Quick presets. Multiple simultaneous timers. Browser notifications. Audio alerts on completion.',url:'tools/code/countdown-timer.html',cat:'code',icon:'⏳'},
{name:'HTML Entity Reference',desc:'Search and browse 200+ HTML entities. Arrows, math, currency, Greek, symbols. Click to copy. Category filter. Character converter.',url:'tools/code/html-entity.html',cat:'code',icon:'&️⃣'},
{name:'Pixel Ruler',desc:'On-screen pixel measurement. Crosshair cursor with coordinates. Rectangle and distance modes. Guide lines. Grid overlay.',url:'tools/design/pixel-ruler.html',cat:'design',icon:'📏'},
{name:'JS Beautifier',desc:'Format and beautify JavaScript code. Indent, semicolons, quotes options. Minify mode. Basic syntax highlighting.',url:'tools/code/js-beautifier.html',cat:'code',icon:'✨'},
{name:'CSS Beautifier',desc:'Format and prettify CSS code. Sort properties, indent options. Minify mode. Stats: property count, rule count, size.',url:'tools/css/css-beautifier.html',cat:'css',icon:'✨'},
{name:'JSON Tree Viewer',desc:'Interactive collapsible JSON tree. Search keys and values. JSONPath display. Copy path or value. Stats and depth info.',url:'tools/data/json-tree.html',cat:'data',icon:'🌳'},
{name:'Color Wheel',desc:'Interactive HSL color wheel. Complementary, analogous, triadic, tetradic harmony modes. Tints and shades. Copy hex values.',url:'tools/design/color-wheel.html',cat:'design',icon:'🎨'},
{name:'Markdown Editor',desc:'Live split-view Markdown editor. Toolbar for formatting. Export HTML or .md. Auto-save to localStorage. Word count.',url:'tools/writing/markdown-editor.html',cat:'writing',icon:'✏️'},
{name:'Container Queries',desc:'Interactive CSS container queries playground. Resize containers, see @container rules trigger in real-time. Presets included.',url:'tools/css/css-container-queries.html',cat:'css',icon:'📐',featured:true},
{name:'CSS :has() Playground',desc:'The parent selector, finally. Interactive :has() experiments. Form validation, checked states, quantity queries.',url:'tools/css/css-has-playground.html',cat:'css',icon:'🔍',featured:true},
{name:'CSS Nesting',desc:'Native CSS nesting playground. No preprocessor needed. Write nested CSS, see it live, flatten to standard CSS.',url:'tools/css/css-nesting.html',cat:'css',icon:'📐'},
{name:'Popover API',desc:'Native HTML popovers without JavaScript. Tooltips, menus, dialogs with the popover attribute. Interactive builder.',url:'tools/code/popover-playground.html',cat:'code',icon:'💬'},
{name:'View Transitions',desc:'Smooth DOM animations with the View Transitions API. Card morphs, list reorders, theme toggles. Interactive demos.',url:'tools/code/view-transitions.html',cat:'code',icon:'🔄'},
{name:'Scroll Animations',desc:'CSS scroll-driven animations. Animate on scroll with pure CSS. Progress bars, fade-ins, parallax. No JavaScript.',url:'tools/css/scroll-driven-animations.html',cat:'css',icon:'↕'},
{name:'CSS @layer',desc:'Visualize CSS Cascade Layers. Reorder layers, see which rules win. Interactive @layer priority builder.',url:'tools/css/css-layers.html',cat:'css',icon:'📚'},
{name:'Dialog Element',desc:'Native HTML dialogs without libraries. Modal, non-modal, backdrop styling, form method="dialog". Interactive builder.',url:'tools/code/dialog-playground.html',cat:'code',icon:'💬'},
{name:'CSS color-mix()',desc:'Mix colors with CSS color-mix(). 8 color spaces (srgb, oklch, lab). Live preview, comparison, presets.',url:'tools/design/color-mix-playground.html',cat:'design',icon:'🎨'},
{name:'CSS Subgrid',desc:'Interactive CSS subgrid playground. Align nested grids to parent tracks. With vs without comparison. Presets.',url:'tools/css/css-subgrid.html',cat:'css',icon:'⊞s'},
{name:'CSS @starting-style',desc:'Animate elements from display:none with pure CSS. Modal, toast, popover, card presets. Customizable timing.',url:'tools/css/css-starting-style.html',cat:'css',icon:'🎬',featured:true},
{name:'CSS @scope',desc:'Scope styles to DOM subtrees without BEM or Shadow DOM. Donut scopes, limits, proximity. Visual boundaries.',url:'tools/css/css-scope-playground.html',cat:'css',icon:'🎯'},
{name:'CSS text-wrap',desc:'Compare text-wrap balance vs pretty vs stable side by side. Adjustable width, font, presets. Line count per mode.',url:'tools/css/text-wrap-playground.html',cat:'css',icon:'📝'},
{name:'CSS @property',desc:'Typed custom properties with animation. Gradient angles, color morphs, counters, progress bars. With vs without comparison.',url:'tools/css/css-property-playground.html',cat:'css',icon:'🏷️',featured:true},
{name:'CSS light-dark()',desc:'Build theme tokens with light-dark(). 10 customizable design tokens, live toggle, component preview. No media queries.',url:'tools/css/light-dark-playground.html',cat:'css',icon:'🌓'},
{name:'CSS field-sizing',desc:'Auto-resize inputs, textareas, selects to fit content. Side-by-side comparison with default. No JavaScript needed.',url:'tools/css/field-sizing-playground.html',cat:'css',icon:'📐'},
{name:'Web Animations API',desc:'Visual builder for element.animate(). 10 presets, keyframe editor, timing controls. Export working JavaScript code.',url:'tools/js/waapi-playground.html',cat:'js',icon:'🎬',featured:true},
{name:'Compression Streams',desc:'Browser-native gzip/deflate compression. Compare all formats. Hex dump, Base64, decompress. No libraries needed.',url:'tools/js/compression-streams.html',cat:'js',icon:'📦'},
{name:'Web Speech API',desc:'TTS + STT in one playground. All voices, rate/pitch/volume, real-time transcription, confidence scores, events log. Code export.',url:'tools/js/web-speech-playground.html',cat:'js',icon:'🎙️',featured:true},
{name:'Intersection Observer',desc:'Visualize IntersectionObserver. Threshold, rootMargin sliders. Real-time ratio, callback log. 6 use-case presets. Code export.',url:'tools/js/intersection-observer-playground.html',cat:'js',icon:'👁️',featured:true},
{name:'Resize Observer',desc:'Visualize ResizeObserver. Drag-resize element, see contentRect/borderBoxSize/contentBoxSize live. Adjustable padding, border, box-sizing.',url:'tools/js/resize-observer-playground.html',cat:'js',icon:'📐'},
{name:'MutationObserver',desc:'Watch DOM changes live. 8 mutation actions. childList/attributes/characterData toggles. DOM tree view, mutation log, code export.',url:'tools/js/mutation-observer-playground.html',cat:'js',icon:'🔍'},
{name:'Performance Observer',desc:'Interactive PerformanceObserver explorer. Marks, measures, resources, paint, Web Vitals. Timeline, waterfall, real-time entry log.',url:'tools/js/performance-observer-playground.html',cat:'js',icon:'📊',featured:true},
{name:'Barcode Detection',desc:'Scan QR codes, UPC, EAN, Code 128 via camera or image upload. Bounding box overlay, format checker, scan history. All in-browser.',url:'tools/js/barcode-detection-playground.html',cat:'js',icon:'📷'},
{name:'CORS Headers Builder',desc:'Visual CORS config generator. 6 presets. Code for Express, Fastify, Next.js, Flask, Django, Go, Rust, Nginx, Apache. Live header preview.',url:'tools/code/cors-headers-builder.html',cat:'code',icon:'💻',featured:true},
{name:'Structured Clone',desc:'Test what survives structuredClone(). 28 type tests, custom JS input, visual diff. Compatibility table. vs JSON.parse(JSON.stringify()).',url:'tools/js/structured-clone-playground.html',cat:'js',icon:'📋'},
{name:'SW Lifecycle',desc:'Interactive Service Worker lifecycle visualizer. 6 scenarios, animated state diagram, phase timeline, event log. Live SW monitoring.',url:'tools/js/sw-lifecycle-playground.html',cat:'js',icon:'⚡',featured:true},
{name:'JS Prototype Chain',desc:'Interactive prototype chain visualizer. Write constructors, classes, Object.create() → see full chain with property delegation, shadowing, method resolution.',url:'tools/js/js-prototype-chain.html',cat:'js',icon:'⛓',featured:true},
{name:'JS Event Loop',desc:'Interactive event loop visualizer. Step through code to see Call Stack, Web APIs, Microtask Queue, Task Queue in action. 8 presets with explanations.',url:'tools/js/js-event-loop.html',cat:'js',icon:'♻',featured:true},
{name:'CSS Stacking Context',desc:'Interactive stacking context visualizer. Build elements, set z-index/position/opacity/transform, see paint order. 6 preset gotcha scenarios.',url:'tools/design/css-stacking-context.html',cat:'design',icon:'📚',featured:true},
{name:'CSS Breakpoint Sim',desc:'Visual media query breakpoint designer. Timeline view, device presets, Tailwind/Bootstrap/Material presets. See active rules at any width. CSS export.',url:'tools/design/css-breakpoint-sim.html',cat:'design',icon:'📱',featured:true},
{name:'JS Scope Chain',desc:'Interactive scope chain & closure visualizer. See nested scopes, trace variable lookup, understand closures/hoisting/var vs let. 8 presets.',url:'tools/js/js-scope-chain.html',cat:'js',icon:'📚',featured:true},
{name:'Web Storage Quota',desc:'Interactive storage quota visualizer. Test localStorage/sessionStorage/IndexedDB limits. 5 experiments. Storage API comparison. Quota error handling.',url:'tools/js/web-storage-quota.html',cat:'js',icon:'💾',featured:true},
{name:'JS Error Stack Trace',desc:'Interactive error stack trace visualizer. Execute code, see error propagation through call stack. Try/catch flow. Custom errors. 8 presets.',url:'tools/js/js-error-trace.html',cat:'js',icon:'🔴',featured:true},
{name:'JS Event Propagation',desc:'Interactive event propagation simulator. Watch capturing, target, and bubbling phases animate through the DOM. stopPropagation, delegation. 8 presets.',url:'tools/js/js-event-propagation.html',cat:'js',icon:'🫧',featured:true},
{name:'CSS Cascade Debugger',desc:'See which CSS rule wins and why. @layer priority + specificity + source order. Step-by-step cascade resolution. 8 presets.',url:'tools/css/css-cascade-debugger.html',cat:'css',icon:'🏆',featured:true},
{name:'Rendering Pipeline',desc:'Interactive browser rendering pipeline visualizer. See which CSS properties trigger Layout, Paint, or Composite. 35+ properties, 6 scenarios.',url:'tools/perf/rendering-pipeline.html',cat:'perf',icon:'🖥️',featured:true},
{name:'WeakRef & GC Visualizer',desc:'Interactive WeakRef, WeakMap, WeakSet, FinalizationRegistry visualizer. Watch garbage collection reclaim weak references. 6 presets.',url:'tools/js/js-weakref-gc.html',cat:'js',icon:'♻️',featured:true},
{name:'HTTP/2 Multiplexing',desc:'Compare HTTP/1.1 vs HTTP/2 stream multiplexing. HPACK header compression demo. 5 scenarios. Head-of-line blocking visualization.',url:'tools/network/http2-visualizer.html',cat:'network',icon:'🌐',featured:true},
{name:'Async/Await Visualizer',desc:'Interactive async/await execution visualizer. Watch functions suspend at await, promises resolve, microtasks drain. Desugar to Promise equivalent. 8 presets.',url:'tools/js/js-async-visualizer.html',cat:'js',icon:'⏳',featured:true},
{name:'CSS Matrix Calculator',desc:'Interactive CSS transform matrix calculator. Build transform stacks, see 3×3 matrix math step-by-step, copy matrix() output. 6 presets with live preview.',url:'tools/css/css-matrix-calculator.html',cat:'css',icon:'🔢',featured:true},
{name:'DNS Resolution Visualizer',desc:'Watch DNS queries travel from browser to root servers step by step. Cache hits, CNAME chains, NXDOMAIN, DNSSEC validation. Cache inspector with TTL countdown.',url:'tools/net/dns-resolution-visualizer.html',cat:'net',icon:'🌐',featured:true},
{name:'TLS Handshake Visualizer',desc:'Interactive TLS 1.2 and 1.3 handshake sequence diagram. Watch ClientHello, key exchange, cert verification. 0-RTT, mTLS, downgrade attack presets.',url:'tools/net/tls-handshake-visualizer.html',cat:'net',icon:'🔒',featured:true},
{name:'Grid Track Sizing Algorithm',desc:'Watch how browsers resolve CSS grid fr, minmax(), auto, and fixed tracks step by step. 8 presets with calculation breakdown.',url:'tools/css/css-grid-track-sizing.html',cat:'css',icon:'📐',featured:true},
{name:'CSP Header Builder',desc:'Interactive Content Security Policy builder. Toggle directives, add sources, preview header. Strictness analyzer. 6 presets from Starter to Strict Nonce.',url:'tools/security/csp-header-builder.html',cat:'security',icon:'🛡️',featured:true},
{name:'BFC Layout Debugger',desc:'Interactive Block Formatting Context visualizer. See how BFC affects float containment, margin collapse, and layout isolation. 6 presets with live CSS.',url:'tools/css/bfc-layout-debugger.html',cat:'css',icon:'📦',featured:true},
{name:'WebSocket Frame Inspector',desc:'RFC 6455 WebSocket frame decoder and generator. Paste hex, see FIN/opcode/mask/payload. Generate frames for testing. 8 presets with bit-level diagram.',url:'tools/net/websocket-frame-inspector.html',cat:'net',icon:'🔌',featured:true},
{name:'V8 Hidden Classes',desc:'Watch how V8 creates hidden classes for JS objects. Transition chains, shared shapes, inline caching states (mono/poly/mega). 6 presets with step-through.',url:'tools/js/js-hidden-classes.html',cat:'js',icon:'🏗️',featured:true},
{name:'Memory Leak Patterns',desc:'Interactive JS memory leak visualizer. Closure leaks, detached DOM, forgotten timers, event listeners, globals. Live heap graph with leak vs fix comparison.',url:'tools/js/js-memory-leak-patterns.html',cat:'js',icon:'💧',featured:true},
{name:'CORS Preflight Flow',desc:'Step-through the browser CORS decision algorithm. Simple vs preflight requests, credentials rules, cache behavior. 8 scenarios with decision nodes and headers.',url:'tools/net/cors-preflight-flow.html',cat:'net',icon:'🔀',featured:true},
{name:'TCP State Machine',desc:'Interactive TCP connection state machine. 3-way handshake, 4-way close, simultaneous close, RST, half-close, SYN flood. Step-through with state transitions.',url:'tools/net/tcp-state-machine.html',cat:'net',icon:'🔄',featured:true},
{name:'Proxy & Reflect',desc:'Watch JS Proxy traps intercept operations in real-time. 8 presets: get/set, validation, default values, negative index, private props, apply/construct, revocable, observable.',url:'tools/js/js-proxy-reflect.html',cat:'js',icon:'🪤',featured:true},
{name:'Web Crypto Explorer',desc:'Interactive Web Crypto API explorer. Hash, encrypt/decrypt (AES-GCM/CBC/CTR), sign/verify (ECDSA/RSA/HMAC), key generation, random values. All in-browser.',url:'tools/security/web-crypto-explorer.html',cat:'security',icon:'🔐',featured:true},
{name:'AbortController Patterns',desc:'Interactive AbortController/AbortSignal demos. Fetch cancel, timeout(), race, AbortSignal.any(), multiple requests, event cleanup, React useEffect. Animated timeline.',url:'tools/js/abort-controller-patterns.html',cat:'js',icon:'🛑',featured:true},
{name:'Iterator & Generator',desc:'Step through JS generators and iterators. Basic yield, two-way communication, infinite sequences, yield* delegation, for-of, async generators, return/throw.',url:'tools/js/js-iterator-generator.html',cat:'js',icon:'🔄',featured:true},
{name:'HTTP Cache Flow',desc:'Browser HTTP caching decision visualizer. Cache hit, miss, ETag 304, no-store, no-cache, immutable, stale-while-revalidate. Headers panel + best practices.',url:'tools/net/http-cache-visualizer.html',cat:'net',icon:'📦',featured:true},
{name:'Promise Combinators',desc:'Interactive Promise.all/allSettled/race/any visualizer. Animated promise lanes, real-time combinator results, comparison table. 8 scenarios.',url:'tools/js/js-promise-combinators.html',cat:'js',icon:'🤝',featured:true},
{name:'JS Engine Pipeline',desc:'V8 compilation pipeline visualizer: Source → Tokenizer → Parser → AST → Bytecode → Interpreter → JIT → Optimized Code. 6 scenarios: deopt, IC, lazy parsing, OSR.',url:'tools/js/js-engine-pipeline.html',cat:'js',icon:'⚙️',featured:true},
{name:'WebRTC Signaling',desc:'Interactive WebRTC connection flow. SDP Offer/Answer, ICE candidates, STUN/TURN servers, Trickle ICE, ICE Restart, Data Channels. 5 scenarios.',url:'tools/net/webrtc-signaling-flow.html',cat:'net',icon:'📡',featured:true},
{name:'SharedArrayBuffer & Atomics',desc:'Interactive concurrency visualizer. Race conditions, Atomics.add, wait/notify, compare-and-swap, spinlock, ring buffer. Step-through thread interleaving.',url:'tools/js/js-shared-memory.html',cat:'js',icon:'🧵',featured:true},
{name:'Module Resolution',desc:'JS module resolution algorithm visualizer. CJS require() vs ESM import, node_modules traversal, package.json exports, conditional exports. 6 scenarios.',url:'tools/js/js-module-resolution.html',cat:'js',icon:'📦',featured:true},
{name:'GC Visualizer',desc:'V8 garbage collection step-through. Scavenge (young gen), Mark-Sweep, Mark-Compact, incremental marking, memory leak patterns. Heap regions and object lifecycle.',url:'tools/js/js-gc-visualizer.html',cat:'js',icon:'♻️',featured:true},
{name:'Execution Context',desc:'JS execution context & call stack visualizer. Hoisting (var vs let TDZ), function calls, closures, this binding (4 rules). Creation and execution phases.',url:'tools/js/js-execution-context.html',cat:'js',icon:'📚',featured:true},
{name:'IEEE 754 Floats',desc:'Interactive IEEE 754 double-precision float visualizer. Bit-level sign/exponent/mantissa, clickable bits, precision analysis, 0.1+0.2, NaN, -0, denormals.',url:'tools/js/js-float-visualizer.html',cat:'js',icon:'🔢',featured:true},
{name:'Type Coercion',desc:'JS type coercion visualizer. == vs === step-through algorithm, truth tables, ToPrimitive/ToNumber rules. Famous gotchas explained.',url:'tools/js/js-type-coercion.html',cat:'js',icon:'🔄',featured:true},
{name:'Regex Engine',desc:'Regex engine visualizer. NFA state graph, backtracking step-through, greedy vs lazy, catastrophic backtracking detection. 8 presets.',url:'tools/js/js-regex-engine.html',cat:'js',icon:'⚙️',featured:true},
{name:'Symbol Explorer',desc:'JS well-known Symbols interactive guide. Symbol.iterator, toPrimitive, hasInstance, species, dispose, and more. Code + flow diagrams.',url:'tools/js/js-symbol-explorer.html',cat:'js',icon:'🔮',featured:true},
{name:'HTTP/3 & QUIC',desc:'HTTP/3 and QUIC protocol visualizer. Handshake, 0-RTT resumption, stream multiplexing, HOL blocking comparison, connection migration, loss recovery.',url:'tools/infra/http3-quic-visualizer.html',cat:'infra',icon:'🚀',featured:true},
{name:'Anchor Positioning',desc:'CSS Anchor Positioning playground. anchor(), position-area, @position-try, anchor-size(), popover integration. Draggable demos.',url:'tools/css/css-anchor-positioning.html',cat:'css',icon:'⚓',featured:true},
{name:'Set Operations',desc:'ES2025 Set methods playground. intersection, union, difference, symmetricDifference, isSubsetOf, isSupersetOf, isDisjointFrom. Venn diagrams.',url:'tools/js/js-set-operations.html',cat:'js',icon:'🔵',featured:true},
{name:'Property Descriptors',desc:'JS property descriptors explorer. configurable/writable/enumerable, Object.freeze/seal/preventExtensions, accessor get/set, defineProperty gotchas.',url:'tools/js/js-property-descriptors.html',cat:'js',icon:'🔐',featured:true},
{name:'Logical Properties',desc:'CSS Logical Properties playground. inline/block mapping, writing-mode/direction switching, margin-inline, padding-block. Live property remapping.',url:'tools/css/css-logical-properties.html',cat:'css',icon:'↔️',featured:true},
{name:'Color Spaces',desc:'CSS Color Spaces explorer. oklch, oklab, display-p3 picker. Gamut comparison, perceptual uniformity demo, palette generator.',url:'tools/css/css-color-spaces.html',cat:'css',icon:'🎨',featured:true},
{name:'File System Access',desc:'File System Access API playground. Open, save, browse directories. Live file editor with read/write permissions. Activity log.',url:'tools/js/file-system-access-api.html',cat:'js',icon:'📂',featured:true},
{name:'Web Locks',desc:'Web Locks API visualizer. Exclusive/shared locks, cross-tab coordination, deadlock detection, ifAvailable, live demo with real API.',url:'tools/js/web-locks-api.html',cat:'js',icon:'🔒',featured:true},
{name:'Broadcast Channel',desc:'Broadcast Channel API visualizer. Cross-tab messaging, channel lifecycle, leader election, logout sync, worker communication. 6 scenarios with live demo.',url:'tools/js/broadcast-channel-api.html',cat:'js',icon:'📡',featured:true},
{name:'URLPattern',desc:'URLPattern API playground. Pattern matching with named groups, regex constraints, wildcards, optional segments, component-based matching. 8 presets.',url:'tools/js/url-pattern-api.html',cat:'js',icon:'🔗',featured:true},
{name:'JS Task Scheduling',desc:'Visualize scheduler.postTask(), rAF, requestIdleCallback, and setTimeout priority ordering with step-through animations.',url:'tools/js/js-task-scheduling.html',cat:'js',icon:'📋',featured:true},
{name:'JS Iterator Helpers',desc:'ES2025 Iterator Helpers playground. map, filter, take, drop, flatMap, reduce on lazy iterators. Pipeline builder with laziness visualization.',url:'tools/js/js-iterator-helpers.html',cat:'js',icon:'🔄',featured:true},
{name:'CSS transition-behavior',desc:'CSS transition-behavior: allow-discrete playground. Animate display, visibility transitions. Entry/exit animations with @starting-style. Side-by-side comparison.',url:'tools/css/css-transition-behavior.html',cat:'css',icon:'🔀',featured:true},
{name:'CSS Trig Functions',desc:'CSS sin(), cos(), tan(), atan2() visual playground. Circular layout builder, orbit animations, clock face, wave generator. Interactive angle controls.',url:'tools/css/css-trig-functions.html',cat:'css',icon:'📐',featured:true},
{name:'Permissions API',desc:'Browser Permissions API dashboard. Check granted/denied/prompt status for geolocation, camera, notifications, clipboard. Live status monitor, code generator.',url:'tools/js/permissions-api.html',cat:'js',icon:'🛡️',featured:true},
{name:'CSS Custom Highlights',desc:'CSS Custom Highlights API playground. Search highlighting, multi-color ranges, spellcheck simulation, syntax highlighter, collaborative cursors. ::highlight() styling.',url:'tools/css/css-custom-highlights.html',cat:'css',icon:'🖍️',featured:true},
{name:'Cross-Doc View Transitions',desc:'Cross-document (MPA) View Transitions playground. Page-to-page animations, view-transition-name mapping, transition types, @view-transition rules, timing controls.',url:'tools/css/cross-doc-view-transitions.html',cat:'css',icon:'🔄',featured:true},
{name:'CSS Scroll State',desc:'CSS scroll-state() container queries playground. Sticky stuck detection, snap highlight, scrollable indicators. Chrome 133+ feature.',url:'tools/css/css-scroll-state.html',cat:'css',icon:'📜',featured:true},
{name:'CSS attr() Function',desc:'CSS attr() for styling playground. Colors, sizes, theming from data attributes. Type conversion, fallbacks, tooltip builder. Chrome 130+.',url:'tools/css/css-attr-function.html',cat:'css',icon:'🏷️',featured:true},
{name:'MediaRecorder Studio',desc:'MediaRecorder + Screen Capture studio. Camera, screen, audio recording with codec selection, bitrate controls, live preview, download.',url:'tools/js/media-recorder-studio.html',cat:'js',icon:'🎥',featured:true},
{name:'Web Vitals Visualizer',desc:'Core Web Vitals (LCP, INP, CLS) interactive visualizer. Trigger and measure metrics in real-time. Good/needs-improvement/poor thresholds. Before/after comparison.',url:'tools/perf/web-vitals-visualizer.html',cat:'perf',icon:'📊',featured:true},
{name:'Long Animation Frames',desc:'LoAF API visualizer. Trigger long frames, inspect script attribution, frame timeline, INP connection, optimization comparison with scheduler.yield().',url:'tools/perf/long-animation-frames.html',cat:'perf',icon:'⚡',featured:true},
{name:'Trusted Types',desc:'Trusted Types XSS prevention sandbox. DOM sink security, policy creation, CSP integration, violation logging. Before/after comparison.',url:'tools/security/trusted-types.html',cat:'security',icon:'🛡️',featured:true},
{name:'Clipboard API',desc:'Advanced Clipboard API playground. Multi-MIME read/write, image copy/paste, custom web formats, ClipboardItem.supports(), copy event interception.',url:'tools/js/clipboard-api.html',cat:'js',icon:'📋',featured:true},
{name:'Device Sensors',desc:'Device Orientation + Motion sensor fusion. 3D device model, compass, acceleration graphs, shake detector, tilt controls. Desktop simulation included.',url:'tools/js/device-sensors.html',cat:'js',icon:'📱',featured:true},
{name:'OffscreenCanvas',desc:'OffscreenCanvas + Web Workers performance playground. Main thread vs worker rendering, FPS comparison, particle system, main thread blocking demo.',url:'tools/perf/offscreen-canvas.html',cat:'perf',icon:'🖼️',featured:true},
{name:'IndexedDB Explorer',desc:'Visual IndexedDB explorer. Create databases, object stores, indexes. CRUD operations, range queries, data viewer, export/import JSON.',url:'tools/js/indexeddb-explorer.html',cat:'js',icon:'🗄️',featured:true},
{name:'Selection & Range',desc:'Selection & Range API visual debugger. Range internals, programmatic selection, multi-range, event monitor, DOM tree view with offsets.',url:'tools/js/selection-range-api.html',cat:'js',icon:'✂️',featured:true},
{name:'Pointer Events',desc:'Advanced Pointer Events visualizer. Pressure/tilt/twist visualization, coalesced events trail, multi-input comparison, pointer capture demo.',url:'tools/js/pointer-events.html',cat:'js',icon:'👆',featured:true},
{name:'Web NFC',desc:'Web NFC reader/writer playground. Multi-record NDEF messages, record types, hex viewer, smart poster builder. Desktop mock included.',url:'tools/js/web-nfc.html',cat:'js',icon:'📡',featured:true},
{name:'FormData Inspector',desc:'FormData API visual inspector. Build forms, see entries tree, blob/file preview, MIME types, multipart POST body preview.',url:'tools/js/formdata-inspector.html',cat:'js',icon:'📝',featured:true},
{name:'Shadow DOM Explorer',desc:'Shadow DOM interactive visualizer. Open vs closed shadow, style encapsulation, slot distribution, ::slotted(), ::part(), adoptedStyleSheets.',url:'tools/js/shadow-dom-explorer.html',cat:'js',icon:'🌑',featured:true},
{name:'Custom Elements',desc:'Custom Elements (Web Components) builder. Lifecycle callbacks, observed attributes, property getters/setters. Live preview, export ES6 class.',url:'tools/js/custom-elements-builder.html',cat:'js',icon:'🧩',featured:true},
{name:'Web Workers Patterns',desc:'Web Workers message passing playground. Dedicated vs SharedWorker, postMessage timelines, Transferable objects, worker pool pattern.',url:'tools/js/web-workers-patterns.html',cat:'js',icon:'⚙️',featured:true},
{name:'History API',desc:'History API navigation visualizer. pushState/replaceState stack, popstate events, state object inspector, SPA routing patterns.',url:'tools/js/history-api-visualizer.html',cat:'js',icon:'📜',featured:true},
{name:'Geolocation',desc:'HTML5 Geolocation API visualizer. getCurrentPosition/watchPosition, accuracy circles, movement tracking, geofence detection. Desktop simulation.',url:'tools/js/geolocation-visualizer.html',cat:'js',icon:'📍',featured:true},
{name:'Fetch Advanced',desc:'Fetch API advanced playground. Cache modes, ReadableStream progress, AbortController timeout, retry with backoff, conditional requests.',url:'tools/js/fetch-advanced.html',cat:'js',icon:'🌐',featured:true},
{name:'Notification Builder',desc:'Notification API interactive builder. Title/body/icon/badge/actions, permission flow, tag-based grouping, push simulation.',url:'tools/js/notification-builder.html',cat:'js',icon:'🔔',featured:true},
{name:'EyeDropper Inspector',desc:'EyeDropper API + Color Inspector. Pick colors from screen, RGB/HSL/Hex/OKLCH output, palette builder, contrast checker, gradient sampler.',url:'tools/color/eyedropper-inspector.html',cat:'color',icon:'💧',featured:true},
{name:'Claude Code Risk Scorer',desc:'Paste your CLAUDE.md, get a safety score 0-100. 10-category risk assessment: forbidden actions, rate limits, budget caps, rollback, escalation.',url:'tools/code/claude-code-risk-scorer.html',cat:'code',icon:'🛡️',featured:true},
{name:'Claude Code Danger Scanner',desc:'Scan CLAUDE.md for dangerous patterns. Detects rm -rf, force push, hardcoded secrets, unvetted commits. Deduction-based scoring.',url:'tools/code/risk-score-web.html',cat:'code',icon:'🔍',featured:true},
{name:'CSS Typed OM',desc:'CSS Typed Object Model playground. Explore typed CSS values, unit arithmetic, transform builder, performance comparison vs string-based.',url:'tools/css/css-typed-om.html',cat:'css',icon:'🔢',featured:true},
{name:'Keyboard API',desc:'Keyboard API playground. Layout map, key event inspector, keyboard lock, QWERTY/AZERTY/Dvorak comparison, shortcut tester, dead keys.',url:'tools/js/keyboard-api.html',cat:'js',icon:'⌨️',featured:true},
{name:'Invoker Commands',desc:'HTML command/commandfor playground. Control dialogs, popovers, media without JavaScript. Live code editor, 10+ interactive examples.',url:'tools/code/invoker-commands.html',cat:'code',icon:'🎯',featured:true},
{name:'CSS shape()',desc:'CSS shape() function playground. Visual path builder with draggable points, 6 presets, clip-path/offset-path, code export. Interop 2026.',url:'tools/css/css-shape-function.html',cat:'css',icon:'✂️',featured:true},
{name:'CSS contrast-color()',desc:'CSS contrast-color() playground. Auto-contrast text, batch tester, theme builder, WCAG checker, color grid, code generator with fallbacks.',url:'tools/css/css-contrast-color.html',cat:'css',icon:'🎨',featured:true},
{name:'CSS interpolate-size',desc:'CSS interpolate-size playground. Animate to/from auto heights, intrinsic sizing, transition keywords, allow-keywords demo.',url:'tools/css/css-interpolate-size.html',cat:'css',icon:'📐',featured:true},
{name:'CSS reading-flow',desc:'CSS reading-flow playground. Control focus navigation order in flex/grid layouts, visual vs source order, reading-flow property demo.',url:'tools/css/css-reading-flow.html',cat:'css',icon:'📖',featured:true},
{name:'CSS :state()',desc:'CSS Custom State pseudo-class playground. ElementInternals states, CustomStateSet API, toggle patterns, form validation states.',url:'tools/css/css-custom-state.html',cat:'css',icon:'🔄',featured:true},
{name:'CSS Relative Color',desc:'CSS Relative Color Syntax playground. Derive colors with from keyword, channel manipulation, palette generator, tint/shade, code export.',url:'tools/css/css-relative-color.html',cat:'css',icon:'🎨',featured:true},
{name:'Document PiP API',desc:'Document Picture-in-Picture API playground. Custom HTML PiP windows, music player, timer, notes, video controls.',url:'tools/js/document-pip-api.html',cat:'js',icon:'🖼️',featured:true},
{name:'EditContext API',desc:'EditContext API playground. Custom text editors, canvas editing, IME composition, selection management, formatting.',url:'tools/js/editcontext-api.html',cat:'js',icon:'✏️',featured:true},
{name:'CSS content-visibility',desc:'CSS content-visibility playground. Rendering optimization, contain-intrinsic-size, scroll performance, lazy rendering.',url:'tools/css/css-content-visibility.html',cat:'css',icon:'👁️',featured:true},
{name:'CSS font-size-adjust',desc:'CSS font-size-adjust playground. X-height normalization, font fallback matcher, aspect value calculator, layout shift prevention.',url:'tools/css/css-font-size-adjust.html',cat:'css',icon:'🔤',featured:true},
{name:'CSS zoom',desc:'CSS zoom property playground. Layout-affecting scaling vs transform:scale, responsive zoom, nested zoom, interactive calculator.',url:'tools/css/css-zoom-property.html',cat:'css',icon:'🔍',featured:true},
{name:'CSS @function',desc:'CSS @function rule playground. Native custom CSS functions with parameters, types, conditionals, live editor. Experimental.',url:'tools/css/css-function-rule.html',cat:'css',icon:'🧮',featured:true},
{name:'Container Style Queries',desc:'CSS Container Style Queries playground. Query custom properties, feature flags, theme switching, component variants.',url:'tools/css/container-style-queries.html',cat:'css',icon:'🎯',featured:true},
{name:'Sanitizer API',desc:'HTML Sanitizer API playground. XSS prevention, config builder, setHTML() demo, attack payload testing, code generator.',url:'tools/security/sanitizer-api.html',cat:'security',icon:'🧹',featured:true},
{name:'CSS @mixin',desc:'CSS @mixin/@apply playground. Native style block reuse with parameters, conditionals, migration from Sass, pattern library.',url:'tools/css/css-mixins.html',cat:'css',icon:'🧩',featured:true},
{name:'CSS Scroll Timeline',desc:'CSS scroll-timeline playground. Scroll-driven animations with named timelines, animation-timeline, view-timeline, scroll progress.',url:'tools/css/css-scroll-timeline.html',cat:'css',icon:'📜',featured:true},
{name:'Popover Anchor',desc:'Popover + CSS Anchor Positioning playground. Anchor elements to popovers, position-anchor, tooltips, menus, auto-flip.',url:'tools/css/popover-anchor.html',cat:'css',icon:'⚓',featured:true},
{name:'CSS Nesting Deep Dive',desc:'Advanced CSS Nesting playground. Nested selectors, @nest rules, specificity, media queries inside nesting, migration patterns.',url:'tools/css/css-nesting-deep.html',cat:'css',icon:'🪆',featured:true},
{name:'Page Reveal API',desc:'Page Reveal API playground. Navigation view transitions, @view-transition rule, page swap animations, cross-document transitions.',url:'tools/js/page-reveal-api.html',cat:'js',icon:'🎭',featured:true},
{name:'CSS Color Level 4',desc:'CSS Color Level 4 playground. oklch, oklab, display-p3, color() function, wide gamut colors, perceptual uniformity.',url:'tools/css/css-color-level4.html',cat:'css',icon:'🌈',featured:true},
{name:'Navigation API',desc:'Navigation API playground. navigate(), NavigateEvent inspection, history entries, canGoBack/Forward, transition tracking.',url:'tools/js/navigation-api.html',cat:'js',icon:'🧭',featured:true},
{name:'Speculation Rules',desc:'Speculation Rules API playground. Prerender/prefetch rule builder, eagerness levels, URL patterns, performance impact.',url:'tools/js/speculation-rules.html',cat:'js',icon:'🔮',featured:true},
{name:'Web Share API',desc:'Web Share API playground. Share text/URL/files, platform detection, fallback strategies, share target builder.',url:'tools/js/web-share-api.html',cat:'js',icon:'📤',featured:true},
{name:'Wake Lock API',desc:'Screen Wake Lock API playground. Acquire/release lock, visibility handling, timer, battery-aware patterns.',url:'tools/js/wake-lock-api.html',cat:'js',icon:'☀️',featured:true},
{name:'Web Bluetooth',desc:'Web Bluetooth API playground. Device discovery, GATT services, read/write/notify, connection state management.',url:'tools/js/web-bluetooth-api.html',cat:'js',icon:'📶',featured:true},
{name:'Web Serial API',desc:'Web Serial API playground. Serial port connection, terminal emulator, baud rates, signal control, hex/ASCII mode.',url:'tools/js/web-serial-api.html',cat:'js',icon:'🔌',featured:true},
{name:'Import Maps',desc:'Import Maps playground. Module resolution visualizer, scoped imports, CDN URL generator, integrity support.',url:'tools/js/import-maps.html',cat:'js',icon:'🗺️',featured:true},
{name:'Idle Detection',desc:'Idle Detection API playground. User/screen state visualization, event timeline, threshold config, use cases.',url:'tools/js/idle-detection-api.html',cat:'js',icon:'💤',featured:true},
{name:'WebTransport',desc:'WebTransport API playground. HTTP/3 QUIC connection, datagrams vs streams, latency comparison, state machine.',url:'tools/js/web-transport-api.html',cat:'js',icon:'🚀',featured:true},
{name:'Declarative Shadow DOM',desc:'Declarative Shadow DOM playground. SSR hydration, slot projection, style encapsulation, DOM tree inspector.',url:'tools/js/declarative-shadow-dom.html',cat:'js',icon:'🌑',featured:true},
{name:'WebCodecs',desc:'WebCodecs API playground. Video/Audio encoder/decoder, codec support detection, frame processing, performance metrics.',url:'tools/js/webcodecs-api.html',cat:'js',icon:'🎬',featured:true},
{name:'Background Fetch',desc:'Background Fetch API playground. Registration flow, progress tracking, abort/pause, service worker integration.',url:'tools/js/background-fetch-api.html',cat:'js',icon:'📥',featured:true},
{name:'Contact Picker',desc:'Contact Picker API playground. Select contacts, property configuration, permission flow, fallback builder.',url:'tools/js/contact-picker-api.html',cat:'js',icon:'👤',featured:true},
{name:'Badging API',desc:'Badging API playground. App badge counter, favicon fallback, setAppBadge/clearBadge, PWA integration.',url:'tools/js/badging-api.html',cat:'js',icon:'🔴',featured:true},
{name:'Window Controls Overlay',desc:'Window Controls Overlay playground. Custom titlebar, env() variables, drag regions, theme-aware overlay.',url:'tools/js/window-controls-overlay.html',cat:'js',icon:'🪟',featured:true},
{name:'Launch Handler',desc:'Launch Handler API playground. client_mode options, LaunchQueue, manifest builder, multi-window behavior.',url:'tools/js/launch-handler-api.html',cat:'js',icon:'🚪',featured:true},
{name:'File Handling',desc:'File Handling API playground. File type associations, MIME mapping, manifest file_handlers, open flow.',url:'tools/js/file-handling-api.html',cat:'js',icon:'📂',featured:true},
{name:'Screen Capture',desc:'Screen Capture API playground. getDisplayMedia, display surface selection, audio capture, constraints builder.',url:'tools/js/screen-capture-api.html',cat:'js',icon:'🖥️',featured:true},
{name:'EyeDropper Explorer',desc:'EyeDropper API Explorer. Color picker, history, palette builder, hex/rgb/hsl conversion, clipboard export.',url:'tools/design/eyedropper-api-v2.html',cat:'design',icon:'💧',featured:true},
{name:'Payment Handler',desc:'Payment Handler API playground. PaymentRequest flow, payment methods, response handling, security guide.',url:'tools/js/payment-handler-api.html',cat:'js',icon:'💳',featured:true},
{name:'Web HID',desc:'Web HID API playground. Device discovery, input/output reports, usage pages, hex data viewer.',url:'tools/js/web-hid-api.html',cat:'js',icon:'🎮',featured:true},
{name:'Periodic Background Sync',desc:'Periodic Background Sync playground. Registration, minInterval, sync events, status timeline.',url:'tools/js/periodic-background-sync.html',cat:'js',icon:'🔄',featured:true},
{name:'Content Index',desc:'Content Index API playground. Offline content management, category types, service worker integration.',url:'tools/js/content-index-api.html',cat:'js',icon:'📑',featured:true},
{name:'Web OTP',desc:'Web OTP API playground. OTPCredential, SMS format, autocomplete one-time-code, security guide.',url:'tools/js/web-otp-api.html',cat:'js',icon:'🔑',featured:true},
{name:'Storage Access',desc:'Storage Access API playground. hasStorageAccess, requestStorageAccess, cookie partitioning, permission flow.',url:'tools/js/storage-access-api.html',cat:'js',icon:'🍪',featured:true},
{name:'Media Session',desc:'Media Session API playground. Metadata builder, action handlers, position state, OS media controls.',url:'tools/js/media-session-api.html',cat:'js',icon:'🎵',featured:true},
{name:'Picture-in-Picture',desc:'Picture-in-Picture API playground. PiP window, events, custom controls, canvas source, browser comparison.',url:'tools/js/picture-in-picture-api.html',cat:'js',icon:'📺',featured:true},
{name:'Web USB',desc:'Web USB API playground. Device discovery, interface/endpoint explorer, transfer demos, descriptor viewer.',url:'tools/js/web-usb-api.html',cat:'js',icon:'🔌',featured:true},
{name:'Reporting API',desc:'Reporting API playground. ReportingObserver, report types, Report-To header builder, NEL overview.',url:'tools/js/reporting-api.html',cat:'js',icon:'📊',featured:true},
{name:'Performance Timeline',desc:'Performance Timeline API playground. PerformanceObserver, Resource/Navigation Timing, User Timing, Long Tasks.',url:'tools/js/performance-timeline-api.html',cat:'js',icon:'⏱️',featured:true},
{name:'Credential Management',desc:'Credential Management API playground. Password/Federated/PublicKey credentials, auto sign-in, mediation options.',url:'tools/security/credential-management-api.html',cat:'security',icon:'🔐',featured:true},
{name:'Web Share Target',desc:'Web Share Target playground. Manifest share_target builder, POST/GET, file receiving, service worker handling.',url:'tools/js/web-share-target.html',cat:'js',icon:'🎯',featured:true},
{name:'Manifest Builder',desc:'Web App Manifest builder. All fields editor, icon set, display modes, shortcuts, protocol handlers, JSON export.',url:'tools/js/web-app-manifest-builder.html',cat:'js',icon:'📋',featured:true},
{name:'CSS Paint API',desc:'CSS Paint API / Houdini Paint playground. registerPaint() worklet builder, custom patterns, live preview.',url:'tools/css/css-paint-api.html',cat:'css',icon:'🎨',featured:true},
{name:'CSS Layout API',desc:'CSS Layout API / Houdini Layout playground. Custom layout algorithms, masonry, circular layout demos.',url:'tools/css/css-layout-api.html',cat:'css',icon:'📐',featured:true},
{name:'CSS Properties & Values',desc:'CSS Properties & Values API playground. @property builder, syntax types, animated custom properties, type checking.',url:'tools/css/css-properties-values-api.html',cat:'css',icon:'🏷️',featured:true},
{name:'Text Fragment',desc:'Text Fragment API playground. #:~:text= URL builder, prefix/suffix context, ::target-text styling.',url:'tools/js/text-fragment-api.html',cat:'js',icon:'📝',featured:true},
{name:'Web Vitals Budget',desc:'Web Vitals Budget Calculator. LCP/INP/CLS budgets, resource allocation, third-party cost, config export.',url:'tools/code/web-vitals-budget.html',cat:'code',icon:'💰',featured:true},
{name:'CSP Evaluator',desc:'CSP Evaluator & Analyzer. Paste CSP header, security score, weakness detection, nonce/hash migration guide.',url:'tools/security/csp-evaluator.html',cat:'security',icon:'🛡️',featured:true},
{name:'SRI Generator',desc:'Subresource Integrity Generator. URL → SHA hash, CDN libraries, integrity tag generator, batch processing.',url:'tools/security/subresource-integrity-gen.html',cat:'security',icon:'🔒',featured:true},
{name:'Gamepad API',desc:'Gamepad API playground. Real-time button/axis viewer, rumble test, standard mapping, multi-gamepad support.',url:'tools/js/gamepad-api.html',cat:'js',icon:'🎮',featured:true},
{name:'Battery Status',desc:'Battery Status API playground. Charging state, level chart, event listeners, power-aware patterns.',url:'tools/js/battery-status-api.html',cat:'js',icon:'🔋',featured:true},
{name:'Network Info',desc:'Network Information API playground. effectiveType, downlink, rtt, saveData, adaptive loading patterns.',url:'tools/js/network-info-api.html',cat:'js',icon:'📡',featured:true},
{name:'Page Lifecycle',desc:'Page Lifecycle API playground. State machine, freeze/resume events, bfcache testing, state transitions.',url:'tools/js/page-lifecycle-api.html',cat:'js',icon:'🔄',featured:true},
{name:'Fullscreen API',desc:'Fullscreen API playground. requestFullscreen, events, :fullscreen CSS, keyboard input, orientation lock.',url:'tools/js/fullscreen-api.html',cat:'js',icon:'🖥️',featured:true},
{name:'Screen Orientation',desc:'Screen Orientation API playground. Type/angle display, lock(), orientation events, CSS comparison.',url:'tools/js/screen-orientation-api.html',cat:'js',icon:'🔄',featured:true},
{name:'Animation Timing',desc:'Web Animations Timing Functions. cubic-bezier builder, steps(), linear(), side-by-side comparison.',url:'tools/css/web-animations-timing.html',cat:'css',icon:'⏳',featured:true},
{name:'Intersection Observer v2',desc:'Intersection Observer v2 playground. Threshold builder, trackVisibility, lazy loading, infinite scroll.',url:'tools/js/intersection-observer-v2.html',cat:'js',icon:'👁️',featured:true},
{name:'ContentEditable',desc:'contenteditable playground. Editing modes, execCommand, input events, selection, rich text patterns.',url:'tools/js/content-editable-playground.html',cat:'js',icon:'✍️',featured:true},
{name:'Drag & Drop',desc:'Drag and Drop API playground. Events, DataTransfer, file drop, custom preview, sortable list.',url:'tools/js/drag-drop-api.html',cat:'js',icon:'🔀',featured:true},
{name:'Channel Messaging',desc:'Channel Messaging API playground. MessageChannel/Port, iframe/worker communication, structured clone.',url:'tools/js/channel-messaging-api.html',cat:'js',icon:'📨',featured:true},
{name:'Encoding API',desc:'Encoding API playground. TextEncoder/Decoder, byte visualization, multiple encodings, streaming.',url:'tools/js/encoding-api.html',cat:'js',icon:'🔤',featured:true},
{name:'Streams API',desc:'Streams API playground. Readable/Writable/Transform streams, backpressure, teeing, piping.',url:'tools/js/streams-api.html',cat:'js',icon:'🌊',featured:true},
{name:'URL API Explorer',desc:'URL API Explorer. URL parsing, URLSearchParams, URLPattern, relative resolution, encoding.',url:'tools/js/url-api-explorer.html',cat:'js',icon:'🔗',featured:true},
{name:'AbortSignal Patterns',desc:'AbortSignal Patterns playground. AbortController, timeout(), any(), fetch cancellation, cleanup.',url:'tools/js/abort-signal-patterns.html',cat:'js',icon:'🛑',featured:true},
{name:'Temporal API',desc:'Temporal API playground. PlainDate/Time/DateTime, ZonedDateTime, Duration, calendar systems.',url:'tools/js/temporal-api.html',cat:'js',icon:'📅',featured:true},
{name:'structuredClone Advanced',desc:'structuredClone playground. Deep clone, supported types matrix, transfer list, circular references.',url:'tools/js/structuredclone-advanced.html',cat:'js',icon:'📋',featured:true},
{name:'Intl Explorer',desc:'Intl API Explorer. NumberFormat, DateTimeFormat, RelativeTime, ListFormat, Segmenter, DisplayNames.',url:'tools/js/intl-explorer.html',cat:'js',icon:'🌍',featured:true},
{name:'Promise Patterns',desc:'Promise Patterns playground. all/allSettled/race/any, withResolvers, retry, timeout, cancellation.',url:'tools/js/promise-patterns.html',cat:'js',icon:'🤝',featured:true},
{name:'Array Methods Visual',desc:'Array Methods Visualizer. map/filter/reduce step-by-step, new methods, Set operations, groupBy.',url:'tools/js/array-methods-visual.html',cat:'js',icon:'📊',featured:true},
{name:'Map & Set Explorer',desc:'Map/Set/WeakMap/WeakSet playground. Operations, iteration, Set methods, WeakRef, performance comparison.',url:'tools/js/map-set-explorer.html',cat:'js',icon:'🗺️',featured:true},
{name:'Error Types Explorer',desc:'JavaScript Error Types. Built-in errors, custom classes, Error.cause, AggregateError, stack analysis.',url:'tools/js/error-types-explorer.html',cat:'js',icon:'❌',featured:true},
{name:'Generator Patterns',desc:'Generator & Async Generator. Yield, lazy eval, infinite sequences, async iteration, pipelines.',url:'tools/js/generator-patterns.html',cat:'js',icon:'⚡',featured:true},
{name:'WeakRef & Finalizer',desc:'WeakRef & FinalizationRegistry. GC visualization, WeakRef cache, object lifecycle, memory patterns.',url:'tools/js/weakref-finalizer.html',cat:'js',icon:'🧹',featured:true},
{name:'JS Decorators',desc:'JavaScript Decorators playground. Class/method/field/accessor decorators, metadata, common patterns.',url:'tools/js/decorator-patterns.html',cat:'js',icon:'🎀',featured:true},
{name:'Regex Advanced',desc:'Regex Advanced Features. Lookbehind, named groups, Unicode properties, dotAll, matchAll, v flag.',url:'tools/js/regex-lookbehind.html',cat:'js',icon:'🔍',featured:true},
{name:'Cascade Layers Advanced',desc:'CSS Cascade Layers deep dive. Layer ordering, nesting, !important reversal, @import layer(), migration.',url:'tools/css/css-cascade-layers-advanced.html',cat:'css',icon:'📚',featured:true},
{name:'CSS Color Functions',desc:'CSS Color Functions. color-mix(), oklch, oklab, display-p3, gamut mapping, color space comparison.',url:'tools/css/css-color-functions.html',cat:'css',icon:'🎨',featured:true},
{name:'CSS Math Functions',desc:'CSS Math Functions. calc/min/max/clamp, round/mod/rem, trig functions, pow/sqrt, formula builder.',url:'tools/css/css-math-functions.html',cat:'css',icon:'🔢',featured:true},
{name:'ES Module Patterns',desc:'ES Module Import Patterns. Static/dynamic import, assertions, top-level await, circular deps, evaluation order.',url:'tools/js/module-import-patterns.html',cat:'js',icon:'📦',featured:true},
{name:'Web Components Lifecycle',desc:'Web Components Lifecycle. Connected/disconnected/attribute callbacks, upgrade, ElementInternals, timing.',url:'tools/js/web-components-lifecycle.html',cat:'js',icon:'🔄',featured:true},
{name:'CSS Logical Properties',desc:'CSS Logical Properties Explorer. Block/inline axis, writing modes, direction, physical mapping, migration.',url:'tools/css/css-logical-props-explorer.html',cat:'css',icon:'↔️',featured:true},
{name:'CSS Individual Transforms',desc:'CSS Individual Transform Properties. translate/rotate/scale, 3D, independent transitions, composition.',url:'tools/css/css-individual-transforms.html',cat:'css',icon:'🔄',featured:true},
{name:'JS Class Features',desc:'JavaScript Class Features. Private fields/methods, static blocks, auto-accessor, #field in obj, inheritance.',url:'tools/js/js-class-features.html',cat:'js',icon:'🏗️',featured:true},
{name:'requestIdleCallback Explorer',desc:'requestIdleCallback API. Idle deadline, task queue, cooperative scheduling, timeout, cancellation.',url:'tools/js/requestidlecallback-explorer.html',cat:'js',icon:'⏳',featured:true},
{name:'ResizeObserver Patterns',desc:'ResizeObserver Patterns. Breakpoint detection, responsive components, border-box/content-box, performance.',url:'tools/js/resize-observer-patterns.html',cat:'js',icon:'📐',featured:true},
{name:'MutationObserver Patterns',desc:'MutationObserver Patterns. Config builder, attribute filtering, takeRecords, disconnect/reconnect, performance.',url:'tools/js/mutation-observer-patterns.html',cat:'js',icon:'🔬',featured:true},
{name:'EventTarget Patterns',desc:'EventTarget Patterns. CustomEvent, event delegation, listener options, once/passive/signal, composition.',url:'tools/js/event-target-patterns.html',cat:'js',icon:'🎯',featured:true},
{name:'Fetch API Advanced',desc:'Fetch API Advanced Patterns. Streaming, AbortController, retry logic, request dedup, cache API, interceptors.',url:'tools/js/fetch-patterns.html',cat:'js',icon:'🌐',featured:true},
{name:'Performance Mark & Measure',desc:'User Timing API Level 3. Performance marks, measures, timeline visualization, PerformanceObserver.',url:'tools/js/performance-mark-measure.html',cat:'js',icon:'📊',featured:true},
{name:'Trusted Types Explorer',desc:'Trusted Types API. DOM XSS prevention, policy creation, sanitization, CSP integration.',url:'tools/security/trusted-types-explorer.html',cat:'security',icon:'🔒',featured:true},
{name:'CSS Selector Tester',desc:'CSS Selector Tester. Live matching, highlighting, specificity calc, :has/:is/:where/:not support.',url:'tools/css/css-selector-tester.html',cat:'css',icon:'🎯',featured:true},
{name:'Service Worker Recipes',desc:'Service Worker caching strategies. Cache First, Network First, Stale While Revalidate, lifecycle, updates.',url:'tools/js/service-worker-recipes.html',cat:'js',icon:'⚙️',featured:true},
{name:'Web Workers Advanced',desc:'Web Workers Patterns. Heavy computation, message passing, transferable objects, worker pools, SharedWorker.',url:'tools/js/web-workers-advanced.html',cat:'js',icon:'🧵',featured:true},
{name:'CSP Policy Builder',desc:'Content Security Policy Builder. Visual directive editor, violation tester, presets, copy header.',url:'tools/security/csp-policy-builder.html',cat:'security',icon:'🛡️',featured:true},
{name:'HTTP Method Explorer',desc:'HTTP Methods reference. GET/POST/PUT/PATCH/DELETE semantics, idempotency, CORS, REST patterns.',url:'tools/code/http-method-tester.html',cat:'code',icon:'📡',featured:true},
{name:'Web Font Analyzer',desc:'Web Font Performance Analyzer. @font-face parsing, FOIT/FOUT/FOFT, font-display, preload generator.',url:'tools/design/web-font-analyzer.html',cat:'design',icon:'🔤',featured:true},
{name:'ARIA Role Explorer',desc:'ARIA Roles & Properties. Taxonomy, keyboard expectations, screen reader output, common patterns.',url:'tools/code/aria-role-explorer.html',cat:'code',icon:'♿',featured:true},
{name:'CSS Specificity Battle',desc:'CSS Specificity Battle Arena. Selector comparison, visual breakdown, quiz mode, cascade order.',url:'tools/css/css-specificity-battle.html',cat:'css',icon:'⚔️',featured:true},
{name:'SVG Path Editor',desc:'SVG Path Command Editor. Visual path editing, drag control points, all commands, path optimization.',url:'tools/design/svg-path-editor.html',cat:'design',icon:'✏️',featured:true},
{name:'Cookie Inspector',desc:'Browser Cookie Inspector. View/create cookies, attributes, SameSite, security, Set-Cookie generator.',url:'tools/security/cookie-inspector.html',cat:'security',icon:'🍪',featured:true},
{name:'Flexbox Patterns',desc:'Flexbox Layout Patterns. Holy Grail, Sticky Footer, Card Grid, Navigation, Media Object, 15+ patterns.',url:'tools/css/flexbox-holy-grail.html',cat:'css',icon:'📐',featured:true},
{name:'Grid Area Painter',desc:'CSS Grid Area Visual Painter. Click/drag to paint areas, auto-generate grid-template-areas, export CSS.',url:'tools/css/grid-area-painter.html',cat:'css',icon:'🎨',featured:true},
{name:'GZIP Converter',desc:'Compress strings using GZIP, Deflate, or Zlib. Decompress base64 compressed strings back to text.',url:'tools/converter/gzip-converter.html',cat:'converter',icon:'📦'},
{name:'IBAN Generator',desc:'Generate valid IBAN numbers for 40+ countries. Random bank codes and account numbers for testing.',url:'tools/converter/iban-generator.html',cat:'converter',icon:'🏦'},
{name:'MongoDB ObjectID',desc:'Decode MongoDB ObjectIDs to timestamps, generate ObjectIDs from dates with MongoDB query syntax.',url:'tools/converter/mongo-objectid.html',cat:'converter',icon:'🆔'},
{name:'Hex Converter',desc:'Convert between hex and text/numbers with configurable endianness, bit width, and signed/unsigned.',url:'tools/converter/hex-converter.html',cat:'converter',icon:'#️⃣'},
{name:'VAT Validator',desc:'Validate European VAT numbers for all 27 EU countries. Country-specific format checking.',url:'tools/converter/vat-validator.html',cat:'converter',icon:'🧾'},
{name:'Geo Distance',desc:'Calculate distance between two GPS coordinates using the Haversine formula. KM, miles, meters, nautical miles.',url:'tools/math/geo-distance.html',cat:'math',icon:'📍'},
{name:'JS Obfuscator',desc:'Obfuscate JavaScript code using Base64 encoding or ROT13 cipher. Copy or download as .js file.',url:'tools/code/js-obfuscator.html',cat:'code',icon:'🔒'},
{name:'Code Highlighter',desc:'Syntax-highlight code and copy as HTML for Word or plain text. 16 languages, 8 themes, line numbers.',url:'tools/code/code-highlighter.html',cat:'code',icon:'✨'},
{name:'Mermaid Exporter',desc:'Render Mermaid diagrams and export as SVG, PNG, or JPG. Live preview while you type.',url:'tools/code/mermaid-export.html',cat:'code',icon:'💻'},
{name:'Markdown Diff',desc:'Compare two Markdown documents side by side. Code view and rendered HTML preview mode.',url:'tools/code/markdown-diff.html',cat:'code',icon:'📝'},
{name:'Icon Generator',desc:'Generate app icons in multiple sizes from one image. PWA, Android, iOS presets. Download as ZIP.',url:'tools/design/icon-generator.html',cat:'design',icon:'🎨'},
{name:'HAR Sanitizer',desc:'Sanitize HAR files by removing sensitive cookies, headers, query parameters, and POST body params.',url:'tools/network/har-sanitizer.html',cat:'network',icon:'🧹'},
{name:'X.509 Cert Gen',desc:'Generate self-signed X.509 SSL/TLS certificates with RSA-2048 key pair. SAN support, PEM download.',url:'tools/crypto/x509-certificate-generator.html',cat:'crypto',icon:'🛡️'},
{name:'Roman Numeral',desc:'Convert between Roman numerals and Arabic numbers. Supports standard values up to 3999.',url:'tools/converter/roman-numeral.html',cat:'converter',icon:'🏛️'},
{name:'Temperature Converter',desc:'Convert between Celsius, Fahrenheit, Kelvin, Rankine, Réaumur, and Delisle.',url:'tools/converter/temperature.html',cat:'converter',icon:'🌡️'},
{name:'Percentage Calculator',desc:'Calculate percentages: what is X% of Y, what percent is X of Y, percentage change.',url:'tools/converter/percentage-calc.html',cat:'converter',icon:'💯'},
{name:'ETA Calculator',desc:'Calculate estimated time of arrival based on distance and speed or pace.',url:'tools/math/eta-calc.html',cat:'math',icon:'⏱️'},
{name:'MAC Address Generator',desc:'Generate random MAC addresses. Custom OUI, vendor prefix, bulk generation with realistic formatting.',url:'tools/network/mac-generator.html',cat:'network',icon:'🆔'},
{name:'IPv4 Converter',desc:'Convert between IPv4 address formats: dotted decimal, integer, hex, binary, and octal.',url:'tools/network/ipv4-converter.html',cat:'network',icon:'🌐'},
{name:'IPv4 Range Expander',desc:'Expand CIDR or IP ranges to list all individual addresses. Supports CIDR, start-end, and subnet masks.',url:'tools/network/ipv4-range-expander.html',cat:'network',icon:'🌐'},
{name:'IPv6 ULA Generator',desc:'Generate IPv6 Unique Local Addresses (FD00::/8) with proper prefix and interface ID.',url:'tools/network/ipv6-ula-generator.html',cat:'network',icon:'🌐'},
{name:'Bcrypt Hash',desc:'Hash passwords with bcrypt. Custom salt rounds, verify passwords against existing hashes.',url:'tools/crypto/bcrypt.html',cat:'crypto',icon:'🔑'},
{name:'HMAC Generator',desc:'Generate HMAC hashes with SHA-256, SHA-384, SHA-512. Supports hex, base64, base64url output.',url:'tools/crypto/hmac.html',cat:'crypto',icon:'🔑'},
{name:'Token Generator',desc:'Generate random tokens and API keys. Custom character sets, prefixes, bulk generation mode.',url:'tools/crypto/token-generator.html',cat:'crypto',icon:'🎫'},
{name:'Basic Auth Generator',desc:'Generate HTTP Basic Authentication headers and URLs from username and password.',url:'tools/network/basic-auth.html',cat:'network',icon:'🔐'},
{name:'Encryption / Decryption',desc:'Encrypt and decrypt text using AES, DES, TripleDES, Rabbit, RC4. Passphrase-based key derivation.',url:'tools/crypto/encryption.html',cat:'crypto',icon:'🔒'},
{name:'IBAN Validator',desc:'Validate and parse International Bank Account Numbers. Check digit verification, country details, bank info.',url:'tools/converter/iban-validator.html',cat:'converter',icon:'🏦'},
{name:'Phone Number Parser',desc:'Parse, validate, and format international phone numbers. Country info, carrier, line type detection.',url:'tools/converter/phone-parser.html',cat:'converter',icon:'📞'},
{name:'MAC Address Lookup',desc:'Look up the manufacturer of a device by MAC address. OUI database lookup with vendor search.',url:'tools/network/mac-lookup.html',cat:'network',icon:'🔍'},
{name:'Email Normalizer',desc:'Normalize email addresses: lowercase, remove dots in Gmail aliases, strip plus tags.',url:'tools/converter/email-normalizer.html',cat:'converter',icon:'📧'},
{name:'Math Evaluator',desc:'Evaluate mathematical expressions with variables, functions, and units. Plot 2D graphs.',url:'tools/math/math-evaluator.html',cat:'math',icon:'🔢'},
{name:'WiFi QR Code',desc:'Generate QR codes for WiFi credentials. WPA/WEP support, download as PNG with optional logo overlay.',url:'tools/network/wifi-qr-code.html',cat:'network',icon:'📱'},
{name:'Docker Compose Converter',desc:'Convert docker-compose.yml to Docker run commands or Kubernetes manifests.',url:'tools/devops/docker-compose-converter.html',cat:'devops',icon:'🐳'},
{name:'RSA Key Generator',desc:'Generate RSA key pairs (512-4096 bit). Download public and private keys in PEM format.',url:'tools/crypto/rsa-key-generator.html',cat:'crypto',icon:'🔑'},
{name:'User Agent Parser',desc:'Parse any User-Agent string. Identify browser, OS, device type, and rendering engine.',url:'tools/converter/user-agent-parser.html',cat:'converter',icon:'🕵️'},
{name:'String Obfuscator',desc:'Obfuscate text using XOR, base64, hex, unicode escapes, and custom cipher algorithms.',url:'tools/text/string-obfuscator.html',cat:'text',icon:'🔐'},
{name:'Numeronym Generator',desc:'Convert words to numeronyms like i18n and a11y. Also decode numeronyms back to the original word.',url:'tools/text/numeronym-generator.html',cat:'text',icon:'🌐'},
{name:'NATO Alphabet',desc:'Convert text to the NATO phonetic alphabet (Alpha, Bravo, Charlie, Delta...).',url:'tools/text/nato-alphabet.html',cat:'text',icon:'🔤'},
{name:'Slugify',desc:'Convert text to URL-friendly slugs with configurable separator, lowercase, and trim options.',url:'tools/text/slugify.html',cat:'text',icon:'🔗'},
{name:'Whitespace Remover',desc:'Remove extra spaces, blank lines, tabs, and full-width spaces. Collapse, trim, and clean up whitespace instantly.',url:'tools/text/whitespace-remover.html',cat:'text',icon:'🧹'},
{name:'Line Number Remover',desc:'Remove line numbers from code listings and text. Supports colon, dot, parenthesis, tab, and space separators.',url:'tools/text/line-number-remover.html',cat:'text',icon:'🔢'},
{name:'Text Statistics',desc:'Count characters, words, sentences, lines, paragraphs, digits, letters, and reading time in any text. Live counters.',url:'tools/text/text-statistics.html',cat:'text',icon:'📊'},
{name:'Data Cleaner',desc:'Clean and prepare text data: trim lines, remove empty lines, deduplicate duplicates, sort, and convert letter case.',url:'tools/text/data-cleaner.html',cat:'text',icon:'🧼'},
{name:'Data Masking',desc:'Mask emails, phone numbers, ID numbers, and long digit strings. Keep sensitive data safe in screenshots and logs.',url:'tools/text/data-masking.html',cat:'text',icon:'🙈'},
{name:'Phone Number Extractor',desc:'Extract phone numbers from text. Supports CN mobiles, international formats, and space/dash separated digits.',url:'tools/text/phone-number-extractor.html',cat:'text',icon:'📞'},
{name:'Temp Text Share',desc:'Create a share link for any text snippet. Text stays in your browser and is read back via a short link.',url:'tools/text/temp-text-share.html',cat:'text',icon:'🔗'},
{name:'SQL to MongoDB',desc:'Convert SQL SELECT queries to MongoDB shell commands. Supports WHERE with AND/OR, LIKE, IN, BETWEEN, IS NULL, ORDER BY, LIMIT.',url:'tools/text/sql-to-mongodb.html',cat:'text',icon:'🍃'},
{name:'Online Poll',desc:'Create a poll with up to 10 options, share the link, and view live results. Polls stay in your browser.',url:'tools/text/online-poll.html',cat:'text',icon:'🗳️'},
{name:'Random Port Generator',desc:'Generate random TCP/UDP port numbers with IANA category info. Well-known, registered, dynamic ranges.',url:'tools/network/random-port.html',cat:'network',icon:'🔌'},
{name:'List Converter',desc:'Convert lists between comma-separated, newline, JSON array, pipe, numbered, and SQL IN clause formats.',url:'tools/text/list-converter.html',cat:'text',icon:'📋'},
{name:'Benchmark Builder',desc:'Run and compare JavaScript code snippets side-by-side. Measure time and operations per second.',url:'tools/math/benchmark-builder.html',cat:'math',icon:'📊'},
{name:'TOTP / HOTP Generator',desc:'Generate TOTP and HOTP one-time passwords compatible with Google Authenticator and Authy.',url:'tools/crypto/otp-generator.html',cat:'crypto',icon:'🔐'},
{name:'BIP39 Mnemonic',desc:'Generate BIP39 cryptocurrency wallet mnemonic phrases. 128-256 bit entropy, optional passphrase.',url:'tools/crypto/bip39-generator.html',cat:'crypto',icon:'📝'},
{name:'WYSIWYG Editor',desc:'Rich text editor with HTML and Markdown export. Bold, italic, lists, links, images, and headings.',url:'tools/text/wysiwyg-editor.html',cat:'text',icon:'✏️'},
{name:'Camera Recorder',desc:'Record video from your camera. Start, stop, pause, download as WebM. Front/rear camera switching.',url:'tools/media/camera-recorder.html',cat:'media',icon:'📷'},
{name:'Git Command Memo',desc:'Quick reference for common Git commands. Config, branching, merging, rebasing, stashing, remotes.',url:'tools/reference/git-memo.html',cat:'reference',icon:'📘'},
{name:'Common Ports',desc:'Quick reference for common TCP/UDP ports and services: web, mail, database, dev tools, and more. Searchable table.',url:'tools/reference/common-ports.html',cat:'reference',icon:'🔌'},
{name:'Prime Number Checker',desc:'Test primality, get prime factorization, find the next prime, and generate prime lists up to 10 million.',url:'tools/math/prime-number-checker.html',cat:'math',icon:'🔢'},
{name:'Equation Solver',desc:'Solve linear equations (ax+b=c), quadratic equations (ax²+bx+c=0), and 2×2 systems of linear equations with steps.',url:'tools/math/equation-solver.html',cat:'math',icon:'🧮'},
{name:'Compound Interest Calculator',desc:'Calculate compound interest with monthly contributions, adjustable frequency, and inflation-adjusted real returns. Includes growth chart.',url:'tools/math/compound-interest-calculator.html',cat:'math',icon:'💰'},
{name:'NPV Calculator',desc:'Calculate Net Present Value, Internal Rate of Return, payback period, and profitability index from a series of cash flows.',url:'tools/math/net-present-value-calculator.html',cat:'math',icon:'📈'},
{name:'Annual Calendar',desc:'Generate a full-year calendar for any year. 12 months at a glance, Monday/Sunday start, highlight today, printable.',url:'tools/math/annual-calendar.html',cat:'math',icon:'📅'},
{name:'Meeting Scheduler',desc:'Enter each participant\'s busy time ranges and instantly find all free time slots that fit your meeting duration.',url:'tools/math/meeting-scheduler.html',cat:'math',icon:'🗓️'},
{name:'Random Decision Maker',desc:'Enter options (with optional weights) and let fate decide. Weighted random picker with rolling animation and history.',url:'tools/math/random-decision-maker.html',cat:'math',icon:'🎲'},
{name:'Truth or Dare',desc:'Classic party game spinner. Choose Truth or Dare, get a random prompt, skip or shuffle. Add your own prompts.',url:'tools/math/truth-or-dare.html',cat:'math',icon:'🎭'},
{name:'Electronic Signature',desc:'Draw your signature with mouse or touch, adjust pen width and color, and download it as a transparent PNG.',url:'tools/math/electronic-signature.html',cat:'math',icon:'✍️'},
{name:'Meme Maker',desc:'Create classic top-and-bottom caption memes. Upload any image, set text, choose style and font size, download as PNG.',url:'tools/math/meme-maker.html',cat:'math',icon:'😂'},
{name:'Social Media Cropper',desc:'Crop any image to the exact dimensions of Instagram, Twitter/X, Facebook, YouTube, LinkedIn and more. Zoom, drag, download.',url:'tools/math/social-media-cropper.html',cat:'math',icon:'✂️'},
{name:'Social Media Size Guide',desc:'Up-to-date reference table of image, video, avatar and cover dimensions for Instagram, X/Twitter, Facebook, YouTube, LinkedIn, TikTok and more.',url:'tools/math/social-media-size-guide.html',cat:'math',icon:'📐'},
{name:'Year-End Summary',desc:'Turn a few notes into a polished year-end summary. Choose a tone, fill in your highlights, copy the result.',url:'tools/math/year-end-summary.html',cat:'math',icon:'🎉'},
{name:'Online Whiteboard',desc:'Free drawing whiteboard in your browser. Pencil, line, rectangle, circle, eraser, undo/redo, colors, download PNG.',url:'tools/math/online-whiteboard.html',cat:'math',icon:'🖌️'},
{name:'Online Notes',desc:'Write and manage notes in your browser. Add, edit, search, delete. Auto-saved locally — nothing leaves your device.',url:'tools/math/online-notes.html',cat:'math',icon:'📝'},
{name:'Code Snippet Manager',desc:'Save, search and copy your code snippets. Organize by language and tags, import/export JSON backup. Stored locally.',url:'tools/math/code-snippet-manager.html',cat:'math',icon:'🗂️'},
{name:'HTTP Headers Analyzer',desc:'Paste raw HTTP response headers and get an instant security, caching and compression analysis with missing-header warnings.',url:'tools/math/http-headers-analyzer.html',cat:'math',icon:'🛡️'},
{name:'WebSocket Tester',desc:'Connect to any WebSocket server, send JSON or text messages, watch the log with timestamps.',url:'tools/math/websocket-tester.html',cat:'math',icon:'🔌'},
{name:'Phone Number Lookup',desc:'Validate any phone number, identify the carrier (China mobile prefixes), format it, and get number structure analysis.',url:'tools/math/phone-number-lookup.html',cat:'math',icon:'📱'},
{name:'AES Cipher',desc:'AES-128/192/256 encryption in your browser. CBC and GCM modes, passphrase (PBKDF2) or raw hex key, Base64/Hex output.',url:'tools/math/aes-cipher.html',cat:'math',icon:'🔐'},
{name:'AI Code Commenter',desc:'Paste JavaScript, Python, HTML or CSS and get a commented version — function headers, parameter docs and section labels.',url:'tools/math/ai-code-commenter.html',cat:'math',icon:'💬'},
{name:'AI Naming Helper',desc:'Generate project names, function names, variable names and slugs from a short description. Rule-based name engine, 4 styles.',url:'tools/math/ai-naming-helper.html',cat:'math',icon:'🏷️'},
{name:'Chrome Extension Kit',desc:'Configure a Chrome extension (MV3) with name, description, permissions and action options, then download the complete file set as a ZIP.',url:'tools/math/chrome-extension-kit.html',cat:'math',icon:'🧩'},
{name:'HTML Runner',desc:'Write HTML, CSS and JavaScript in one editor and preview the result live in an iframe. Run button, auto-run toggle, offline.',url:'tools/math/html-runner.html',cat:'math',icon:'🏃'},
{name:'HTML Project Runner',desc:'Run a multi-file web project (HTML, CSS, JS) in your browser. File explorer, editor, live preview with relative paths inlined. Autosaves locally.',url:'tools/math/html-project-runner.html',cat:'math',icon:'📂'},
{name:'Audio Merger',desc:'Join multiple audio files (MP3, WAV, OGG, M4A) into one WAV file. Drag & drop, reorder, all in your browser.',url:'tools/math/audio-merger.html',cat:'math',icon:'🎧'},
{name:'Flashcard Maker',desc:'Create flashcard decks with front/back cards. Study in order or shuffled, with flip animations and progress tracking. Autosaves locally, JSON export.',url:'tools/math/flashcard-maker.html',cat:'math',icon:'🃏'},
{name:"Newton's 2nd Law Calculator",desc:'Solve F = ma: enter any two of force (N), mass (kg), acceleration (m/s²) and get the third. Includes gravity mode with g presets.',url:'tools/math/newton-law-calculator.html',cat:'math',icon:'🍎'},
{name:'Periodic Table',desc:'Interactive periodic table of all 118 elements. Click for atomic mass, electron configuration, category, period/group. Search and filter, color-coded.',url:'tools/math/periodic-table.html',cat:'math',icon:'🧪'},
{name:'Planet Orbit Simulator',desc:'Interactive planet orbit simulator around a central star. Add planets, tune radius/speed/size/color, watch orbital motion with trails, pause and speed controls.',url:'tools/math/planet-orbit-simulator.html',cat:'math',icon:'🪐'},
{name:'World Map Quiz',desc:'Geography quiz on an interactive world map. Pick a region (World, Europe, Asia, Africa, Americas, Oceania), click the country that matches the prompt, get scored.',url:'tools/math/world-map-quiz.html',cat:'math',icon:'🌍'},
{name:'HTML to Markdown Converter',desc:'Convert HTML to clean Markdown in your browser. Paste HTML, preview the Markdown result, copy or download. Demo included.',url:'tools/code/html-to-markdown.html',cat:'code',icon:'📝'},
{name:'Pinyin Annotator',desc:'Add pinyin to Chinese text. Top-of-character, inline, or pinyin-only modes; copy annotated HTML or plain text. Great for language learning.',url:'tools/text/pinyin-annotator.html',cat:'text',icon:'🔤'},
{name:'PDF Merger',desc:'Merge multiple PDF files into one in your browser. Drag & drop PDFs, reorder files, download the combined PDF. Files never leave your device.',url:'tools/pdf/pdf-merger.html',cat:'pdf',icon:'📄'},
{name:'PDF Splitter',desc:'Split a PDF in your browser: select pages to extract into a new PDF, or delete unwanted pages. Files never leave your device.',url:'tools/pdf/pdf-splitter.html',cat:'pdf',icon:'✂️'},
{name:'PDF to Image',desc:'Convert PDF pages to PNG images in your browser. Render pages at 1×-3× scale, preview thumbnails, download individual or all pages.',url:'tools/pdf/pdf-to-image.html',cat:'pdf',icon:'🖼️'},
{name:'Word to PDF',desc:'Convert Word (.docx) documents to PDF in your browser. Preview the parsed document, then download the PDF. Files never leave your device.',url:'tools/pdf/word-to-pdf.html',cat:'pdf',icon:'📝'},
{name:'JPG to PNG Converter',desc:'Batch convert JPG images to PNG in your browser. Upload multiple images, preview converted PNGs, download individually or as a ZIP archive.',url:'tools/image/jpg-to-png.html',cat:'image',icon:'🖼️'},
{name:'GIF Maker',desc:'Create animated GIFs from uploaded images in your browser. Add, duplicate, remove frames, set delay and looping, preview and download.',url:'tools/image/gif-maker.html',cat:'image',icon:'🎞️'},
{name:'Radar & Heatmap Chart Maker',desc:'Create radar, bar, line and heatmap charts in your browser. Edit data inline, switch chart types, download as PNG.',url:'tools/chart/chart-radar-heatmap.html',cat:'chart',icon:'📊'},
{name:'Math Formula Editor',desc:'Write LaTeX math formulas with live KaTeX preview. Insert fractions, roots, integrals, Greek letters; copy LaTeX source or rendered HTML.',url:'tools/math/math-formula-editor.html',cat:'math',icon:'∑'},
{name:'Crypto Tool',desc:'One-stop crypto toolbox: MD5/SHA1/SHA256/SHA512/SHA3 hashing, AES/DES/3DES/Rabbit/RC4 encryption, Base64/Base64URL/Hex encoding. All client-side.',url:'tools/crypto/crypto-tool.html',cat:'crypto',icon:'🔐'},
{name:'OCR Tool',desc:'Extract text from images with Tesseract.js OCR — runs entirely in the browser, no upload. Supports English, Chinese, Japanese, Korean and more.',url:'tools/ocr/ocr-tool.html',cat:'ocr',icon:'🔎'},
{name:'Background Remover',desc:'Remove the background from person photos with AI segmentation (MediaPipe Selfie Segmenter). Fully in-browser, nothing is uploaded. Replace with transparency or a solid color.',url:'tools/image/image-background-remover.html',cat:'image',icon:'🖼️'},
{name:'ID Photo Maker',desc:'Make standard ID photos from a portrait: AI background replacement, standard sizes (1-inch, 2-inch, passport) and a ready-to-print 6-inch sheet. Runs fully in the browser.',url:'tools/image/id-photo-maker.html',cat:'image',icon:'📷'},
{name:'Video Merger',desc:'Merge multiple video files into one MP4 right in the browser with FFmpeg.wasm — nothing is uploaded. Works with MP4, WebM, MOV and more.',url:'tools/media/video-merger.html',cat:'media',icon:'🎬'},
{name:'Video Splitter',desc:'Cut a segment out of a video file in the browser with FFmpeg.wasm. Set start time and duration, download the clip as MP4. No upload.',url:'tools/media/video-splitter.html',cat:'media',icon:'✂️'},
{name:'Video Reverser',desc:'Play a video backwards (audio reversed too) right in the browser with FFmpeg.wasm. Download the reversed video as MP4. Nothing is uploaded.',url:'tools/media/video-reverser.html',cat:'media',icon:'⏪'},
{name:'Video to Images',desc:'Extract frames from a video as PNG images in the browser with FFmpeg.wasm. Choose the interval in seconds, download all frames as a ZIP. No upload.',url:'tools/media/video-to-image.html',cat:'media',icon:'🖼️'},
{name:'Regex Quick Reference',desc:'Quick reference for regular expression syntax. Anchors, classes, quantifiers, groups, common patterns.',url:'tools/reference/regex-memo.html',cat:'reference',icon:'📘'},
{name:'Date Time Converter',desc:'Convert between Unix timestamps, ISO 8601, RFC 2822, local, and UTC date/time formats.',url:'tools/converter/date-time-converter.html',cat:'converter',icon:'📅'},
{name:'Device Information',desc:'View browser, screen, window, and navigator details. UA, resolution, memory, features.',url:'tools/device/device-information.html',cat:'device',icon:'📱'},
{name:'JSON to TOML',desc:'Convert JSON to TOML format and back. Supports nested objects, arrays, strings, numbers, booleans.',url:'tools/converter/json-to-toml.html',cat:'converter',icon:'J→T'},
{name:'JSON to XML',desc:'Convert JSON to XML format and back. Custom root element, attributes support, nested structures.',url:'tools/converter/json-to-xml.html',cat:'converter',icon:'J→X'},
{name:'Password Strength',desc:'Analyze password strength with entropy, character variety, crack time estimation, and checklist.',url:'tools/crypto/password-strength.html',cat:'crypto',icon:'🔐'},
{name:'PDF Signature Checker',desc:'Verify digital signatures in PDF files. Check certificate chain, document integrity, and signature authenticity.',url:'tools/crypto/pdf-signature-checker.html',cat:'crypto',icon:'📄'},
{name:'Safelink Decoder',desc:'Decode Microsoft Defender, Google Safe Browsing safelinks to reveal the original destination URL.',url:'tools/converter/safelink-decoder.html',cat:'converter',icon:'🔗'},
{name:'SVG Placeholder',desc:'Generate custom SVG placeholder images with text, colors, and dimensions for prototyping.',url:'tools/image/svg-placeholder.html',cat:'image',icon:'🖼️'},
{name:'Text to Binary',desc:'Convert text to binary (ASCII bits) and binary back to text. Supports 8-bit binary representation.',url:'tools/text/text-to-binary.html',cat:'text',icon:'🔢'},
{name:'Text to Unicode',desc:'View Unicode code points for any text. Decimal, hex, binary, HTML entities, and JS escapes.',url:'tools/text/text-to-unicode.html',cat:'text',icon:'🔣'},
{name:'TOML to YAML',desc:'Convert TOML to YAML format and back. Supports tables, nested objects, arrays, and inline tables.',url:'tools/converter/toml-to-yaml.html',cat:'converter',icon:'T→Y'},
{name:'XML to JSON',desc:'Convert XML to JSON format and back. Preserves attributes, text content, and array structures.',url:'tools/converter/xml-to-json.html',cat:'converter',icon:'X→J'},
{name:'YAML to TOML',desc:'Convert YAML to TOML format and back. Supports nested objects, arrays, booleans, and numbers.',url:'tools/converter/yaml-to-toml.html',cat:'converter',icon:'Y→T'},
{name:'Animation Timing Playground',desc:'Interactive playground for CSS animation timing functions (cubic-bezier, steps, linear multi-point, comparison mode).',url:'tools/css/animation-timing-playground.html',cat:'css',icon:'⏱'},
{name:'CSS Scroll Snap Builder',desc:'Visual CSS Scroll Snap builder. Configure snap-type, snap-align, scroll-padding, scroll-margin, snap-stop with live preview and CSS export.',url:'tools/css/scroll-snap-playground.html',cat:'css',icon:'📐'},
{name:'Proxy & Reflect Patterns',desc:'Interactive Proxy and Reflect patterns playground — observable objects, validation proxies, negative indexing, revocable proxies, all 13 handler traps.',url:'tools/js/proxy-reflect-patterns.html',cat:'js',icon:'🪞'},
{name:'Web Animations API Playground',desc:'Interactive playground for the Web Animations API — keyframe effects, animation controls, timeline scrubbing, easing presets, composite modes, WAAPI vs CSS.',url:'tools/js/web-animations-api.html',cat:'js',icon:'🎬'},
{name:'Web Speech API Playground',desc:'Interactive playground for Web Speech API — SpeechRecognition and SpeechSynthesis in one page. Test voices, rate, pitch, and recognition.',url:'tools/js/web-speech-api.html',cat:'js',icon:'🗣️'},
{name:'YAML Viewer',desc:'View and explore YAML files with collapsible tree view, syntax highlighting, and search. Parse and validate YAML content.',url:'tools/converter/yaml-viewer.html',cat:'converter',icon:'📄'},
{name:'Alarm Clock',desc:'Set an alarm right in your browser — nothing is uploaded. Pick any time of day, watch the live clock and the remaining time, get a pleasant beep with a visual flash when it rings.',url:'tools/code/alarm-clock.html',cat:'code',icon:'💻'},
{name:'Bookmarklet Maker',desc:'Turn any JavaScript snippet into a bookmarklet right in your browser — nothing is uploaded. Auto-wraps, URL-encodes and minifies your code, one click to copy the ready-to-use link.',url:'tools/code/bookmarklet.html',cat:'code',icon:'💻'},
{name:'Date Countdown',desc:'Count down to any date right in your browser — nothing is uploaded. Pick a date, get the exact days, hours, minutes and seconds left, live, with a celebratory flash when it arrives.',url:'tools/code/date-countdown.html',cat:'code',icon:'💻'},
{name:'New Year Countdown',desc:'Count down to the next New Year in your browser — nothing is uploaded. Live days, hours, minutes and seconds until the ball drops, then a celebratory burst of fireworks.',url:'tools/code/new-year-countdown.html',cat:'code',icon:'💻'},
{name:'File Encryptor',desc:'Encrypt any file with AES-256-GCM right in the browser using WebCrypto — nothing is uploaded. A password derives the key, the encrypted file stores its own IV, decrypt it later on this page.',url:'tools/converter/file-encrypt.html',cat:'converter',icon:'🔀'},
{name:'File Unzipper',desc:'Extract a ZIP archive right in the browser with JSZip — nothing is uploaded. See every entry with its size, preview images and text, download one file or the whole archive as a new ZIP.',url:'tools/converter/file-unzipper.html',cat:'converter',icon:'🔀'},
{name:'File Zipper',desc:'Create a ZIP archive right in the browser with JSZip — nothing is uploaded. Drop any files, choose a compression level, name the archive, download it instantly.',url:'tools/converter/file-zipper.html',cat:'converter',icon:'🔀'},
{name:'Argon2 Password Hasher',desc:'Hash a password with Argon2id right in the browser — nothing is uploaded. Tune time cost, memory and parallelism, get a raw hash or a verifying encoded string, re-verify any encoded hash.',url:'tools/crypto/hash-argon2.html',cat:'crypto',icon:'🔐'},
{name:'CRC32 Generator',desc:'Generate CRC32 checksums right in the browser — nothing is uploaded. Compute the 32-bit checksum of any text or any file, compare against an expected value, copy it instantly.',url:'tools/crypto/hash-crc32.html',cat:'crypto',icon:'🔐'},
{name:'MD5 Generator & Checker',desc:'Generate and verify MD5 hashes right in the browser — nothing is uploaded. Hash any text or any file, compare against an expected hash, copy the result instantly.',url:'tools/crypto/hash-md5.html',cat:'crypto',icon:'🔐'},
{name:'SHA-256 Generator & Checker',desc:'Generate and verify SHA-256 hashes right in the browser with WebCrypto — nothing is uploaded. Hash any text or any file, compare against an expected hash, copy the result instantly.',url:'tools/crypto/hash-sha256.html',cat:'crypto',icon:'🔐'},
{name:'Passport Photo Maker',desc:'Turn any photo into a compliant passport / ID photo right in the browser — nothing is uploaded. Pick a country standard (US, JP, EU…), crop and scale on a guide, choose a background, download at true print size.',url:'tools/image/id-photo-passport.html',cat:'image',icon:'🖼️'},
{name:'Photo Print Sheet',desc:'Arrange ID photos on a 4×6 inch print sheet right in the browser — nothing is uploaded. Choose how many photos per sheet (1, 2, 4 or 8), every cell is centered with white borders, download at 300 DPI.',url:'tools/image/id-photo-print.html',cat:'image',icon:'🖼️'},
{name:'Add Date to Image',desc:'Add date stamps to photos in your browser. Auto-read date from EXIF, choose format, position, size and color, download result. No upload to server.',url:'tools/image/image-add-date.html',cat:'image',icon:'🖼️'},
{name:'Image Blur Tool',desc:'Blur images in your browser. Adjustable blur radius, live preview, censor effect, download result. No upload to server.',url:'tools/image/image-blur.html',cat:'image',icon:'🖼️'},
{name:'Image Compressor',desc:'Compress JPG and PNG images right in the browser — nothing is uploaded. Pick a quality preset, see the size saved for every image, download one file or all as a ZIP.',url:'tools/image/image-compress.html',cat:'image',icon:'🖼️'},
{name:'Crop Circle',desc:'Crop images into circles in your browser. Drag to adjust the circular crop area, preview, download transparent PNG. No upload to server.',url:'tools/image/image-crop-circle.html',cat:'image',icon:'🖼️'},
{name:'EXIF Remover',desc:'Remove EXIF metadata from photos in your browser: GPS location, camera info, date. Re-encode image without metadata. No upload to server.',url:'tools/image/image-exif-remover.html',cat:'image',icon:'🖼️'},
{name:'EXIF Viewer',desc:'Read EXIF metadata from photos in your browser: camera, lens, ISO, aperture, shutter, GPS, date. View all tags. No upload to server.',url:'tools/image/image-exif.html',cat:'image',icon:'🖼️'},
{name:'Flip Image Tool',desc:'Flip images horizontally or vertically in your browser. Live preview, download result. No upload to server.',url:'tools/image/image-flip.html',cat:'image',icon:'🖼️'},
{name:'HEIC Converter',desc:'Convert HEIC photos to JPG or PNG in your browser. Batch convert multiple iPhone photos, download all as ZIP. No upload to server.',url:'tools/image/image-heic-convert.html',cat:'image',icon:'🖼️'},
{name:'Image Pixelate Tool',desc:'Pixelate images in your browser. Adjustable pixel block size, live preview, censor effect, download result. No upload to server.',url:'tools/image/image-pixelate.html',cat:'image',icon:'🖼️'},
{name:'Image Renamer',desc:'Batch rename images right in the browser — nothing is uploaded. Build a new name with a prefix, suffix, counter and find &amp; replace, preview every result, download all as a ZIP.',url:'tools/image/image-rename.html',cat:'image',icon:'🖼️'},
{name:'Rotate Image Tool',desc:'Rotate images in your browser. Free angle rotation or 90° presets, live preview, download result. No upload to server.',url:'tools/image/image-rotate.html',cat:'image',icon:'🖼️'},
{name:'Image Splitter',desc:'Split images into a grid in your browser. Choose rows and columns, preview cells, download all pieces as a ZIP. No upload to server.',url:'tools/image/image-split.html',cat:'image',icon:'🖼️'},
{name:'Straighten Image Tool',desc:'Straighten tilted photos in your browser. Fine angle adjustment with live preview, auto crop option, download result. No upload to server.',url:'tools/image/image-straighten.html',cat:'image',icon:'🖼️'},
{name:'Photo Collage Maker',desc:'Combine 2-9 photos into a grid collage right in the browser — nothing is uploaded. Pick a ready-made template or build a custom grid, set spacing, background and corner radius, download as JPG or PNG.',url:'tools/image/photo-collage.html',cat:'image',icon:'🖼️'},
{name:'WebP Converter',desc:'Convert WebP images to JPG or PNG, or convert JPG/PNG to WebP in your browser. Batch convert, download all as ZIP. No upload to server.',url:'tools/image/webp-convert.html',cat:'image',icon:'🖼️'},
{name:'Counter',desc:'A simple click counter for tallying anything — nothing is uploaded. Count up or down in steps, keep a history of your counts, reset anytime.',url:'tools/math/counter.html',cat:'math',icon:'🧮'},
{name:'Coin Flip',desc:'Flip a virtual coin right in the browser — nothing is uploaded. Realistic 3D toss animation with rotation physics, a result counter and a running history of every flip.',url:'tools/math/random-coin.html',cat:'math',icon:'🧮'},
{name:'Dice Roller',desc:'Roll virtual dice right in the browser — nothing is uploaded. Choose 1-6 dice, watch them tumble with a shake animation, read the total instantly, roll as many times as you like.',url:'tools/math/random-dice.html',cat:'math',icon:'🧮'},
{name:'List Shuffler',desc:'Randomize any list right in the browser — nothing is uploaded. Type items one per line, shuffle with a Fisher–Yates sort, copy the new order instantly.',url:'tools/math/random-list.html',cat:'math',icon:'🧮'},
{name:'Lottery Picker',desc:'Draw random winners from a list right in the browser — nothing is uploaded. Each draw picks a unique name with a quick shuffle animation, keep drawing until everyone is picked.',url:'tools/math/random-lots.html',cat:'math',icon:'🧮'},
{name:'Random Team Generator',desc:'Split any list of names into random teams right in the browser — nothing is uploaded. Choose the number of teams, optionally balance sizes, copy or re-shuffle in one click.',url:'tools/math/random-team.html',cat:'math',icon:'🧮'},
{name:'Spin Wheel',desc:'Decide anything with a spin wheel in your browser — nothing is uploaded. Type your options, spin with a flick of the wheel, a pointer and a spin sound announce the winner.',url:'tools/math/random-wheel.html',cat:'math',icon:'🧮'},
{name:'Scoreboard',desc:'A free scoreboard for games and sports — nothing is uploaded. Add up to 6 players, set their names, award points with +/− buttons, and crown a winner at the end.',url:'tools/math/scoreboard.html',cat:'math',icon:'🧮'},
{name:'Audio Converter',desc:'Convert audio between MP3, WAV, M4A, OGG and FLAC right in the browser with FFmpeg.wasm — nothing is uploaded. Batch convert with bitrate control, or pull the audio track out of a video.',url:'tools/media/audio-convert.html',cat:'media',icon:'🎬'},
{name:'Audio Joiner',desc:'Join and merge audio files into one MP3, WAV, M4A, OGG or FLAC right in the browser with FFmpeg.wasm — nothing is uploaded. Reorder clips, pick output format and bitrate.',url:'tools/media/audio-joiner.html',cat:'media',icon:'🎬'},
{name:'Audio Splitter',desc:'Split audio into parts right in the browser with FFmpeg.wasm — nothing is uploaded. Divide a file into equal parts or chunks of a fixed length, lossless stream copy, ZIP download.',url:'tools/media/audio-split.html',cat:'media',icon:'🎬'},
{name:'Audio Trimmer',desc:'Trim your audio online in the browser with FFmpeg.wasm — nothing is uploaded. Cut off the parts you don\'t need and keep the original quality with lossless stream copy.',url:'tools/media/audio-trim.html',cat:'media',icon:'🎬'},
{name:'Video Compressor',desc:'Compress video right in the browser with FFmpeg.wasm — nothing is uploaded. Re-encode to a smaller MP4 with quality and resolution presets, batch mode and ZIP download.',url:'tools/media/video-compress.html',cat:'media',icon:'🎬'},
{name:'Video to GIF',desc:'Turn a video clip into an animated GIF right in the browser with FFmpeg.wasm — nothing is uploaded. Pick frame rate and width, batch convert, two-pass colour palette keeps it clean.',url:'tools/media/video-to-gif.html',cat:'media',icon:'🎬'},
{name:'Video Trimmer',desc:'Trim your video online in the browser with FFmpeg.wasm — nothing is uploaded. Cut off the parts you don\'t need and keep the original quality with lossless stream copy.',url:'tools/media/video-trim.html',cat:'media',icon:'🎬'},
{name:'Voice Recorder',desc:'Record your voice right in your browser — nothing is uploaded. Live waveform, pause/resume, unlimited recording time, download as WAV or MP3 (via MediaRecorder).',url:'tools/media/voice-recorder.html',cat:'media',icon:'🎬'},
{name:'JPG to PDF',desc:'Convert JPG, PNG, WebP or GIF images into a single PDF right in the browser with pdf-lib — nothing is uploaded. Each image becomes a page, auto-fits the paper size, reorder before converting.',url:'tools/pdf/jpg-to-pdf.html',cat:'pdf',icon:'📄'},
{name:'PDF Compressor',desc:'Compress PDF right in the browser — nothing is uploaded. Pick a quality preset, pages are re-rendered at a lower JPEG quality to shrink the file, download the smaller PDF.',url:'tools/pdf/pdf-compress.html',cat:'pdf',icon:'📄'},
{name:'PDF Organizer',desc:'Organize PDF pages in the browser with PDF.js and pdf-lib — nothing is uploaded. Reorder by dragging thumbnails, rotate and delete pages, then download the reorganized PDF.',url:'tools/pdf/pdf-organize.html',cat:'pdf',icon:'📄'},
{name:'PDF Page Numbers',desc:'Add page numbers to a PDF right in the browser with pdf-lib — nothing is uploaded. Choose a format like \'Page {n} of {t}\', a position, a starting number, and skip the cover page.',url:'tools/pdf/pdf-page-numbers.html',cat:'pdf',icon:'📄'},
{name:'PDF Rotator',desc:'Rotate PDF pages right in the browser with pdf-lib — nothing is uploaded. Choose 90°, 180° or 270° for a whole document or apply per page, process multiple files at once, download a ZIP.',url:'tools/pdf/pdf-rotate.html',cat:'pdf',icon:'📄'},
{name:'PDF to JPG',desc:'Convert every page of a PDF into JPG images right in the browser with PDF.js — nothing is uploaded. Choose image quality, pages render at 2x sharpness, download pages as a ZIP.',url:'tools/pdf/pdf-to-jpg.html',cat:'pdf',icon:'📄'},
{name:'PDF Unlocker',desc:'Remove the owner-password restrictions from a PDF right in the browser with qpdf-wasm — nothing is uploaded. Type the password once, get a fully usable copy with printing, editing, copying and annotating allowed.',url:'tools/pdf/pdf-unlock.html',cat:'pdf',icon:'📄'},
{name:'PDF Watermark',desc:'Add a text watermark to a PDF right in the browser with pdf-lib — nothing is uploaded. Type any text, tune size, opacity and position, stamp it in the center or repeat it across every page.',url:'tools/pdf/pdf-watermark.html',cat:'pdf',icon:'📄'},
{name:'Cool Text Font',desc:'Turn plain text into fancy Unicode fonts right in your browser — nothing is uploaded. 20+ cool styles: bold, italic, script, gothic, circled, squared and more, one click to copy.',url:'tools/text/cool-text.html',cat:'text',icon:'🔤'},
{name:'Email HTML',desc:'Write your email in Markdown and get email-safe HTML right in your browser — nothing is uploaded. Inline-styled table layout, tested against the classic email clients, copy or download.',url:'tools/text/email-html.html',cat:'text',icon:'🔤'},
{name:'Invisible Ink',desc:'Hide any message inside invisible zero-width characters right in your browser — nothing is uploaded. Encode a secret into blank-looking text, or decode it back, one click to copy.',url:'tools/text/invisible-ink.html',cat:'text',icon:'🔤'},
{name:'Strikethrough Text',desc:'Strike through any text right in your browser — nothing is uploaded. Convert to Unicode s̶t̶r̶i̶k̶e̶t̶h̶r̶o̶u̶g̶h̶ in one click, copy or download the result.',url:'tools/text/strikethrough-text.html',cat:'text',icon:'🔤'},
{name:'Symbol Text',desc:'Browse and copy hundreds of special symbols, emoji, arrows, math signs and more right in your browser — nothing is uploaded. Click any symbol to copy it instantly.',url:'tools/text/symbol-text.html',cat:'text',icon:'🔤'},
{name:'Whitespace Converter',desc:'Convert whitespace between tabs, spaces, newlines and visible markers right in your browser — nothing is uploaded. Perfect for debugging messy whitespace or preparing config files.',url:'tools/text/whitespace-converter.html',cat:'text',icon:'🔤'},
{name:'Zalgo Text',desc:'Corrupt any text with disturbing Unicode combining marks right in your browser — nothing is uploaded. Three intensity levels plus a creepy preview, one click to copy.',url:'tools/text/zalgo-text.html',cat:'text',icon:'🔤'}];;

const TOOLS_ZH=[{name:'JSON 格式化',desc:'美化、验证、压缩 JSON。树形视图、统计、下载。',url:'tools/code/json-format.html',cat:'code',icon:'📋'},
{name:'JSON 差异对比',desc:'对比两个 JSON 对象。新增、删除、修改项附带路径高亮。',url:'tools/code/json-diff.html',cat:'code',icon:'🔀'},
{name:'正则测试',desc:'实时正则表达式测试器。匹配高亮、捕获组、12 种常用模式。',url:'tools/code/regex-test.html',cat:'code',icon:'🔍'},
{name:'文本差异对比',desc:'并排对比两段文本。行级差异和单词级差异。',url:'tools/code/diff-text.html',cat:'code',icon:'📝'},
{name:'Cron 表达式解析',desc:'粘贴 Cron 表达式，获取通俗英文解释 + 未来 10 次执行时间。',url:'tools/code/cron-explain.html',cat:'code',icon:'⏰'},
{name:'字数统计',desc:'单词/字符/句子计数。阅读时间、可读性评分、关键词提取。',url:'tools/writing/word-count.html',cat:'writing',icon:'🔢'},
{name:'标题评分',desc:'博客标题分析器。基于研究的 16 项评分要素。',url:'tools/writing/title-score.html',cat:'writing',icon:'📊'},
{name:'README 评分',desc:'README 质量检查器。16 项最佳实践检查，A-F 等级评分。',url:'tools/writing/readme-score.html',cat:'writing',icon:'📊'},
{name:'调色板',desc:'选取颜色，获取 6 种和谐配色方案。WCAG 对比度检测，CSS/Tailwind 导出。',url:'tools/design/color-palette.html',cat:'design',icon:'🎨'},
{name:'字体配对',desc:'20 组精选 Google Fonts 字体搭配。实时预览，CSS 导出。',url:'tools/design/font-pair.html',cat:'design',icon:'🔤'},
{name:'字体预览',desc:'浏览 1500+ Google Fonts。实时预览，最多对比 6 款，CSS 导出。',url:'tools/design/font-preview.html',cat:'design',icon:'🔤'},
{name:'色彩提取',desc:'从图片中提取主色调。K-means 算法，HEX/RGB/HSL，调色板 PNG 导出。',url:'tools/design/color-extract.html',cat:'design',icon:'🎨'},
{name:'对比度检查器',desc:'WCAG 色彩对比度检查器。AA/AAA 合规性，实时预览，优化建议。',url:'tools/design/contrast-check.html',cat:'design',icon:'♿'},
{name:'CSS 阴影',desc:'可视化 box-shadow 生成器。多层阴影，10 种预设，实时预览。',url:'tools/design/css-shadow.html',cat:'design',icon:'🌑'},
{name:'GitHub 统计',desc:'GitHub 个人资料仪表盘。仓库、星标、语言、活动时间线。',url:'tools/data/gh-stats.html',cat:'data',icon:'📊'},
{name:'仓库对比',desc:'并排对比 GitHub 仓库。星标、提交、语言、活跃度。',url:'tools/data/repo-compare.html',cat:'data',icon:'⚔'},
{name:'npm 健康检查',desc:'npm 包健康度检查器。9 项指标，下载趋势，A-F 等级评分。',url:'tools/data/npm-health.html',cat:'data',icon:'📊'},
{name:'npm 对比',desc:'并排对比 npm 包。下载量、体积、依赖、趋势。',url:'tools/data/npm-compare.html',cat:'data',icon:'⚖'},
{name:'依赖树可视化',desc:'可视化 npm 依赖树。安装前预览实际安装内容。',url:'tools/data/dep-tree.html',cat:'data',icon:'🌳'},
{name:'许可证审计',desc:'上传 package.json 识别许可证冲突。SPDX 分类、Copyleft 检测、CSV 导出。',url:'tools/data/license-audit.html',cat:'data',icon:'⚖️'},
{name:'npm 替代品查找',desc:'查找替代 npm 包。按关键词重叠对比下载量、质量、维护情况。',url:'tools/data/npm-alt.html',cat:'data',icon:'🔀'},
{name:'Semver 计算器',desc:'可视化语义化版本范围计算器。查看 ^、~、>= 等范围匹配的版本。交互式网格 + 对比表格。',url:'tools/data/semver-calc.html',cat:'data',icon:'📐'},
{name:'TS 错误解析',desc:'TypeScript 错误代码解码器。80+ 条错误附带解释、原因和修复示例。按代码或关键词搜索。',url:'tools/code/ts-error.html',cat:'code',icon:'❌'},
{name:'package.json 检查器',desc:'package.json 质量检查器。25+ 项字段、元数据、入口点、脚本、依赖检查。A-F 等级评分。',url:'tools/data/pkg-lint.html',cat:'data',icon:'📦'},
{name:'环境变量参考',desc:'环境变量速查手册。涵盖 AWS、GCP、GitHub Actions、Docker、Node.js 等 80+ 变量。点击复制。',url:'tools/code/env-vars.html',cat:'code',icon:'🔤'},
{name:'GitHub 发布查看',desc:'浏览任意仓库的 GitHub 发布说明。Markdown 渲染、版本筛选、资源下载。内置常用仓库。',url:'tools/data/gh-releases.html',cat:'data',icon:'📋'},
{name:'PyPI 搜索',desc:'探索 PyPI 的 Python 包。版本历史、依赖、许可证、分类器。一键复制 pip install 命令。',url:'tools/data/pypi-search.html',cat:'data',icon:'🐍'},
{name:'Crate 搜索',desc:'探索 crates.io 的 Rust 包。版本、依赖、分类、关键词。一键复制 cargo add 命令。',url:'tools/data/crate-search.html',cat:'data',icon:'🦀'},
{name:'npm 名称可用性检查',desc:'检查 npm 包名是否可用。批量检查、名称验证、替代建议。实时注册表查询。',url:'tools/data/can-i-npm.html',cat:'data',icon:'📛'},
{name:'npm 依赖图',desc:'可视化 npm 包依赖树。力导向图，深度 1-3，可拖拽节点，SVG 导出。',url:'tools/data/npm-dep-graph.html',cat:'data',icon:'🕸️'},
{name:'Unicode 搜索',desc:'搜索 500+ Unicode 字符。复制到剪贴板，UTF-8/HTML/CSS/JS 转义，分类筛选，最近使用记录。',url:'tools/code/unicode-search.html',cat:'code',icon:'🔣'},
{name:'GitHub 贡献分析',desc:'查看 GitHub 用户活动。个人资料卡片、事件分布图表、常用语言、最活跃仓库。',url:'tools/data/github-contrib.html',cat:'data',icon:'📊'},
{name:'npm 趋势对比',desc:'对比 npm 包下载趋势。折线图、周期选择器、汇总表格。最多 5 个包。',url:'tools/data/npm-trends.html',cat:'data',icon:'📈'},
{name:'端口参考',desc:'网络端口速查手册。130 个知名端口，10 个分类，安全说明，调试技巧。',url:'tools/code/port-ref.html',cat:'code',icon:'🔌'},
{name:'MIME 类型参考',desc:'MIME 类型速查手册。150+ 类型，双向查找（扩展名↔MIME），Content-Type 示例，点击复制。',url:'tools/code/mime-types.html',cat:'code',icon:'📄'},
{name:'GitHub 卡片生成器',desc:'生成可分享的 GitHub 个人资料卡片。6 种主题，PNG 下载。',url:'tools/data/gh-card.html',cat:'data',icon:'🃏'},
{name:'dev.to 统计',desc:'dev.to 文章表现仪表盘。浏览量、标签、发布规律。',url:'tools/data/devto-stats.html',cat:'data',icon:'📊'},
{name:'LLM 价格对比',desc:'对比 35+ 款模型、7 家提供商的 AI 模型定价。',url:'tools/ai/llm-price.html',cat:'ai',icon:'💰',featured:true},
{name:'Prompt 价格计算',desc:'粘贴文本，查看 35+ 款模型的 API 费用。Token 计算器。',url:'tools/ai/prompt-price.html',cat:'ai',icon:'💵',featured:true},
{name:'模型选择器',desc:'4 题测试，为你的使用场景推荐合适的 AI 模型。',url:'tools/ai/model-picker.html',cat:'ai',icon:'🤖',featured:true},
{name:'AI ROI 计算器',desc:'AI 与人工成本的对比分析。年度节省金额和投资回报率计算器。',url:'tools/ai/ai-roi-calc.html',cat:'ai',icon:'📈',featured:true},
{name:'Base64 工具',desc:'Base64、URL、HTML 实体编解码。JWT Token 解码器。',url:'tools/code/base64-tool.html',cat:'code',icon:'🔐'},
{name:'哈希生成器',desc:'生成 SHA-1、SHA-256、SHA-512 哈希值。文件哈希、哈希对比。',url:'tools/code/hash-gen.html',cat:'code',icon:'🔑'},
{name:'时间戳转换',desc:'Unix 时间戳转换器。ISO 8601、相对时间、时间差计算。',url:'tools/code/timestamp-tool.html',cat:'code',icon:'⏱'},
{name:'CSS 渐变生成器',desc:'可视化渐变生成器。线性、径向、圆锥渐变。12 种预设。',url:'tools/design/css-gradient.html',cat:'design',icon:'▓'},
{name:'MD 预览',desc:'实时 Markdown 编辑器。GFM 表格、代码块、任务列表。',url:'tools/writing/md-preview.html',cat:'writing',icon:'📝'},
{name:'Lorem 生成器',desc:'Lorem Ipsum 占位文本生成。单词、句子、段落。',url:'tools/writing/lorem-gen.html',cat:'writing',icon:'📝'},
{name:'CLAUDE.md 构建器',desc:'7 步向导生成适用于 Claude Code 的 CLAUDE.md。内置最佳实践。',url:'tools/ai/claudemd-builder.html',cat:'ai',icon:'📋',featured:true},
{name:'提交信息生成',desc:'粘贴 git diff，获取 Conventional Commit 格式提交信息。8 种类型、作用域、正文。',url:'tools/code/commit-msg.html',cat:'code',icon:'💬'},
{name:'Env 检查器',desc:'.env 文件验证器。检测密钥泄露、生成 .env.example、对比文件差异。',url:'tools/code/env-check.html',cat:'code',icon:'✅'},
{name:'许可证选择器',desc:'查找合适的开源许可证。4 个问题的测试、10 种许可证对比、全文查看。',url:'tools/code/license-pick.html',cat:'code',icon:'⚖'},
{name:'Chmod 计算器',desc:'Unix 文件权限计算器。支持八进制、符号表示及 chmod 命令。',url:'tools/code/chmod-calc.html',cat:'code',icon:'🔢'},
{name:'HTTP 状态码',desc:'HTTP 状态码参考。包含 38 个状态码，支持搜索和按类别筛选。',url:'tools/code/http-status.html',cat:'code',icon:'🌐'},
{name:'JWT 构建器',desc:'构建和解码 JWT 令牌。支持自定义声明和过期时间分析。',url:'tools/code/jwt-builder.html',cat:'code',icon:'🪪'},
{name:'宽高比计算器',desc:'计算宽高比，按比例调整尺寸。提供视频、社交媒体、打印预设。',url:'tools/design/aspect-ratio.html',cat:'design',icon:'📐'},
{name:'Favicon 生成器',desc:'从 Emoji 或文本创建 Favicon。支持多种尺寸，下载 PNG。',url:'tools/design/favicon-gen.html',cat:'design',icon:'🖼️'},
{name:'IP 信息',desc:'IP 地址查询。提供地理位置、ISP、时区、货币信息，支持自动检测。',url:'tools/data/ip-info.html',cat:'data',icon:'🌐'},
{name:'DNS 查询',desc:'查询 DNS 记录。通过 Google DNS 查询 A、AAAA、MX、TXT、NS、SOA 记录。',url:'tools/data/dns-lookup.html',cat:'data',icon:'🌐'},
{name:'SSL 检查器',desc:'SSL/TLS 证书检查器。提供安全评分、HSTS 及标头审计。',url:'tools/data/ssl-check.html',cat:'data',icon:'🔒'},
{name:'标头检查器',desc:'HTTP 响应标头分析器。9 项安全审计，支持原始数据导出。',url:'tools/data/headers-check.html',cat:'data',icon:'📋'},
{name:'URL 解析器',desc:'将 URL 解析为各组成部分。支持查询参数、编码/解码及可视化拆解。',url:'tools/code/url-parser.html',cat:'code',icon:'🔗'},
{name:'UUID 生成器',desc:'生成 UUID v4、v7、ULID、nanoid。支持批量生成、验证和解析。',url:'tools/code/uuid-gen.html',cat:'code',icon:'🆔'},
{name:'Emoji 选择器',desc:'搜索 300 多种 Emoji。点击复制，支持分类和最近使用。',url:'tools/design/emoji-picker.html',cat:'design',icon:'😀'},
{name:'二维码生成器',desc:'为 URL、WiFi、电子邮件、电话生成二维码。支持自定义颜色，导出 PNG。',url:'tools/design/qr-code.html',cat:'design',icon:'📱'},
{name:'密码生成器',desc:'安全的随机密码生成器。提供熵值计和批量生成功能。',url:'tools/code/password-gen.html',cat:'code',icon:'🔒'},
{name:'Meta 标签生成器',desc:'生成 SEO、OGP、Twitter Card 的 Meta 标签。支持 Google 和社交媒体预览。',url:'tools/code/meta-tags.html',cat:'code',icon:'🏷️'},
{name:'SVG 预览',desc:'实时 SVG 编辑器。优化、转换为 data URI 或 CSS 背景，下载 PNG。',url:'tools/design/svg-preview.html',cat:'design',icon:'🖼️'},
{name:'CSS 盒模型',desc:'交互式 CSS 盒模型可视化。调整 margin、border、padding、content，复制 CSS。',url:'tools/design/box-model.html',cat:'design',icon:'📦'},
{name:'CSS Flex 演练场',desc:'交互式 flexbox 演练场。调整容器和项目属性，实时查看布局，复制 CSS。',url:'tools/design/css-flex.html',cat:'design',icon:'⇔'},
{name:'CSS Grid 生成器',desc:'可视化网格布局生成器。定义列、行、间距，放置元素，复制 CSS。',url:'tools/design/css-grid.html',cat:'design',icon:'⊞'},
{name:'HTML 转义',desc:'编码/解码 HTML 实体。56 个命名实体参考，点击复制。',url:'tools/code/html-escape.html',cat:'code',icon:'&️⃣'},
{name:'Markdown 表格生成器',desc:'可视化 Markdown 表格生成器。编辑单元格，设置对齐方式，复制 Markdown。',url:'tools/writing/markdown-table.html',cat:'writing',icon:'📊'},
{name:'CSS 动画生成器',desc:'关键帧动画生成器。12 种预设（bounce、pulse、shake、spin），支持自定义时间和缓���。',url:'tools/design/css-animation.html',cat:'design',icon:'▸▸'},
{name:'圆角生成器',desc:'可视化 border-radius 生成器。四角滑块、10 种预设、联动/独立模式。',url:'tools/design/border-radius.html',cat:'design',icon:'◜◝'},
{name:'CSS 滤镜生成器',desc:'可视化 CSS 滤镜生成器。Blur、brightness、contrast、saturate、hue-rotate，10 种预设。',url:'tools/design/css-filter.html',cat:'design',icon:'◑'},
{name:'文本转换器',desc:'大小写转换：UPPER、lower、Title、camelCase、snake_case、kebab-case。支持排序、去重、修剪。',url:'tools/code/text-transform.html',cat:'code',icon:'Aa→'},
{name:'间距计算器',desc:'设计系统间距比例生成器。Tailwind、Material、Bootstrap 预设，支持 CSS/SCSS/Tailwind 导出。',url:'tools/design/spacing-calc.html',cat:'design',icon:'⊟'},
{name:'CSS 单位转换器',desc:'在 CSS 单位间转换：px、rem、em、vw、vh、%、pt、cm。自动检测视口。',url:'tools/design/css-units.html',cat:'design',icon:'px↔'},
{name:'颜色转换器',desc:'转换颜色：HEX、RGB、HSL、HSB、CMYK。颜色选择器，WCAG 对比度检查。',url:'tools/design/color-convert.html',cat:'design',icon:'#→'},
{name:'图片调整器',desc:'在浏览器中调整图片尺寸。锁定宽高比，PNG/JPEG/WebP 导出，质量控制。',url:'tools/design/image-resize.html',cat:'design',icon:'📐'},
{name:'CSV ↔ JSON 转换器',desc:'CSV 与 JSON 互转。自动检测表头，自定义分隔符，表格预览。',url:'tools/code/csv-json.html',cat:'code',icon:'⇄'},
{name:'SQL 格式化',desc:'格式化和美化 SQL 查询。关键字大写、缩进、压缩，6 种预设。',url:'tools/code/sql-format.html',cat:'code',icon:'🗄️'},
{name:'YAML ↔ JSON 转换器',desc:'YAML 与 JSON 互转。提供 Docker Compose 示例，实时验证。',url:'tools/code/yaml-json.html',cat:'code',icon:'🔄'},
{name:'TOML ↔ JSON 转换器',desc:'TOML 与 JSON 互转。提供 Cargo.toml、pyproject.toml 预设。',url:'tools/code/toml-json.html',cat:'code',icon:'🔄'},
{name:'CSS Clip-Path 生成器',desc:'可视化 clip-path 生成器。拖动点，支持预设和 circle/ellipse/inset/polygon。',url:'tools/design/css-clip-path.html',cat:'design',icon:'✂'},
{name:'占位图生成器',desc:'生成占位图片。自定义尺寸、颜色、文本，下载 PNG/JPEG/WebP。',url:'tools/design/placeholder-img.html',cat:'design',icon:'▧'},
{name:'JSON → TypeScript 转换器',desc:'从 JSON 生成 TypeScript 接口。智能类型推断，支持嵌套对象。',url:'tools/code/json-to-ts.html',cat:'code',icon:'🔷'},
{name:'色盲模拟器',desc:'在任意图片上模拟 8 种色盲类型。用于无障碍测试。',url:'tools/design/color-blind-sim.html',cat:'design',icon:'👁',featured:true},
{name:'OG 预览',desc:'预览 URL 在 Twitter、Facebook、LinkedIn、Slack、Discord 上的展示效果。',url:'tools/data/og-preview.html',cat:'data',icon:'🔍'},
{name:'CSS 文本阴影生成器',desc:'可视化 text-shadow 生成器。多层阴影、12 种预设，实时预览。',url:'tools/design/css-text-shadow.html',cat:'design',icon:'🌓'},
{name:'正则替换',desc:'使用正则表达式查找和替换。实时预览，高亮匹配，支持反向引用。',url:'tools/code/regex-replace.html',cat:'code',icon:'✂️'},
{name:'CSS 玻璃态生成器',desc:'玻璃拟态生成器。Blur、opacity、borders，实时预览，8 种预设。',url:'tools/design/css-glass.html',cat:'design',icon:'◻'},
{name:'JSON 路径查询',desc:'使用 JSONPath 查询 JSON。支持过滤器、递归下降、数组切片。',url:'tools/code/json-path.html',cat:'code',icon:'📍'},
{name:'CSS 新拟态生成器',desc:'软 UI 生成器。平面、凹面、凸面、按压效果，自动阴影颜色。',url:'tools/design/css-neumorphism.html',cat:'design',icon:'⬜'},
{name:'字符计数器',desc:'字符计数器，包含 Twitter、Instagram、LinkedIn、SMS 限制。',url:'tools/writing/char-count.html',cat:'writing',icon:'🔢'},
{name:'编码解码器',desc:'URL、Base64、HTML、Unicode、Hex、Binary、ROT13、Punycode，集于一身。',url:'tools/code/encode-decode.html',cat:'code',icon:'⇌'},
{name:'HSL 选择器',desc:'HSL 颜色选择器，支持色彩和谐、亮度/饱和度调节、历史记录。',url:'tools/design/hsl-picker.html',cat:'design',icon:'◐'},
{name:'进制转换器',desc:'二进制、十六进制、八进制、十进制互转。位可视化，二进制补码。',url:'tools/code/number-base.html',cat:'code',icon:'🔢'},
{name:'Data URI 转换器',desc:'将文件转换为 data URI。支持图片、SVG、CSS，复制为 background 或 img 标签。',url:'tools/code/data-uri.html',cat:'code',icon:'🖼️'},
{name:'命名转换器',desc:'camelCase、snake_case、PascalCase、kebab-case 等 10 多种命名规范。',url:'tools/code/case-convert.html',cat:'code',icon:'🔤'},
{name:'子网计算器',desc:'IP 子网计算器。网络地址、广播地址、主机范围、CIDR、可视化细分。',url:'tools/code/subnet-calc.html',cat:'code',icon:'🌐',featured:true},
{name:'JSON Schema',desc:'从示例生成 JSON Schema。类型推断、验证、支持多种草案版本。',url:'tools/code/json-schema.html',cat:'code',icon:'📋'},
{name:'键码查看器',desc:'按下任意键查看 keyCode、key、code、which。支持剪贴板复制、历史记录。',url:'tools/code/keycode.html',cat:'code',icon:'⌨'},
{name:'CSS 光标预览',desc:'预览全部 37 种 CSS 光标类型。点击复制、实时测试区域。',url:'tools/design/css-cursor.html',cat:'design',icon:'↗'},
{name:'CSS 变换生成器',desc:'可视化变换生成器。位移、旋转、缩放、倾斜、透视。包含 10 个预设。',url:'tools/design/css-transform.html',cat:'design',icon:'⟳'},
{name:'Git 速查表',desc:'57 个 Git 命令及示例。支持搜索、分类、危险等级标识。',url:'tools/code/git-cheatsheet.html',cat:'code',icon:'📘'},
{name:'正则速查表',desc:'67 个正则表达式模式及示例。支持搜索、分类、点击复制。',url:'tools/code/regex-cheatsheet.html',cat:'code',icon:'📘'},
{name:'CSS 过渡生成器',desc:'可视化过渡生成器。持续时间、延迟、cubic-bezier 编辑器。包含 10 个预设。',url:'tools/design/css-transition.html',cat:'design',icon:'→→'},
{name:'HTML 转 JSX 转换器',desc:'将 HTML 转换为有效的 JSX/React。自动处理 class→className、内联样式对象。',url:'tools/code/html-to-jsx.html',cat:'code',icon:'⚛️'},
{name:'CSS 变量生成器',desc:'自定义属性生成器。主题构建器、6 个入门主题、4 种导出格式。',url:'tools/design/css-variable.html',cat:'design',icon:'🏷️'},
{name:'Tailwind 转换器',desc:'CSS ↔ Tailwind 双向转换器。支持 200+ 工具类、间距比例。',url:'tools/code/tailwind-converter.html',cat:'code',icon:'🎨',featured:true},
{name:'CSS 媒体查询构建器',desc:'可视化媒体查询构建器。25 个设备/框架预设、断点可视化。',url:'tools/design/css-media.html',cat:'design',icon:'📱'},
{name:'CSS 优先级计算器',desc:'优先级计算器。比较选择器、测验模式、支持 :where()/:is()。',url:'tools/design/css-specificity.html',cat:'design',icon:'🎯'},
{name:'JS 压缩器',desc:'压缩与美化 JavaScript。移除注释/空白、布尔值缩短。',url:'tools/code/js-minifier.html',cat:'code',icon:'✂️'},
{name:'颜色混合器',desc:'带权重混合颜色。支持 RGB/HSL/CIELAB 模式、8 个预设、历史记录。',url:'tools/design/color-mixer.html',cat:'design',icon:'🎨'},
{name:'CSS 压缩器',desc:'压缩与美化 CSS。颜色缩短、重复合并、统计信息。',url:'tools/code/css-minifier.html',cat:'code',icon:'✂️'},
{name:'JSON 查看器',desc:'交互式树形查看器。搜索、路径复制、表格模式、虚拟滚动。',url:'tools/code/json-viewer.html',cat:'code',icon:'{▸}'},
{name:'API 测试器',desc:'浏览器端 REST 客户端。发送请求、查看响应、历史记录。5 个预设。',url:'tools/code/api-tester.html',cat:'code',icon:'🧪'},
{name:'CSS Reset',desc:'浏览、比较、自定义 8 种流行的 CSS Reset。支持自定义构建。',url:'tools/design/css-reset.html',cat:'design',icon:'↺'},
{name:'依赖变更日志',desc:'查看依赖项的变更内容。npm 注册表 + GitHub releases + 破坏性变更检测。',url:'tools/data/dep-changelog.html',cat:'data',icon:'📋'},
{name:'本地化格式预览',desc:'使用 Intl API 查看日期、数字和货币在 25+ 语言环境中的渲染效果。',url:'tools/code/locale-format.html',cat:'code',icon:'🌐'},
{name:'CSP 构建器',desc:'可视化构建内容安全策略（CSP）头。16 个指令、4 个预设。',url:'tools/security/csp-builder.html',cat:'security',icon:'🛡️'},
{name:'SRI 生成器',desc:'为 CDN 脚本生成 SRI 完整性哈希。支持 SHA-256/384/512。',url:'tools/security/sri-gen.html',cat:'security',icon:'🔒'},
{name:'Robots.txt 生成器',desc:'构建并验证 robots.txt 文件。AI 爬虫拦截、5 个模板。',url:'tools/security/robots-txt.html',cat:'security',icon:'🤖'},
{name:'CORS 测试',desc:'测试任意 URL 的 CORS 头。即时诊断跨域问题。',url:'tools/security/cors-test.html',cat:'security',icon:'⛓'},