toolbox/index.html at main · 100millionusd/toolbox · 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>QuickTools — Free Online Developer & Productivity Tools</title>
  <meta name="description" content="193 free online tools — no signup, no ads tracking. Developer tools, health trackers, cooking calculators, fitness, travel, menopause support & more. Runs in your browser.">
  <meta name="keywords" content="free online tools, developer tools, password generator, JSON formatter, word counter, UUID generator, base64 encoder, color converter">
    <link rel="canonical" href="https://www.quicktools.mom/">
  <meta property="og:title" content="QuickTools — Free Online Developer & Productivity Tools">
  <meta property="og:description" content="193 free online tools — no signup, no ads tracking. Developer tools, health trackers, cooking calculators, fitness, travel, menopause support & more.">
  <meta property="og:type" content="website">
  <meta property="og:url" content="https://www.quicktools.mom/">
  <meta name="twitter:card" content="summary">
<link rel="stylesheet" href="style.css">
  <style>
    .hero {
      text-align: center;
      padding: 3rem 0 2rem;
    }
    .hero h1 {
      font-size: 3rem;
      font-weight: 700;
      letter-spacing: -0.04em;
      line-height: 1.1;
      margin-bottom: 1rem;
      background: linear-gradient(135deg, #f0f0f5 0%, #6366f1 50%, #a78bfa 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
    }
    .hero p {
      color: var(--text-secondary);
      font-size: 1.15rem;
      max-width: 500px;
      margin: 0 auto;
    }
    .search-wrapper {
      max-width: 500px;
      margin: 2rem auto 0;
      position: relative;
    }
    .search-wrapper input {
      width: 100%;
      padding: 1rem 1rem 1rem 3rem;
      font-size: 1rem;
      background: var(--bg-card);
      border: 1px solid var(--border);
      border-radius: 100px;
      color: var(--text-primary);
      outline: none;
      transition: var(--transition);
    }
    .search-wrapper input:focus {
      border-color: var(--border-active);
      box-shadow: 0 0 0 4px var(--accent-glow);
    }
    .search-wrapper::before {
      content: '🔍';
      position: absolute;
      left: 1.1rem;
      top: 50%;
      transform: translateY(-50%);
      font-size: 1.1rem;
      pointer-events: none;
    }
    .tools-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
      gap: 1rem;
      margin-top: 2rem;
    }
    .tool-tile {
      display: flex;
      align-items: start;
      gap: 1rem;
      padding: 1.25rem;
      background: var(--bg-card);
      border: 1px solid var(--border);
      border-radius: var(--radius);
      text-decoration: none;
      color: var(--text-primary);
      transition: var(--transition);
    }
    .tool-tile:hover {
      background: var(--bg-card-hover);
      border-color: var(--border-active);
      transform: translateY(-3px);
      box-shadow: 0 8px 30px rgba(0,0,0,0.3);
    }
    .tool-tile .tile-icon {
      font-size: 1.8rem;
      flex-shrink: 0;
      width: 48px;
      height: 48px;
      display: flex;
      align-items: center;
      justify-content: center;
      background: var(--accent-glow);
      border-radius: var(--radius-sm);
    }
    .tool-tile .tile-info h2 {
      font-size: 1rem;
      font-weight: 600;
      margin-bottom: 0.3rem;
    }
    .tool-tile .tile-info p {
      font-size: 0.82rem;
      color: var(--text-secondary);
      line-height: 1.5;
    }
    .category-label {
      font-size: 0.8rem;
      font-weight: 500;
      color: var(--text-muted);
      text-transform: uppercase;
      letter-spacing: 0.08em;
      margin: 2.5rem 0 0.75rem;
      padding-bottom: 0.5rem;
      border-bottom: 1px solid var(--border);
    }
    .tool-count {
      display: inline-flex;
      align-items: center;
      gap: 0.4rem;
      background: var(--accent-glow);
      color: var(--accent-hover);
      font-size: 0.85rem;
      font-weight: 500;
      padding: 0.35rem 0.9rem;
      border-radius: 100px;
      margin-top: 1.5rem;
      border: 1px solid rgba(99,102,241,0.15);
    }
    @media (max-width: 640px) {
      .hero h1 { font-size: 2rem; }
      .tools-grid { grid-template-columns: 1fr; }
    }
  </style>
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-2658921743607446" crossorigin="anonymous"></script>
</head>
<body>
  <div class="page-wrapper">
    <header class="site-header">
      <a href="index.html" class="site-logo"><span class="icon">⚡</span> QuickTools</a>
      <nav class="site-nav">
        <a href="#developer">Developer</a>
        <a href="#text">Text</a>
        <a href="#design">Design</a>
        <a href="#image">Image</a>
        <a href="#security">Security</a>
      </nav>
    </header>

    <div class="hero">
      <h1>Free Online Tools.<br>No Signup. No BS.</h1>
      <p>Simple, fast, privacy-first tools for developers, writers, and creators. Everything runs locally in your browser.</p>
      <div class="tool-count">⚡ 193+ tools and growing</div>
      <div class="search-wrapper">
        <input type="text" id="searchInput" placeholder="Search tools..." oninput="filterTools()">
      </div>
    </div>

    <div class="ad-zone ad-zone-top">Ad Space — 728×90 Leaderboard</div>

    <div id="ai">
      <div class="category-label">🤖 AI Tools</div>
      <div class="tools-grid">
        <a href="ai-summarizer.html" class="tool-tile" data-keywords="ai text summarizer summarize article tldr extract key points">
          <div class="tile-icon">📝</div>
          <div class="tile-info">
            <h2>AI Text Summarizer</h2>
            <p>Summarize any text. TF-IDF extractive NLP. Adjustable length.</p>
          </div>
        </a>
        <a href="ai-sentiment.html" class="tool-tile" data-keywords="ai sentiment analyzer emotion tone positive negative text analysis nlp">
          <div class="tile-icon">😊</div>
          <div class="tile-info">
            <h2>AI Sentiment Analyzer</h2>
            <p>Detect emotional tone. Word-level breakdown. Positive/negative score.</p>
          </div>
        </a>
        <a href="ai-rewriter.html" class="tool-tile" data-keywords="ai text rewriter paraphrase rephrase synonym professional casual tone">
          <div class="tile-icon">✍️</div>
          <div class="tile-info">
            <h2>AI Text Rewriter</h2>
            <p>Paraphrase text in different tones. Synonym replacement engine.</p>
          </div>
        </a>
        <a href="ai-email.html" class="tool-tile" data-keywords="ai email writer generator template professional follow up cold outreach">
          <div class="tile-icon">📧</div>
          <div class="tile-info">
            <h2>AI Email Writer</h2>
            <p>Generate professional emails. 8 templates, 3 tones. Editable output.</p>
          </div>
        </a>
        <a href="ai-hashtag.html" class="tool-tile" data-keywords="ai hashtag generator instagram tiktok twitter linkedin social media">
          <div class="tile-icon">#️⃣</div>
          <div class="tile-info">
            <h2>AI Hashtag Generator</h2>
            <p>Smart hashtags for Instagram, TikTok, Twitter. Category matching.</p>
          </div>
        </a>
      </div>
    </div>

    <div id="developer">
      <div class="category-label">Developer Tools</div>
      <div class="tools-grid" id="devGrid">
        <a href="json-formatter.html" class="tool-tile" data-keywords="json format beautify minify validate developer api">
          <div class="tile-icon">{ }</div>
          <div class="tile-info">
            <h2>JSON Formatter</h2>
            <p>Beautify, minify, and validate JSON data with key sorting and stats.</p>
          </div>
        </a>
        <a href="uuid-generator.html" class="tool-tile" data-keywords="uuid guid unique identifier developer database">
          <div class="tile-icon">🆔</div>
          <div class="tile-info">
            <h2>UUID Generator</h2>
            <p>Generate UUID v4 identifiers. Bulk generate up to 1000 with format options.</p>
          </div>
        </a>
        <a href="base64.html" class="tool-tile" data-keywords="base64 encode decode binary text file image developer">
          <div class="tile-icon">🔄</div>
          <div class="tile-info">
            <h2>Base64 Encoder/Decoder</h2>
            <p>Encode text to Base64 or decode Base64 strings. File-to-Base64 support.</p>
          </div>
        </a>
        <a href="timestamp-converter.html" class="tool-tile" data-keywords="unix timestamp epoch date time converter developer">
          <div class="tile-icon">🕐</div>
          <div class="tile-info">
            <h2>Timestamp Converter</h2>
            <p>Convert between Unix timestamps and human-readable dates. Live clock.</p>
          </div>
        </a>
        <a href="diff-checker.html" class="tool-tile" data-keywords="diff compare text code changes side by side developer">
          <div class="tile-icon">📊</div>
          <div class="tile-info">
            <h2>Diff Checker</h2>
            <p>Compare two texts side by side. See additions, removals, and changes.</p>
          </div>
        </a>
        <a href="regex-tester.html" class="tool-tile" data-keywords="regex regular expression pattern match test highlight developer">
          <div class="tile-icon">⚙️</div>
          <div class="tile-info">
            <h2>Regex Tester</h2>
            <p>Test regular expressions with live highlighting and match groups.</p>
          </div>
        </a>
        <a href="regex-cheatsheet.html" class="tool-tile" data-keywords="regex cheat sheet reference guide patterns regular expressions">
          <div class="tile-icon">📝</div>
          <div class="tile-info">
            <h2>Regex Cheat Sheet</h2>
            <p>Complete regex reference with live testing. Click any pattern to test.</p>
          </div>
        </a>
        <a href="url-encoder.html" class="tool-tile" data-keywords="url encode decode percent encoding query string developer">
          <div class="tile-icon">🔗</div>
          <div class="tile-info">
            <h2>URL Encoder/Decoder</h2>
            <p>Encode special characters for URLs. Parse and decode query strings.</p>
          </div>
        </a>
        <a href="csv-json.html" class="tool-tile" data-keywords="csv json convert data table spreadsheet developer">
          <div class="tile-icon">📊</div>
          <div class="tile-info">
            <h2>CSV to JSON</h2>
            <p>Convert CSV data to JSON and back. Auto-detect headers and delimiters.</p>
          </div>
        </a>
        <a href="html-entities.html" class="tool-tile" data-keywords="html entity encode decode xss special character developer">
          <div class="tile-icon">🌐</div>
          <div class="tile-info">
            <h2>HTML Entity Encoder</h2>
            <p>Encode special characters to HTML entities. Prevent XSS vulnerabilities.</p>
          </div>
        </a>
        <a href="cron-parser.html" class="tool-tile" data-keywords="cron expression parse schedule task automation developer">
          <div class="tile-icon">⏰</div>
          <div class="tile-info">
            <h2>Cron Parser</h2>
            <p>Parse cron expressions into human-readable schedules with next run times.</p>
          </div>
        </a>
        <a href="jwt-decoder.html" class="tool-tile" data-keywords="jwt json web token decode verify inspect claims auth">
          <div class="tile-icon">🔑</div>
          <div class="tile-info">
            <h2>JWT Decoder</h2>
            <p>Decode and inspect JSON Web Tokens. View header, payload, and expiration.</p>
          </div>
        </a>
        <a href="sql-formatter.html" class="tool-tile" data-keywords="sql format beautify query database mysql postgres">
          <div class="tile-icon">🗃️</div>
          <div class="tile-info">
            <h2>SQL Formatter</h2>
            <p>Beautify and format SQL queries for better readability. Supports all dialects.</p>
          </div>
        </a>
        <a href="chmod-calculator.html" class="tool-tile" data-keywords="chmod permissions unix linux file rwx 755 644">
          <div class="tile-icon">🐧</div>
          <div class="tile-info">
            <h2>Chmod Calculator</h2>
            <p>Calculate Unix file permissions. Convert between numeric and symbolic formats.</p>
          </div>
        </a>
        <a href="json-path.html" class="tool-tile" data-keywords="json path finder tree navigate query jsonpath node">
          <div class="tile-icon">🌳</div>
          <div class="tile-info">
            <h2>JSON Path Finder</h2>
            <p>Visualize JSON as a tree and click any value to get its path.</p>
          </div>
        </a>
        <a href="json-viewer.html" class="tool-tile" data-keywords="json tree viewer explorer collapsible nodes search keys">
          <div class="tile-icon">🌳</div>
          <div class="tile-info">
            <h2>JSON Tree Viewer</h2>
            <p>Explore JSON as an interactive collapsible tree. Search keys.</p>
          </div>
        </a>
        <a href="csv-to-json.html" class="tool-tile" data-keywords="csv to json converter comma separated data transform">
          <div class="tile-icon">📊</div>
          <div class="tile-info">
            <h2>CSV to JSON</h2>
            <p>Convert CSV data to JSON. Custom delimiters and header detection.</p>
          </div>
        </a>
        <a href="cron-builder.html" class="tool-tile" data-keywords="cron expression generator builder schedule task unix">
          <div class="tile-icon">⏰</div>
          <div class="tile-info">
            <h2>Cron Builder</h2>
            <p>Build cron expressions visually. Presets and human-readable output.</p>
          </div>
        </a>
        <a href="text-diff.html" class="tool-tile" data-keywords="text diff compare side by side difference checker">
          <div class="tile-icon">📄</div>
          <div class="tile-info">
            <h2>Text Diff Checker</h2>
            <p>Compare two texts side by side. Additions and deletions highlighted.</p>
          </div>
        </a>
        <a href="html-table-generator.html" class="tool-tile" data-keywords="html table generator create rows columns visual code">
          <div class="tile-icon">🗏️</div>
          <div class="tile-info">
            <h2>HTML Table Generator</h2>
            <p>Create HTML tables visually. Enter data and copy the code.</p>
          </div>
        </a>
        <a href="meta-analyzer.html" class="tool-tile" data-keywords="meta tag analyzer seo check title description og tags audit">
          <div class="tile-icon">🔍</div>
          <div class="tile-info">
            <h2>Meta Tag Analyzer</h2>
            <p>Analyze SEO meta tags. Check title, description, OG tags. SEO score.</p>
          </div>
        </a>
        <a href="css-minifier.html" class="tool-tile" data-keywords="css minify beautify compress format minifier developer">
          <div class="tile-icon">🎨</div>
          <div class="tile-info">
            <h2>CSS Minifier</h2>
            <p>Minify or beautify CSS. Remove comments, compress whitespace, reduce file size.</p>
          </div>
        </a>
        <a href="line-counter.html" class="tool-tile" data-keywords="line counter code lines blank comments sloc developer">
          <div class="tile-icon">📊</div>
          <div class="tile-info">
            <h2>Line Counter</h2>
            <p>Count code lines, comments, and blank lines. Auto-detects language.</p>
          </div>
        </a>
        <a href="js-minifier.html" class="tool-tile" data-keywords="javascript minifier compress uglify reduce optimize code">
          <div class="tile-icon">⚡</div>
          <div class="tile-info">
            <h2>JS Minifier</h2>
            <p>Minify JavaScript. Remove comments, whitespace, reduce file size.</p>
          </div>
        </a>
        <a href="json-schema.html" class="tool-tile" data-keywords="json schema validator validate structure types required fields">
          <div class="tile-icon">📋</div>
          <div class="tile-info">
            <h2>JSON Schema Validator</h2>
            <p>Validate JSON data against a JSON Schema. Check types and required fields.</p>
          </div>
        </a>
        <a href="sql-to-mongo.html" class="tool-tile" data-keywords="sql mongodb convert query nosql find insert update delete">
          <div class="tile-icon">💾</div>
          <div class="tile-info">
            <h2>SQL to MongoDB</h2>
            <p>Convert SQL queries to MongoDB commands. SELECT → find, INSERT → insertOne.</p>
          </div>
        </a>
        <a href="html-table.html" class="tool-tile" data-keywords="html table generator editor rows columns visual code">
          <div class="tile-icon">📋</div>
          <div class="tile-info">
            <h2>HTML Table Generator</h2>
            <p>Create HTML tables visually. Edit cells, style, and generate code.</p>
          </div>
        </a>
        <a href="data-size-calculator.html" class="tool-tile" data-keywords="data size calculator storage bandwidth download time records">
          <div class="tile-icon">💾</div>
          <div class="tile-info">
            <h2>Data Size Calculator</h2>
            <p>Estimate storage, bandwidth, and download times for data sets.</p>
          </div>
        </a>
      </div>
    </div>

    <div id="text">
      <div class="category-label">Text Tools</div>
      <div class="tools-grid" id="textGrid">
        <a href="word-counter.html" class="tool-tile" data-keywords="word count character sentence paragraph reading time text writer">
          <div class="tile-icon">📝</div>
          <div class="tile-info">
            <h2>Word Counter</h2>
            <p>Count words, characters, sentences. Estimate reading and speaking time.</p>
          </div>
        </a>
        <a href="readability-checker.html" class="tool-tile" data-keywords="readability score flesch kincaid grade level writing">
          <div class="tile-icon">📖</div>
          <div class="tile-info">
            <h2>Readability Checker</h2>
            <p>Check Flesch Reading Ease, grade level, and writing statistics.</p>
          </div>
        </a>
        <a href="case-converter.html" class="tool-tile" data-keywords="case convert uppercase lowercase title camel snake kebab text">
          <div class="tile-icon">Aa</div>
          <div class="tile-info">
            <h2>Case Converter</h2>
            <p>Convert text between 11 formats: UPPER, lower, Title, camelCase, snake_case, and more.</p>
          </div>
        </a>
        <a href="lorem-ipsum.html" class="tool-tile" data-keywords="lorem ipsum placeholder text dummy content design mockup">
          <div class="tile-icon">📄</div>
          <div class="tile-info">
            <h2>Lorem Ipsum Generator</h2>
            <p>Generate placeholder text by paragraphs, sentences, or words.</p>
          </div>
        </a>
        <a href="markdown-preview.html" class="tool-tile" data-keywords="markdown preview render editor github live text writer">
          <div class="tile-icon">📑</div>
          <div class="tile-info">
            <h2>Markdown Preview</h2>
            <p>Write Markdown with live preview. GitHub-style rendering and HTML export.</p>
          </div>
        </a>
        <a href="text-cleaner.html" class="tool-tile" data-keywords="text cleaner remove whitespace duplicates empty lines clean format">
          <div class="tile-icon">🧹</div>
          <div class="tile-info">
            <h2>Text Cleaner</h2>
            <p>Remove extra spaces, empty lines, duplicates. Sort and number lines.</p>
          </div>
        </a>
        <a href="text-repeater.html" class="tool-tile" data-keywords="text repeater repeat string multiply clone duplicate">
          <div class="tile-icon">🔁</div>
          <div class="tile-info">
            <h2>Text Repeater</h2>
            <p>Repeat any text multiple times with custom separators and numbering.</p>
          </div>
        </a>
        <a href="text-to-speech.html" class="tool-tile" data-keywords="text to speech tts read aloud voice language audio">
          <div class="tile-icon">🔊</div>
          <div class="tile-info">
            <h2>Text to Speech</h2>
            <p>Listen to text read aloud. Choose voice, speed, and pitch.</p>
          </div>
        </a>
        <a href="character-map.html" class="tool-tile" data-keywords="unicode character map symbols arrows math currency special">
          <div class="tile-icon">🔤</div>
          <div class="tile-info">
            <h2>Character Map</h2>
            <p>Browse & copy Unicode symbols: arrows, math, currency, shapes, and more.</p>
          </div>
        </a>
        <a href="markdown-table.html" class="tool-tile" data-keywords="markdown table generator editor csv import columns rows">
          <div class="tile-icon">📝</div>
          <div class="tile-info">
            <h2>Markdown Table</h2>
            <p>Generate Markdown tables visually. Edit cells, set alignment, import CSV.</p>
          </div>
        </a>
        <a href="text-compare.html" class="tool-tile" data-keywords="text compare diff word level inline changes additions deletions">
          <div class="tile-icon">🔍</div>
          <div class="tile-info">
            <h2>Text Compare</h2>
            <p>Compare two texts word-by-word. See additions and deletions highlighted.</p>
          </div>
        </a>
        <a href="text-summarizer.html" class="tool-tile" data-keywords="text summarizer extract key sentences shorten condense">
          <div class="tile-icon">📄</div>
          <div class="tile-info">
            <h2>Text Summarizer</h2>
            <p>Extract the most important sentences from any text. Runs locally.</p>
          </div>
        </a>
        <a href="html-to-text.html" class="tool-tile" data-keywords="html to text extract clean strip tags scripts readable">
          <div class="tile-icon">🧹</div>
          <div class="tile-info">
            <h2>HTML to Clean Text</h2>
            <p>Strip HTML tags, scripts, and styles. Extract clean readable text.</p>
          </div>
        </a>
        <a href="spell-checker.html" class="tool-tile" data-keywords="spell checker grammar spelling mistakes errors suggestions">
          <div class="tile-icon">✅</div>
          <div class="tile-info">
            <h2>Spell &amp; Grammar Checker</h2>
            <p>Check text for spelling and grammar mistakes. Get suggestions.</p>
          </div>
        </a>
        <a href="reading-time.html" class="tool-tile" data-keywords="reading time calculator speaking time blog article estimate">
          <div class="tile-icon">📖</div>
          <div class="tile-info">
            <h2>Reading Time</h2>
            <p>Calculate how long it takes to read or speak any text.</p>
          </div>
        </a>
        <a href="emoji-picker.html" class="tool-tile" data-keywords="emoji picker browse search copy paste smiley unicode">
          <div class="tile-icon">😀</div>
          <div class="tile-info">
            <h2>Emoji Picker</h2>
            <p>Browse 300+ emojis by category. Click to copy. Build collections.</p>
          </div>
        </a>
      </div>
    </div>

    <div class="ad-zone">Ad Space — 336×280 Rectangle</div>

    <div id="design">
      <div class="category-label">Design Tools</div>
      <div class="tools-grid" id="designGrid">
        <a href="color-converter.html" class="tool-tile" data-keywords="color hex rgb hsl convert picker palette design css">
          <div class="tile-icon">🎨</div>
          <div class="tile-info">
            <h2>Color Converter</h2>
            <p>Convert between HEX, RGB, HSL. Color picker, CSS values, and harmonies.</p>
          </div>
        </a>
        <a href="color-picker.html" class="tool-tile" data-keywords="color picker html css hex rgb hsl visual selector">
          <div class="tile-icon">🖌️</div>
          <div class="tile-info">
            <h2>Color Picker</h2>
            <p>Pick colors visually. Get HEX, RGB, HSL. 140 named CSS colors.</p>
          </div>
        </a>
        <a href="favicon-generator.html" class="tool-tile" data-keywords="favicon icon generator emoji text website browser tab design">
          <div class="tile-icon">🖼️</div>
          <div class="tile-info">
            <h2>Favicon Generator</h2>
            <p>Create favicons from emoji or text. Custom colors, multiple sizes, PNG download.</p>
          </div>
        </a>
        <a href="qr-generator.html" class="tool-tile" data-keywords="qr code generator url wifi text barcode scan">
          <div class="tile-icon">📱</div>
          <div class="tile-info">
            <h2>QR Code Generator</h2>
            <p>Generate QR codes for URLs, text, WiFi, email. Custom colors and sizes.</p>
          </div>
        </a>
        <a href="gradient-generator.html" class="tool-tile" data-keywords="css gradient linear radial conic color design background">
          <div class="tile-icon">🌈</div>
          <div class="tile-info">
            <h2>Gradient Generator</h2>
            <p>Create CSS gradients visually. Linear, radial, conic. 12 preset palettes.</p>
          </div>
        </a>
        <a href="css-shadow.html" class="tool-tile" data-keywords="css box shadow generator inset design elevation">
          <div class="tile-icon">🌑</div>
          <div class="tile-info">
            <h2>Box Shadow Generator</h2>
            <p>Design CSS box shadows visually. Multiple layers, inset, and presets.</p>
          </div>
        </a>
        <a href="aspect-ratio.html" class="tool-tile" data-keywords="aspect ratio calculator resize dimensions 16:9 4:3 photo video">
          <div class="tile-icon">📐</div>
          <div class="tile-info">
            <h2>Aspect Ratio Calculator</h2>
            <p>Calculate and resize dimensions while maintaining aspect ratios.</p>
          </div>
        </a>
        <a href="border-radius.html" class="tool-tile" data-keywords="css border radius rounded corners shape visual generator">
          <div class="tile-icon">⬜</div>
          <div class="tile-info">
            <h2>Border Radius Generator</h2>
            <p>Design CSS border-radius visually. Individual corners, presets, live preview.</p>
          </div>
        </a>
        <a href="color-palette.html" class="tool-tile" data-keywords="color palette generator harmony theme scheme extract complement">
          <div class="tile-icon">🎨</div>
          <div class="tile-info">
            <h2>Color Palette Generator</h2>
            <p>Generate harmonious color palettes. Extract colors from images. Press Space!</p>
          </div>
        </a>
        <a href="placeholder-image.html" class="tool-tile" data-keywords="placeholder image generator mockup wireframe dummy custom">
          <div class="tile-icon">🖼️</div>
          <div class="tile-info">
            <h2>Placeholder Image</h2>
            <p>Generate custom placeholder images for mockups and wireframes. Any size.</p>
          </div>
        </a>
        <a href="flexbox-generator.html" class="tool-tile" data-keywords="css flexbox generator layout direction justify align wrap">
          <div class="tile-icon">📐</div>
          <div class="tile-info">
            <h2>Flexbox Generator</h2>
            <p>Build CSS Flexbox layouts visually with live preview and code output.</p>
          </div>
        </a>
        <a href="grid-generator.html" class="tool-tile" data-keywords="css grid generator layout columns rows template visual">
          <div class="tile-icon">📰</div>
          <div class="tile-info">
            <h2>CSS Grid Generator</h2>
            <p>Build CSS Grid layouts visually. Define columns, rows, and gaps.</p>
          </div>
        </a>
        <a href="contrast-checker.html" class="tool-tile" data-keywords="color contrast wcag accessibility checker aa aaa ratio">
          <div class="tile-icon">♿</div>
          <div class="tile-info">
            <h2>Contrast Checker</h2>
            <p>Check WCAG color contrast ratios. AA and AAA level compliance.</p>
          </div>
        </a>
        <a href="color-blindness.html" class="tool-tile" data-keywords="color blindness simulator accessibility protanopia deuteranopia vision">
          <div class="tile-icon">👁️</div>
          <div class="tile-info">
            <h2>Color Blindness Sim</h2>
            <p>Simulate 7 types of color blindness. Test accessibility of your color palette.</p>
          </div>
        </a>
        <a href="css-animation.html" class="tool-tile" data-keywords="css animation generator keyframes bounce pulse spin fade preset">
          <div class="tile-icon">✨</div>
          <div class="tile-info">
            <h2>CSS Animation</h2>
            <p>Create CSS animations with presets. Bounce, pulse, spin, fade, and more.</p>
          </div>
        </a>
        <a href="pixel-ruler.html" class="tool-tile" data-keywords="pixel ruler measure screen distance guide grid design">
          <div class="tile-icon">📏</div>
          <div class="tile-info">
            <h2>Pixel Ruler</h2>
            <p>Measure pixel distances on screen. Drag to draw measurement lines.</p>
          </div>
        </a>
        <a href="gradient-text.html" class="tool-tile" data-keywords="gradient text css colorful effect heading title">
          <div class="tile-icon">🌈</div>
          <div class="tile-info">
            <h2>Gradient Text</h2>
            <p>Create stunning gradient text effects with CSS. Live preview and code.</p>
          </div>
        </a>
        <a href="font-preview.html" class="tool-tile" data-keywords="font preview compare google fonts typography css family">
          <div class="tile-icon">🔤</div>
          <div class="tile-info">
            <h2>Font Preview</h2>
            <p>Preview and compare 27 fonts. Test size, weight, and line height.</p>
          </div>
        </a>
        <a href="image-colors.html" class="tool-tile" data-keywords="image color extractor palette dominant colors hex rgb photo">
          <div class="tile-icon">🖼️</div>
          <div class="tile-info">
            <h2>Image Color Extractor</h2>
            <p>Extract a color palette from any image. Get HEX and RGB values.</p>
          </div>
        </a>
        <a href="color-name.html" class="tool-tile" data-keywords="color name finder identify css named hex rgb closest">
          <div class="tile-icon">🎨</div>
          <div class="tile-info">
            <h2>Color Name Finder</h2>
            <p>Find the name of any color. Matches to 148 CSS named colors.</p>
          </div>
        </a>
        <a href="photo-sizes.html" class="tool-tile" data-keywords="photo size social media instagram youtube facebook dimensions">
          <div class="tile-icon">📰</div>
          <div class="tile-info">
            <h2>Photo Size Guide</h2>
            <p>Social media, screen, and print dimensions. Click to copy.</p>
          </div>
        </a>
        <a href="responsive-tester.html" class="tool-tile" data-keywords="responsive design tester preview device mobile tablet screen size">
          <div class="tile-icon">📱</div>
          <div class="tile-info">
            <h2>Responsive Tester</h2>
            <p>Preview any website on iPhone, iPad, laptop, and desktop sizes.</p>
          </div>
        </a>
        <a href="css-gradient.html" class="tool-tile" data-keywords="css gradient generator linear radial conic background colors">
          <div class="tile-icon">🌈</div>
          <div class="tile-info">
            <h2>CSS Gradient</h2>
            <p>Create beautiful linear, radial, and conic gradients visually.</p>
          </div>
        </a>
        <a href="color-wheel.html" class="tool-tile" data-keywords="color wheel complementary triadic analogous harmony picker">
          <div class="tile-icon">🎡</div>
          <div class="tile-info">
            <h2>Color Wheel</h2>
            <p>Interactive color wheel with complementary, triadic, and analogous harmonies.</p>
          </div>
        </a>
        <a href="pixel-art.html" class="tool-tile" data-keywords="pixel art editor draw 8bit canvas grid paint export">
          <div class="tile-icon">🎮</div>
          <div class="tile-info">
            <h2>Pixel Art Editor</h2>
            <p>Create pixel art. Draw, erase, fill. Export as PNG.</p>
          </div>
        </a>
      </div>
    </div>

    <div id="image">
      <div class="category-label">Image Tools</div>
      <div class="tools-grid">
        <a href="image-compressor.html" class="tool-tile" data-keywords="image compress resize jpeg png webp photo optimize">
          <div class="tile-icon">📷</div>
          <div class="tile-info">
            <h2>Image Compressor</h2>
            <p>Compress JPG, PNG, WebP images in your browser. Batch processing, no upload.</p>
          </div>
        </a>
        <a href="social-media-resizer.html" class="tool-tile" data-keywords="social media image resizer instagram facebook twitter youtube linkedin tiktok pinterest">
          <div class="tile-icon">📱</div>
          <div class="tile-info">
            <h2>Social Media Resizer</h2>
            <p>Resize images for all social platforms. Instagram, Facebook, YouTube, X, LinkedIn.</p>
          </div>
        </a>
        <a href="image-to-base64.html" class="tool-tile" data-keywords="image base64 converter data uri encode embed html css">
          <div class="tile-icon">📸</div>
          <div class="tile-info">
            <h2>Image to Base64</h2>
            <p>Convert images to Base64 data URIs for embedding in HTML and CSS.</p>
          </div>
        </a>
        <a href="screen-resolution.html" class="tool-tile" data-keywords="screen resolution viewport display pixel ratio monitor device">
          <div class="tile-icon">🖥️</div>
          <div class="tile-info">
            <h2>Screen Resolution</h2>
            <p>Check screen resolution, viewport size, pixel ratio, and breakpoints.</p>
          </div>
        </a>
        <a href="image-resizer.html" class="tool-tile" data-keywords="image resize scale crop dimensions width height photo">
          <div class="tile-icon">🖼️</div>
          <div class="tile-info">
            <h2>Image Resizer</h2>
            <p>Resize images to any dimensions. Aspect ratio lock, presets, format choice.</p>
          </div>
        </a>
        <a href="barcode-generator.html" class="tool-tile" data-keywords="barcode generator code128 ean upc product sku label">
          <div class="tile-icon">📊</div>
          <div class="tile-info">
            <h2>Barcode Generator</h2>
            <p>Generate Code128 barcodes. Customize width, height, download as PNG.</p>
          </div>
        </a>
        <a href="svg-to-png.html" class="tool-tile" data-keywords="svg png convert rasterize vector image download scale">
          <div class="tile-icon">🔄</div>
          <div class="tile-info">
            <h2>SVG to PNG</h2>
            <p>Convert SVG to PNG at any resolution. Custom dimensions and background.</p>
          </div>
        </a>
        <a href="exif-viewer.html" class="tool-tile" data-keywords="exif viewer photo metadata camera model lens gps date">
          <div class="tile-icon">📸</div>
          <div class="tile-info">
            <h2>EXIF Viewer</h2>
            <p>View photo metadata: camera, lens, settings, GPS, and timestamps.</p>
          </div>
        </a>
      </div>
    </div>

    <div id="seo">
      <div class="category-label">SEO Tools</div>
      <div class="tools-grid">
        <a href="meta-tags.html" class="tool-tile" data-keywords="meta tag seo open graph twitter card social preview search">
          <div class="tile-icon">🏷️</div>
          <div class="tile-info">
            <h2>Meta Tag Generator</h2>
            <p>Generate SEO, Open Graph, and Twitter Card meta tags with live preview.</p>
          </div>
        </a>
        <a href="robots-txt.html" class="tool-tile" data-keywords="robots txt generator seo crawl search engine block ai">
          <div class="tile-icon">🤖</div>
          <div class="tile-info">
            <h2>Robots.txt Generator</h2>
            <p>Generate robots.txt files. Block AI bots, set crawl rules, add sitemap.</p>
          </div>
        </a>
        <a href="slug-generator.html" class="tool-tile" data-keywords="slug url permalink seo friendly text generator">
          <div class="tile-icon">🔗</div>
          <div class="tile-info">
            <h2>Slug Generator</h2>
            <p>Create SEO-friendly URL slugs from any text. Bulk generation and transliteration.</p>
          </div>
        </a>
        <a href="og-preview.html" class="tool-tile" data-keywords="open graph preview social media facebook twitter linkedin card">
          <div class="tile-icon">👀</div>
          <div class="tile-info">
            <h2>OG Preview</h2>
            <p>Preview how your URL looks on Facebook, Twitter, and Slack before sharing.</p>
          </div>
        </a>
        <a href="htaccess-generator.html" class="tool-tile" data-keywords="htaccess generator apache redirect https security caching">
          <div class="tile-icon">⚙️</div>
          <div class="tile-info">
            <h2>.htaccess Generator</h2>
            <p>Generate Apache .htaccess for redirects, security, GZIP, and caching.</p>
          </div>
        </a>
        <a href="og-debugger.html" class="tool-tile" data-keywords="open graph debugger social card facebook twitter preview meta">
          <div class="tile-icon">🔍</div>
          <div class="tile-info">
            <h2>OG Debugger</h2>
            <p>Debug Open Graph tags. Preview Facebook and Twitter social cards.</p>
          </div>
        </a>
      </div>
    </div>

    <div id="encoding">
      <div class="category-label">Encoding Tools</div>
      <div class="tools-grid">
        <a href="text-to-binary.html" class="tool-tile" data-keywords="text binary hex octal decimal ascii convert encode">
          <div class="tile-icon">🔢</div>
          <div class="tile-info">
            <h2>Text to Binary</h2>
            <p>Convert text to binary, hex, octal, and decimal. Reverse conversion supported.</p>
          </div>
        </a>
        <a href="number-base.html" class="tool-tile" data-keywords="number base binary octal decimal hex convert radix">
          <div class="tile-icon">🔢</div>
          <div class="tile-info">
            <h2>Number Base Converter</h2>
            <p>Convert between binary, octal, decimal, and hexadecimal number systems.</p>
          </div>
        </a>
        <a href="morse-code.html" class="tool-tile" data-keywords="morse code translator text audio dots dashes beep">
          <div class="tile-icon">📡</div>
          <div class="tile-info">
            <h2>Morse Code</h2>
            <p>Translate text to Morse code and back. Play audio beeps.</p>
          </div>
        </a>
        <a href="encoding-converter.html" class="tool-tile" data-keywords="encoding converter utf8 ascii unicode code points bytes analysis">
          <div class="tile-icon">🔤</div>
          <div class="tile-info">
            <h2>Encoding Converter</h2>
            <p>Analyze Unicode code points, UTF-8 bytes, and character encodings.</p>
          </div>
        </a>
      </div>
    </div>

    <div id="data">
      <div class="category-label">Data Tools</div>
      <div class="tools-grid">
        <a href="json-yaml.html" class="tool-tile" data-keywords="json yaml convert config kubernetes docker data">
          <div class="tile-icon">🔄</div>
          <div class="tile-info">
            <h2>JSON ↔ YAML</h2>
            <p>Convert between JSON and YAML formats. Perfect for config files.</p>
          </div>
        </a>
        <a href="html-markdown.html" class="tool-tile" data-keywords="html markdown convert bidirectional headings lists code">
          <div class="tile-icon">🔄</div>
          <div class="tile-info">
            <h2>HTML ↔ Markdown</h2>
            <p>Convert between HTML and Markdown. Supports headings, links, lists, code.</p>
          </div>
        </a>
        <a href="json-to-csv.html" class="tool-tile" data-keywords="json csv convert export spreadsheet excel flatten">
          <div class="tile-icon">📈</div>
          <div class="tile-info">
            <h2>JSON to CSV</h2>
            <p>Convert JSON arrays to CSV. Flatten nested objects, choose delimiters.</p>
          </div>
        </a>
      </div>
    </div>

    <div id="electronics">
      <div class="category-label">🍓 Raspberry Pi & Electronics</div>
      <div class="tools-grid">
        <a href="gpio-pinout.html" class="tool-tile" data-keywords="raspberry pi gpio pinout reference pins bcm board diagram">
          <div class="tile-icon">🍓</div>
          <div class="tile-info">
            <h2>GPIO Pinout</h2>
            <p>Interactive Raspberry Pi GPIO pinout. Click pins for details and Python code.</p>
          </div>
        </a>
        <a href="resistor-calculator.html" class="tool-tile" data-keywords="resistor color code calculator ohm bands electronics">
          <div class="tile-icon">🔧</div>
          <div class="tile-info">
            <h2>Resistor Calculator</h2>
            <p>Calculate resistor values from color bands. Visual resistor display.</p>
          </div>
        </a>
        <a href="logic-gates.html" class="tool-tile" data-keywords="logic gate simulator and or not nand nor xor truth table digital">
          <div class="tile-icon">🔌</div>
          <div class="tile-info">
            <h2>Logic Gate Simulator</h2>
            <p>Interactive AND, OR, NOT, XOR gates. Truth tables and Python code.</p>
          </div>
        </a>
        <a href="led-pattern.html" class="tool-tile" data-keywords="led pattern designer blink raspberry pi gpio light sequence">
          <div class="tile-icon">💡</div>
          <div class="tile-info">
            <h2>LED Pattern Designer</h2>
            <p>Design LED blinking patterns visually. Export Python code for your Pi.</p>
          </div>
        </a>
      </div>
    </div>

    <div id="math">
      <div class="category-label">Math & Utility</div>
      <div class="tools-grid">
        <a href="percentage-calculator.html" class="tool-tile" data-keywords="percentage calculator percent change increase decrease tip">
          <div class="tile-icon">🧮</div>
          <div class="tile-info">
            <h2>Percentage Calculator</h2>
            <p>Calculate percentages, changes, increases and decreases. Tip calculator.</p>
          </div>
        </a>
        <a href="byte-converter.html" class="tool-tile" data-keywords="byte kb mb gb tb converter data size storage">
          <div class="tile-icon">💾</div>
          <div class="tile-info">
            <h2>Byte Converter</h2>
            <p>Convert between Bytes, KB, MB, GB, TB. Binary and decimal modes.</p>
          </div>
        </a>
        <a href="random-generator.html" class="tool-tile" data-keywords="random number generator dice coin lottery picker list">
          <div class="tile-icon">🎲</div>
          <div class="tile-info">
            <h2>Random Generator</h2>
            <p>Random numbers, dice rolls, coin flips, lottery picks, and list randomizer.</p>
          </div>
        </a>
        <a href="coin-flip.html" class="tool-tile" data-keywords="coin flip toss heads tails simulator probability statistics">
          <div class="tile-icon">🪙</div>
          <div class="tile-info">
            <h2>Coin Flip</h2>
            <p>Flip a virtual coin. Track heads vs tails with statistics.</p>
          </div>
        </a>
        <a href="dice-roller.html" class="tool-tile" data-keywords="dice roller d20 d6 d4 tabletop rpg roll virtual">
          <div class="tile-icon">🎲</div>
          <div class="tile-info">
            <h2>Dice Roller</h2>
            <p>Roll D4-D100 dice. Multiple dice, modifiers, and roll history.</p>
          </div>
        </a>
        <a href="roman-numerals.html" class="tool-tile" data-keywords="roman numeral converter decimal number I V X L C D M">
          <div class="tile-icon">🏛️</div>
          <div class="tile-info">
            <h2>Roman Numerals</h2>
            <p>Convert between Roman numerals and decimal numbers. Year converter.</p>
          </div>
        </a>
        <a href="age-calculator.html" class="tool-tile" data-keywords="age calculator birthday date years months days old zodiac">
          <div class="tile-icon">🎂</div>
          <div class="tile-info">
            <h2>Age Calculator</h2>
            <p>Calculate exact age in years, months, days. Next birthday countdown.</p>
          </div>
        </a>
        <a href="unit-converter.html" class="tool-tile" data-keywords="unit converter length weight temperature volume speed area time">
          <div class="tile-icon">📏</div>
          <div class="tile-info">
            <h2>Unit Converter</h2>
            <p>Convert length, weight, temperature, volume, speed, area, and time.</p>
          </div>
        </a>
        <a href="loan-calculator.html" class="tool-tile" data-keywords="loan calculator mortgage payment interest amortization finance">
          <div class="tile-icon">🏦</div>
          <div class="tile-info">
            <h2>Loan Calculator</h2>
            <p>Calculate monthly payments, interest, and amortization for any loan.</p>
          </div>
        </a>
        <a href="tip-calculator.html" class="tool-tile" data-keywords="tip calculator split bill restaurant gratuity percentage">
          <div class="tile-icon">💵</div>
          <div class="tile-info">
            <h2>Tip Calculator</h2>
            <p>Calculate tips and split bills. Quick presets and comparison table.</p>
          </div>
        </a>
        <a href="binary-calculator.html" class="tool-tile" data-keywords="binary calculator add subtract multiply bitwise and or xor">
          <div class="tile-icon">🧮</div>
          <div class="tile-info">
            <h2>Binary Calculator</h2>
            <p>Binary arithmetic and bitwise operations (AND, OR, XOR, shifts).</p>
          </div>
        </a>
        <a href="discount-calculator.html" class="tool-tile" data-keywords="discount calculator sale price savings percentage off">
          <div class="tile-icon">🏷️</div>
          <div class="tile-info">
            <h2>Discount Calculator</h2>
            <p>Calculate sale prices, savings, and compare discount levels.</p>
          </div>