PageSourceSearch

https://www.toolsfinity.io/contact

html toolsfinity.io collected 2026-10-02 01:58:07 UTC 55,368 bytes, 633 lines download raw bytes

1<!DOCTYPE html>
2<html lang="en" class="dark h-full bg-base selection:bg-accent selection:text-black">
3<head>
4    <!-- Google tag (gtag.js) -->
vendor: 64 bytes, lines 4-5
4
5<script async src="https://www.googletagmanager.com/gtag/js?id=
5G-MH83RYMJ9H
vendor: 12 bytes, line 5
5"></script>
6<script>
7  
vendor: 134 bytes, lines 7-11
7window.dataLayer = window.dataLayer || [];
8  function gtag(){dataLayer.push(arguments);}
9  gtag('js', new Date());
10
11  gtag('config', '
11G-MH83RYMJ9H
vendor: 4 bytes, line 11
11');
12</script>
12
13  <meta charset="UTF-8">
14  <meta name="viewport" content="width=device-width, initial-scale=1.0">
15  <title>Contact Us | Toolsfinity – Technical Support &amp; Queries</title>
16  <meta name="description" content="Get in touch with the Toolsfinity team. Submit bugs, suggest tool templates, request features, or ask billing support questions online.">
17  <link rel="canonical" href="https://www.toolsfinity.io/contact">
18
19  <!-- Open Graph / Facebook -->
20  <meta property="og:type" content="website">
21  <meta property="og:title" content="Contact Us | Toolsfinity – Technical Support &amp; Queries">
22  <meta property="og:description" content="Get in touch with the Toolsfinity team. Submit bugs, suggest tool templates, request features, or ask billing support questions online.">
23  <meta property="og:url" content="https://www.toolsfinity.io/contact">
24  <meta property="og:image" content="https://www.toolsfinity.io/og-image.png?title=Contact+Us+%7C+Toolsfinity+%E2%80%93+Technical+Support+%26+Queries&amp;desc=Get+in+touch+with+the+Toolsfinity+team.+Submit+bugs%2C+suggest+tool+templates%2C+request+features%2C+or+ask+billing+support+questions+online.&amp;pills=No+Signup%2CUnlimited%2C100%25+Free%2C20%2B+Tools">
25  <meta property="og:image:width" content="1200">
26  <meta property="og:image:height" content="630">
27  <meta property="og:image:type" content="image/png">
28  <meta property="og:site_name" content="Toolsfinity">
29
30  <!-- Twitter -->
31  <meta name="twitter:card" content="summary_large_image">
32  <meta name="twitter:title" content="Contact Us | Toolsfinity – Technical Support &amp; Queries">
33  <meta name="twitter:description" content="Get in touch with the Toolsfinity team. Submit bugs, suggest tool templates, request features, or ask billing support questions online.">
34  <meta name="twitter:image" content="https://www.toolsfinity.io/og-image.png?title=Contact+Us+%7C+Toolsfinity+%E2%80%93+Technical+Support+%26+Queries&amp;desc=Get+in+touch+with+the+Toolsfinity+team.+Submit+bugs%2C+suggest+tool+templates%2C+request+features%2C+or+ask+billing+support+questions+online.&amp;pills=No+Signup%2CUnlimited%2C100%25+Free%2C20%2B+Tools">
35
36  <!-- Preconnect and Google Fonts -->
37  <link rel="preconnect" href="https://fonts.googleapis.com">
38  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
39  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Plus+Jakarta+Sans:wght@500;600;700;800&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">
40  
41  <!-- Lucide Icons -->
42  
42<script src="https://unpkg.com/lucide@latest"></script>
42
43
44  <link rel="stylesheet" href="/assets/css/output.css">
45  <link rel="icon" href="/assets/images/favicon.svg" type="image/svg+xml">
46
47  <!-- JS client-side subfolder url helper -->
48  
48<script>
49    window.SITE_URL = "https://www.toolsfinity.io";
50    window.BASE_PATH = "";
51    function url(path) {
52      if (!path.startsWith('/')) path = '/' + path;
53      return window.BASE_PATH.replace(/\/$/, '') + path;
54    }
55  </script>
55
56
57  <!-- Structured Data -->
58    
59  <style>
60    /* Ambient Noise Overlay */
61    .noise-bg {
62        position: fixed;
63        top: 0; left: 0; width: 100vw; height: 100vh;
64        pointer-events: none;
65        z-index: 50;
66        opacity: 0.035;
67        background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
68    }
69
70    /* Glassmorphism Utilities */
71    .glass-panel {
72        background: linear-gradient(145deg, rgba(255,255,255,0.03) 0%, rgba(255,255,255,0.01) 100%);
73        backdrop-filter: blur(12px);
74        -webkit-backdrop-filter: blur(12px);
75        border: 1px solid rgba(255, 255, 255, 0.08);
76        box-shadow: 0 4px 24px -1px rgba(0, 0, 0, 0.5);
77    }
78
79    /* Card Spotlight Hover Effect (CSS Only approximation) */
80    .tool-card {
81        transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
82        position: relative;
83        overflow: hidden;
84    }
85    
86    .tool-card::before {
87        content: "";
88        position: absolute;
89        top: 0; left: -100%; width: 50%; height: 100%;
90        background: linear-gradient(90deg, transparent, rgba(255,255,255,0.04), transparent);
91        transform: skewX(-20deg);
92        transition: all 0.6s ease;
93        pointer-events: none;
94    }
95    
96    .tool-card:hover::before {
97        left: 200%;
98    }
99
100    .tool-card:hover {
101        transform: translateY(-4px);
102        border-color: rgba(255, 255, 255, 0.15);
103        background: linear-gradient(145deg, rgba(255,255,255,0.05) 0%, rgba(255,255,255,0.02) 100%);
104        box-shadow: 0 12px 32px -8px rgba(0, 0, 0, 0.8), 0 0 20px -5px rgba(204, 255, 0, 0.05);
105    }
106
107    .tool-card:hover .icon-wrapper {
108        background: rgba(255, 255, 255, 0.1);
109        color: #CCFF00 !important;
110        transform: scale(1.05);
111        border-color: rgba(204, 255, 0, 0.3);
112    }
113
114    .icon-wrapper {
115        transition: all 0.3s ease;
116    }
117
118    /* Custom Scrollbar */
119    ::-webkit-scrollbar {
120        width: 8px;
121    }
122    ::-webkit-scrollbar-track {
123        background: #030303; 
124    }
125    ::-webkit-scrollbar-thumb {
126        background: #222; 
127        border-radius: 4px;
128    }
129    ::-webkit-scrollbar-thumb:hover {
130        background: #333; 
131    }
132
133    /* Focus rings */
134    *:focus-visible {
135        outline: 2px solid var(--tw-colors-accent);
136        outline-offset: 2px;
137    }
138
139    /* Ambient Background Blooms */
140    .ambient-bloom {
141        position: absolute;
142        border-radius: 50%;
143        filter: blur(100px);
144        z-index: 0;
145        pointer-events: none;
146        opacity: 0.4;
147    }
148
149    /* Text Gradients */
150    .text-gradient {
151        background-clip: text;
152        -webkit-background-clip: text;
153        -webkit-text-fill-color: transparent;
154    }
155  </style>
156</head>
157<body class="bg-base text-gray-300 font-sans antialiased selection:bg-accent selection:text-black overflow-x-hidden relative min-h-screen flex flex-col">
158
159  <!-- Ambient Lighting Effects -->
160  <div class="ambient-bloom w-[600px] h-[600px] bg-emerald-900/20 top-[-200px] left-[-100px]"></div>
161  <div class="ambient-bloom w-[800px] h-[800px] bg-blue-900/10 top-[20%] right-[-300px]"></div>
162  <div class="noise-bg"></div>
163
164  <!-- Navigation Bar -->
165  <nav class="fixed top-0 w-full z-40 bg-base/80 backdrop-blur-md border-b border-border">
166    <div class="max-w-[1200px] mx-auto px-6 h-20 flex items-center justify-between">
167      <!-- Logo -->
168      <a href="/" class="flex items-center gap-2 group">
169        <div class="w-8 h-8 flex items-center justify-center transition-transform group-hover:scale-105">
170          <img src="/assets/images/logo.svg" alt="Toolsfinity" class="w-8 h-8">
171        </div>
172        <span class="font-heading font-bold text-xl text-white tracking-tight">Toolsfinity</span>
173      </a>
174
175      <!-- Desktop Links -->
176      <div class="hidden md:flex items-center gap-8 font-medium text-sm text-gray-400">
177        
178        <!-- Tools Dropdown -->
179        <div class="relative group h-20 flex items-center">
180          <button class="hover:text-white transition-colors flex items-center gap-1 py-2 focus:outline-none">
181            Tools <i data-lucide="chevron-down" class="w-4 h-4 transition-transform group-hover:rotate-180"></i>
182          </button>
183          <!-- Mega Menu Dropdown -->
184          <div class="absolute left-1/2 -translate-x-1/2 top-full mt-0 w-[600px] glass-panel !bg-surface/95 backdrop-blur-2xl rounded-2xl p-6 hidden group-hover:block transition-all duration-150 shadow-[0_10px_40px_-10px_rgba(0,0,0,0.8)]">
185            <div class="grid grid-cols-3 gap-x-6 gap-y-4">
186                              <a href="/tools/video-downloader" class="flex items-start space-x-3 p-2 rounded-lg hover:bg-white/5 transition-colors group/tool">
187                  <div class="w-8 h-8 flex-shrink-0 text-gray-400 group-hover/tool:text-accent transition-colors flex items-center justify-center">
188                    <svg viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M20 6L20 28M20 28L12 20M20 28L28 20" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/><path d="M8 32H32" stroke="currentColor" stroke-width="2.5" stroke-linecap="round"/></svg>                  </div>
189                  <div>
190                    <div class="text-xs font-semibold text-white line-clamp-1">Video Downloader</div>
191                    <div class="text-[10px] text-gray-500 line-clamp-1 mt-0.5">Download videos from YouTube, TikTok, Instagram, and Facebook in high quality instantly.</div>
192                  </div>
193                </a>
194                              <a href="/tools/website-screenshot" class="flex items-start space-x-3 p-2 rounded-lg hover:bg-white/5 transition-colors group/tool">
195                  <div class="w-8 h-8 flex-shrink-0 text-gray-400 group-hover/tool:text-accent transition-colors flex items-center justify-center">
196                    <svg viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg"><rect x="6" y="8" width="28" height="24" rx="3" stroke="currentColor" stroke-width="2.5"/><path d="M6 14H34" stroke="currentColor" stroke-width="2.5"/><circle cx="10" cy="11" r="1" fill="currentColor"/><circle cx="14" cy="11" r="1" fill="currentColor"/></svg>                  </div>
197                  <div>
198                    <div class="text-xs font-semibold text-white line-clamp-1">Website Screenshot Tool</div>
199                    <div class="text-[10px] text-gray-500 line-clamp-1 mt-0.5">Capture any webpage in full length or viewport size and save as PNG or PDF.</div>
200                  </div>
201                </a>
202                              <a href="/tools/text-to-speech" class="flex items-start space-x-3 p-2 rounded-lg hover:bg-white/5 transition-colors group/tool">
203                  <div class="w-8 h-8 flex-shrink-0 text-gray-400 group-hover/tool:text-accent transition-colors flex items-center justify-center">
204                    <svg viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M8 16V24L16 30V10L8 16Z" stroke="currentColor" stroke-width="2.5" stroke-linejoin="round"/><path d="M22 14C24 16 24 24 22 26" stroke="currentColor" stroke-width="2.5" stroke-linecap="round"/>
204<path d="M27 10C31 14 31 26 27 30" stroke="currentColor" stroke-width="2.5" stroke-linecap="round"/></svg>                  </div>
205                  <div>
206                    <div class="text-xs font-semibold text-white line-clamp-1">Text to Speech Converter</div>
207                    <div class="text-[10px] text-gray-500 line-clamp-1 mt-0.5">Convert written text into natural-sounding speech with over 580 lifelike voices.</div>
208                  </div>
209                </a>
210                              <a href="/tools/temporary-email" class="flex items-start space-x-3 p-2 rounded-lg hover:bg-white/5 transition-colors group/tool">
211                  <div class="w-8 h-8 flex-shrink-0 text-gray-400 group-hover/tool:text-accent transition-colors flex items-center justify-center">
212                    <svg viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg"><rect x="6" y="10" width="28" height="20" rx="3" stroke="currentColor" stroke-width="2.5"/><path d="M6 14L20 24L34 14" stroke="currentColor" stroke-width="2.5" stroke-linejoin="round"/></svg>                  </div>
213                  <div>
214                    <div class="text-xs font-semibold text-white line-clamp-1">Temporary Email Generator</div>
215                    <div class="text-[10px] text-gray-500 line-clamp-1 mt-0.5">Get a disposable email address instantly to block spam and keep your personal inbox clean.</div>
216                  </div>
217                </a>
218                              <a href="/tools/ai-image-generator" class="flex items-start space-x-3 p-2 rounded-lg hover:bg-white/5 transition-colors group/tool">
219                  <div class="w-8 h-8 flex-shrink-0 text-gray-400 group-hover/tool:text-accent transition-colors flex items-center justify-center">
220                    <svg viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg"><rect x="6" y="6" width="28" height="28" rx="3" stroke="currentColor" stroke-width="2.5"/><circle cx="15" cy="16" r="3" stroke="currentColor" stroke-width="2"/><path d="M6 28L14 20L22 26L28 22L34 28" stroke="currentColor" stroke-width="2.5" stroke-linejoin="round"/></svg>                  </div>
221                  <div>
222                    <div class="text-xs font-semibold text-white line-clamp-1">AI Image Generator</div>
223                    <div class="text-[10px] text-gray-500 line-clamp-1 mt-0.5">Generate beautiful images and digital art from text descriptions or transform existing photos.</div>
224                  </div>
225                </a>
226                              <a href="/tools/ai-image-chat" class="flex items-start space-x-3 p-2 rounded-lg hover:bg-white/5 transition-colors group/tool">
227                  <div class="w-8 h-8 flex-shrink-0 text-gray-400 group-hover/tool:text-accent transition-colors flex items-center justify-center">
228                    <svg viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M8 8H26V24H16L10 30V24H8V8Z" stroke="currentColor" stroke-width="2.5" stroke-linejoin="round"/><circle cx="14" cy="16" r="2" fill="currentColor"/><circle cx="20" cy="16" r="2" fill="currentColor"/></svg>                  </div>
229                  <div>
230                    <div class="text-xs font-semibold text-white line-clamp-1">AI Image Analyzer</div>
231                    <div class="text-[10px] text-gray-500 line-clamp-1 mt-0.5">Upload an image and ask questions, extract text (OCR), or get descriptions using vision AI.</div>
232                  </div>
233                </a>
234                              <a href="/tools/manga-reader" class="flex items-start space-x-3 p-2 rounded-lg hover:bg-white/5 transition-colors group/tool">
235                  <div class="w-8 h-8 flex-shrink-0 text-gray-400 group-hover/tool:text-accent transition-colors flex items-center justify-center">
236                    <svg viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M20 8V34" stroke="currentColor" stroke-width="2.5"/><path d="M20 8C16 6 10 6 6 8V32C10 30 16 30 20 32" stroke="currentColor" stroke-width="2.5" stroke-linejoin="round"/><path d="M20 8C24 6 30 6 34 8V32C30 30 24 30 20 32" stroke="currentColor" stroke-width="2.5" stroke-linejoin="round"/></svg>                  </div>
237                  <div>
238                    <div class="text-xs font-semibold text-white line-clamp-1">Manga Reader Online</div>
239                    <div class="text-[10px] text-gray-500 line-clamp-1 mt-0.5">Browse, search, and read free manga chapters online with a clean vertical viewer.</div>
240                  </div>
241                </a>
242                              <a href="/tools/movie-search" class="flex items-start space-x-3 p-2 rounded-lg hover:bg-white/5 transition-colors group/tool">
243                  <div class="w-8 h-8 flex-shrink-0 text-gray-400 group-hover/tool:text-accent transition-colors flex items-center justify-center">
244                    <svg viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg"><rect x="6" y="8" width="28" height="24" rx="3" stroke="currentColor" stroke-width="2.5"/><path d="M6 14H10M6 20H10M6 26H10M30 14H34M30 20H34M30 26H34" stroke="currentColor" stroke-width="2.5" stroke-linecap="round"/></svg>                  </div>
245                  <div>
246                    <div class="text-xs font-semibold text-white line-clamp-1">Movie &amp; TV Show Search</div>
247                    <div class="text-[10px] text-gray-500 line-clamp-1 mt-0.5">Find IMDb ratings, full cast lists, plots, and streaming info for movies and series.</div>
248                  </div>
249                </a>
250                              <a href="/tools/medicine-information" class="flex items-start space-x-3 p-2 rounded-lg hover:bg-white/5 transition-colors group/tool">
251                  <div class="w-8 h-8 flex-shrink-0 text-gray-400 group-hover/tool:text-accent transition-colors flex items-center justify-center">
252                    <svg viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M16 6H24V14H32V22H24V30H16V22H8V14H16V6Z" stroke="currentColor" stroke-width="2.5" stroke-linejoin="round"/></svg>                  </div>
253                  <div>
254                    <div class="text-xs font-semibold text-white line-clamp-1">Medicine Information Search</div>
255                    <div class="text-[10px] text-gray-500 line-clamp-1 mt-0.5">Search a comprehensive drug database for uses, dosage details, side effects, and warnings.</div>
256                  </div>
257                </a>
258                              <a href="/tools/website-downloader" class="flex items-start space-x-3 p-2 rounded-lg hover:bg-white/5 transition-colors group/tool">
259                  <div class="w-8 h-8 flex-shrink-0 text-gray-400 group-hover/tool:text-accent transition-colors flex items-center justify-center">
260                    <svg viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg"><rect x="8" y="6" width="24" height="18" rx="2" stroke="currentColor" stroke-width="2.5"/><path d="M16 28H24" stroke="currentColor" stroke-width="2.5" stroke-linecap="round"/>
260<path d="M20 24V34" stroke="currentColor" stroke-width="2.5"/><path d="M14 34H26" stroke="currentColor" stroke-width="2.5" stroke-linecap="round"/></svg>                  </div>
261                  <div>
262                    <div class="text-xs font-semibold text-white line-clamp-1">Website Downloader</div>
263                    <div class="text-[10px] text-gray-500 line-clamp-1 mt-0.5">Archive any webpage or small website along with assets into a single ZIP file.</div>
264                  </div>
265                </a>
266                              <a href="/tools/urdu-novel-reader" class="flex items-start space-x-3 p-2 rounded-lg hover:bg-white/5 transition-colors group/tool">
267                  <div class="w-8 h-8 flex-shrink-0 text-gray-400 group-hover/tool:text-accent transition-colors flex items-center justify-center">
268                    <svg viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M8 6H20V34H8C7 34 6 33 6 32V8C6 7 7 6 8 6Z" stroke="currentColor" stroke-width="2.5" stroke-linejoin="round"/><path d="M20 6H32C33 6 34 7 34 8V32C34 33 33 34 32 34H20V6Z" stroke="currentColor" stroke-width="2.5" stroke-linejoin="round"/><path d="M24 14L30 14M24 20L28 20" stroke="currentColor" stroke-width="2" stroke-linecap="round"/></svg>                  </div>
269                  <div>
270                    <div class="text-xs font-semibold text-white line-clamp-1">Urdu Novel Reader</div>
271                    <div class="text-[10px] text-gray-500 line-clamp-1 mt-0.5">Read Urdu novels online, download PDF formats, or listen to audio stories.</div>
272                  </div>
273                </a>
274                              <a href="/tools/wikipedia-to-pdf" class="flex items-start space-x-3 p-2 rounded-lg hover:bg-white/5 transition-colors group/tool">
275                  <div class="w-8 h-8 flex-shrink-0 text-gray-400 group-hover/tool:text-accent transition-colors flex items-center justify-center">
276                    <svg viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M10 6H26L32 12V34H10C9 34 8 33 8 32V8C8 7 9 6 10 6Z" stroke="currentColor" stroke-width="2.5" stroke-linejoin="round"/><path d="M26 6V12H32" stroke="currentColor" stroke-width="2.5" stroke-linejoin="round"/><path d="M14 20H28M14 26H24" stroke="currentColor" stroke-width="2" stroke-linecap="round"/></svg>                  </div>
277                  <div>
278                    <div class="text-xs font-semibold text-white line-clamp-1">Wikipedia to PDF Converter</div>
279                    <div class="text-[10px] text-gray-500 line-clamp-1 mt-0.5">Convert any Wikipedia article into a clean, print-friendly PDF document instantly.</div>
280                  </div>
281                </a>
282                              <a href="/tools/n8n-workflow-templates" class="flex items-start space-x-3 p-2 rounded-lg hover:bg-white/5 transition-colors group/tool">
283                  <div class="w-8 h-8 flex-shrink-0 text-gray-400 group-hover/tool:text-accent transition-colors flex items-center justify-center">
284                    <svg viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg"><circle cx="10" cy="12" r="4" stroke="currentColor" stroke-width="2.5"/><circle cx="30" cy="12" r="4" stroke="currentColor" stroke-width="2.5"/><circle cx="20" cy="28" r="4" stroke="currentColor" stroke-width="2.5"/><path d="M14 14L18 24M26 14L22 24" stroke="currentColor" stroke-width="2.5"/></svg>                  </div>
285                  <div>
286                    <div class="text-xs font-semibold text-white line-clamp-1">n8n Workflow Templates</div>
287                    <div class="text-[10px] text-gray-500 line-clamp-1 mt-0.5">Browse, search, and download pre-built n8n automation workflow JSON files.</div>
288                  </div>
289                </a>
290                              <a href="/tools/online-courses" class="flex items-start space-x-3 p-2 rounded-lg hover:bg-white/5 transition-colors group/tool">
291                  <div class="w-8 h-8 flex-shrink-0 text-gray-400 group-hover/tool:text-accent transition-colors flex items-center justify-center">
292                    <svg viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M4 14L20 6L36 14L20 22L4 14Z" stroke="currentColor" stroke-width="2.5" stroke-linejoin="round"/>
292<path d="M10 18V28C10 28 14 32 20 32C26 32 30 28 30 28V18" stroke="currentColor" stroke-width="2.5" stroke-linejoin="round"/><path d="M36 14V26" stroke="currentColor" stroke-width="2.5" stroke-linecap="round"/></svg>                  </div>
293                  <div>
294                    <div class="text-xs font-semibold text-white line-clamp-1">Free Online Tech Courses</div>
295                    <div class="text-[10px] text-gray-500 line-clamp-1 mt-0.5">Browse and access free programming, IT, and web development courses hosted on Google Drive.</div>
296                  </div>
297                </a>
298                              <a href="/tools/text-to-image" class="flex items-start space-x-3 p-2 rounded-lg hover:bg-white/5 transition-colors group/tool">
299                  <div class="w-8 h-8 flex-shrink-0 text-gray-400 group-hover/tool:text-accent transition-colors flex items-center justify-center">
300                    <svg viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M8 10H32V30H8V10Z" stroke="currentColor" stroke-width="2.5" stroke-linejoin="round"/><path d="M14 18L18 14L24 20L28 16L32 20V30H8V20L14 18Z" stroke="currentColor" stroke-width="2.5" stroke-linejoin="round"/><circle cx="16" cy="15" r="1.5" fill="currentColor"/></svg>                  </div>
301                  <div>
302                    <div class="text-xs font-semibold text-white line-clamp-1">Text to Image Generator</div>
303                    <div class="text-[10px] text-gray-500 line-clamp-1 mt-0.5">Turn your words into stunning AI-generated images in seconds. Free, no signup.</div>
304                  </div>
305                </a>
306                              <a href="/tools/image-to-image" class="flex items-start space-x-3 p-2 rounded-lg hover:bg-white/5 transition-colors group/tool">
307                  <div class="w-8 h-8 flex-shrink-0 text-gray-400 group-hover/tool:text-accent transition-colors flex items-center justify-center">
308                    <svg viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M6 10H20V20H6V10Z" stroke="currentColor" stroke-width="2.5" stroke-linejoin="round"/><path d="M20 20H34V30H20V20Z" stroke="currentColor" stroke-width="2.5" stroke-linejoin="round"/><path d="M6 24L12 18L18 24L20 22L26 28H6V24Z" stroke="currentColor" stroke-width="2.5" stroke-linejoin="round"/><path d="M24 14L28 10L34 16" stroke="currentColor" stroke-width="2.5" stroke-linejoin="round"/><path d="M10 30H8V34H14V32" stroke="currentColor" stroke-width="2" stroke-linecap="round"/><path d="M30 10H34V14" stroke="currentColor" stroke-width="2" stroke-linecap="round"/></svg>                  </div>
309                  <div>
310                    <div class="text-xs font-semibold text-white line-clamp-1">Image to Image Generator</div>
311                    <div class="text-[10px] text-gray-500 line-clamp-1 mt-0.5">Transform any photo into something new using AI. Upload, describe, and reimagine.</div>
312                  </div>
313                </a>
314                              <a href="/tools/image-to-video" class="flex items-start space-x-3 p-2 rounded-lg hover:bg-white/5 transition-colors group/tool">
315                  <div class="w-8 h-8 flex-shrink-0 text-gray-400 group-hover/tool:text-accent transition-colors flex items-center justify-center">
316                    <svg viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg"><rect x="6" y="8" width="22" height="24" rx="3" stroke="currentColor" stroke-width="2.5"/><path d="M28 16L34 12V28L28 24V16Z" stroke="currentColor" stroke-width="2.5" stroke-linejoin="round"/><circle cx="13" cy="16" r="1.5" fill="currentColor"/><path d="M10 24L14 20L18 24L22 22L26 26H10V24Z" stroke="currentColor" stroke-width="2" stroke-linejoin="round"/></svg>                  </div>
317                  <div>
318                    <div class="text-xs font-semibold text-white line-clamp-1">Image to Video Generator</div>
319                    <div class="text-[10px] text-gray-500 line-clamp-1 mt-0.5">Animate your still images into stunning AI-powered videos with motion and effects.</div>
320                  </div>
321                </a>
322                          </div>
323          </div>
324        </div>
325
326        <!-- Categories Dropdown -->
327        <div class="relative group h-20 flex items-center">
328          <button class="hover:text-white transition-colors flex items-center gap-1 py-2 focus:outline-none">
329            Categories <i data-lucide="chevron-down" class="w-4 h-4 transition-transform group-hover:rotate-180"></i>
330          </button>
331          <div class="absolute left-0 top-full mt-0 w-64 glass-panel !bg-surface/95 backdrop-blur-2xl rounded-2xl py-2 hidden group-hover:block transition-all duration-150 shadow-[0_10px_40px_-10px_rgba(0,0,0,0.8)]">
332                          <a href="/category/ai-tools" class="block px-4 py-2 text-sm text-gray-400 hover:text-white hover:bg-white/5 transition-colors">
333                AI Tools              </a>
334                          <a href="/category/video-audio-tools" class="block px-4 py-2 text-sm text-gray-400 hover:text-white hover:bg-white/5 transition-colors">
335                Video &amp; Audio Tools              </a>
336                          <a href="/category/file-document-tools" class="block px-4 py-2 text-sm text-gray-400 hover:text-white hover:bg-white/5 transition-colors">
337                File &amp; Document Tools              </a>
338                          <a href="/category/social-media-tools" class="block px-4 py-2 text-sm text-gray-400 hover:text-white hover:bg-white/5 transition-colors">
339                Social Media Tools              </a>
340                          <a href="/category/developer-tools" class="block px-4 py-2 text-sm text-gray-400 hover:text-white hover:bg-white/5 transition-colors">
341                Developer &amp; Automation Tools              </a>
342                          <a href="/category/reading-learning-tools" class="block px-4 py-2 text-sm text-gray-400 hover:text-white hover:bg-white/5 transition-colors">
343                Reading &amp; Learning Tools              </a>
344                      </div>
345        </div>
346
347        <a href="/about" class="hover:text-white transition-colors flex items-center h-20">About</a>
348      </div>
349
350      <!-- Actions -->
351      <div class="flex items-center gap-4">
352        <!-- Search Trigger -->
353        <button id="search-btn" class="p-2 text-gray-400 hover:text-white hover:bg-white/5 rounded-full transition-colors" aria-label="Search tools">
354          <i data-lucide="search" class="w-5 h-5"></i>
355        </button>
356
357        <!-- Mobile Menu Trigger -->
358        <button id="mobile-menu-btn" class="md:hidden p-2 text-gray-400 hover:text-white hover:bg-white/5 rounded-full transition-colors" aria-label="Toggle menu">
359          <i data-lucide="menu" class="w-6 h-6"></i>
360        </button>
361      </div>
362    </div>
363  </nav>
364
365  <!-- Mobile Navigation Overlay Drawer -->
366  <div id="mobile-drawer" class="fixed inset-0 z-50 transform translate-x-full transition-transform duration-300 md:hidden bg-base/95 backdrop-blur-lg flex flex-col border-l border-border max-w-xs ml-auto">
367    <div class="flex items-center justify-between p-6 border-b border-border">
368      <span class="font-heading font-bold text-lg text-white">Menu</span>
369      <button id="mobile-close-btn" class="p-2 text-gray-400 hover:text-white hover:bg-white/5 rounded-full transition-colors" aria-label="Close menu">
370        <i data-lucide="x" class="w-6 h-6"></i>
371      </button>
372    </div>
373    <div class="flex-1 overflow-y-auto p-6 space-y-6">
374      <div class="space-y-3">
375        <div class="text-xs font-semibold uppercase tracking-wider text-gray-500">Categories</div>
376        <div class="grid grid-cols-1 gap-2">
377                      <a href="/category/ai-tools" class="block py-1.5 text-sm text-gray-300 hover:text-white transition-colors">
378              AI Tools            </a>
379                      <a href="/category/video-audio-tools" class="block py-1.5 text-sm text-gray-300 hover:text-white transition-colors">
380              Video &amp; Audio Tools            </a>
381                      <a href="/category/file-document-tools" class="block py-1.5 text-sm text-gray-300 hover:text-white transition-colors">
382              File &amp; Document Tools            </a>
383                      <a href="/category/social-media-tools" class="block py-1.5 text-sm text-gray-300 hover:text-white transition-colors">
384              Social Media Tools            </a>
385                      <a href="/category/developer-tools" class="block py-1.5 text-sm text-gray-300 hover:text-white transition-colors">
386              Developer &amp; Automation Tools            </a>
387                      <a href="/category/reading-learning-tools" class="block py-1.5 text-sm text-gray-300 hover:text-white transition-colors">
388              Reading &amp; Learning Tools            </a>
389                  </div>
390      </div>
391      
392      <div class="border-t border-border pt-6 space-y-3">
393        <div class="text-xs font-semibold uppercase tracking-wider text-gray-500">Tools</div>
394        <div class="grid grid-cols-1 gap-2">
395                      <a href="/tools/video-downloader" class="flex items-center space-x-2 py-1 text-sm text-gray-300 hover:text-white transition-colors group">
396              <span class="w-4 h-4 text-gray-500 group-hover:text-accent flex-shrink-0 flex items-center justify-center"><svg viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M20 6L20 28M20 28L12 20M20 28L28 20" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/><path d="M8 32H32" stroke="currentColor" stroke-width="2.5" stroke-linecap="round"/></svg></span>
397              <span class="truncate">Video Downloader</span>
398            </a>
399                      <a href="/tools/website-screenshot" class="flex items-center space-x-2 py-1 text-sm text-gray-300 hover:text-white transition-colors group">
400              <span class="w-4 h-4 text-gray-500 group-hover:text-accent flex-shrink-0 flex items-center justify-center"><svg viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg"><rect x="6" y="8" width="28" height="24" rx="3" stroke="currentColor" stroke-width="2.5"/><path d="M6 14H34" stroke="currentColor" stroke-width="2.5"/><circle cx="10" cy="11" r="1" fill="currentColor"/><circle cx="14" cy="11" r="1" fill="currentColor"/></svg></span>
401              <span class="truncate">Website Screenshot Tool</span>
402            </a>
403                      <a href="/tools/text-to-speech" class="flex items-center space-x-2 py-1 text-sm text-gray-300 hover:text-white transition-colors group">
404              <span class="w-4 h-4 text-gray-500 group-hover:text-accent flex-shrink-0 flex items-center justify-center"><svg viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M8 16V24L16 30V10L8 16Z" stroke="currentColor" stroke-width="2.5" stroke-linejoin="round"/><path d="M22 14C24 16 24 24 22 26" stroke="currentColor" stroke-width="2.5" stroke-linecap="round"/><path d="M27 10C31 14 31 26 27 30" stroke="currentColor" stroke-width="2.5" stroke-linecap="round"/></svg></span>
405              <span class="truncate">Text to Speech Converter</span>
406            </a>
407                      <a href="/tools/temporary-email" class="flex items-center space-x-2 py-1 text-sm text-gray-300 hover:text-white transition-colors group">
408              <span class="w-4 h-4 text-gray-500 group-hover:text-accent flex-shrink-0 flex items-center justify-center"><svg viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg"><rect x="6" y="10" width="28" height="20" rx="3" stroke="currentColor" stroke-width="2.5"/><path d="M6 14L20 24L34 14" stroke="currentColor" stroke-width="2.5" stroke-linejoin="round"/></svg></span>
409              <span class="truncate">Temporary Email Generator</span>
410            </a>
411                      <a href="/tools/ai-image-generator" class="flex items-center space-x-2 py-1 text-sm text-gray-300 hover:text-white transition-colors group">
412              <span class="w-4 h-4 text-gray-500 group-hover:text-accent flex-shrink-0 flex items-center justify-center"><svg viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg"><rect x="6" y="6" width="28" height="28" rx="3" stroke="currentColor" stroke-width="2.5"/><circle cx="15" cy="16" r="3" stroke="currentColor" stroke-width="2"/><path d="M6 28L14 20L22 26L28 22L34 28" stroke="currentColor" stroke-width="2.5" stroke-linejoin="round"/></svg></span>
413              <span class="truncate">AI Image Generator</span>
414            </a>
415                      <a href="/tools/ai-image-chat" class="flex items-center space-x-2 py-1 text-sm text-gray-300 hover:text-white transition-colors group">
416              <span class="w-4 h-4 text-gray-500 group-hover:text-accent flex-shrink-0 flex items-center justify-center"><svg viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M8 8H26V24H16L10 30V24H8V8Z" stroke="currentColor" stroke-width="2.5" stroke-linejoin="round"/><circle cx="14" cy="16" r="2" fill="currentColor"/><circle cx="20" cy="16" r="2" fill="currentColor"/></svg></span>
417              <span class="truncate">AI Image Analyzer</span>
418            </a>
419                      <a href="/tools/manga-reader" class="flex items-center space-x-2 py-1 text-sm text-gray-300 hover:text-white transition-colors group">
420              <span class="w-4 h-4 text-gray-500 group-hover:text-accent flex-shrink-0 flex items-center justify-center"><svg viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M20 8V34" stroke="currentColor" stroke-width="2.5"/><path d="M20 8C16 6 10 6 6 8V32C10 30 16 30 20 32" stroke="currentColor" stroke-width="2.5" stroke-linejoin="round"/><path d="M20 8C24 6 30 6 34 8V32C30 30 24 30 20 32" stroke="currentColor" stroke-width="2.5" stroke-linejoin="round"/></svg></span>
421              <span class="truncate">Manga Reader Online</span>
422            </a>
423                      <a href="/tools/movie-search" class="flex items-center space-x-2 py-1 text-sm text-gray-300 hover:text-white transition-colors group">
424              <span class="w-4 h-4 text-gray-500 group-hover:text-accent flex-shrink-0 flex items-center justify-center"><svg viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg"><rect x="6" y="8" width="28" height="24" rx="3" stroke="currentColor" stroke-width="2.5"/><path d="M6 14H10M6 20H10M6 26H10M30 14H34M30 20H34M30 26H34" stroke="currentColor" stroke-width="2.5" stroke-linecap="round"/></svg></span>
425              <span class="truncate">Movie &amp; TV Show Search</span>
426            </a>
427                      <a href="/tools/medicine-information" class="flex items-center space-x-2 py-1 text-sm text-gray-300 hover:text-white transition-colors group">
428              <span class="w-4 h-4 text-gray-500 group-hover:text-accent flex-shrink-0 flex items-center justify-center"><svg viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M16 6H24V14H32V22H24V30H16V22H8V14H16V6Z" stroke="currentColor" stroke-width="2.5" stroke-linejoin="round"/></svg></span>
429              <span class="truncate">Medicine Information Search</span>
430            </a>
431                      <a href="/tools/website-downloader" class="flex items-center space-x-2 py-1 text-sm text-gray-300 hover:text-white transition-colors group">
432              <span class="w-4 h-4 text-gray-500 group-hover:text-accent flex-shrink-0 flex items-center justify-center"><svg viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg"><rect x="8" y="6" width="24" height="18" rx="2" stroke="currentColor" stroke-width="2.5"/><path d="M16 28H24" stroke="currentColor" stroke-width="2.5" stroke-linecap="round"/><path d="M20 24V34" stroke="currentColor" stroke-width="2.5"/><path d="M14 34H26" stroke="currentColor" stroke-width="2.5" stroke-linecap="round"/></svg></span>
433              <span class="truncate">Website Downloader</span>
434            </a>
435                      <a href="/tools/urdu-novel-reader" class="flex items-center space-x-2 py-1 text-sm text-gray-300 hover:text-white transition-colors group">
436              <span class="w-4 h-4 text-gray-500 group-hover:text-accent flex-shrink-0 flex items-center justify-center"><svg viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M8 6H20V34H8C7 34 6 33 6 32V8C6 7 7 6 8 6Z" stroke="currentColor" stroke-width="2.5" stroke-linejoin="round"/><path d="M20 6H32C33 6 34 7 34 8V32C34 33 33 34 32 34H20V6Z" stroke="currentColor" stroke-width="2.5" stroke-linejoin="round"/><path d="M24 14L30 14M24 20L28 20" stroke="currentColor" stroke-width="2" stroke-linecap="round"/></svg></span>
437              <span class="truncate">Urdu Novel Reader</span>
438            </a>
439                      <a href="/tools/wikipedia-to-pdf" class="flex items-center space-x-2 py-1 text-sm text-gray-300 hover:text-white transition-colors group">
440              <span class="w-4 h-4 text-gray-500 group-hover:text-accent flex-shrink-0 flex items-center justify-center"><svg viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M10 6H26L32 12V34H10C9 34 8 33 8 32V8C8 7 9 6 10 6Z" stroke="currentColor" stroke-width="2.5" stroke-linejoin="round"/><path d="M26 6V12H32" stroke="currentColor" stroke-width="2.5" stroke-linejoin="round"/><path d="M14 20H28M14 26H24" stroke="currentColor" stroke-width="2" stroke-linecap="round"/></svg></span>
441              <span class="truncate">Wikipedia to PDF Converter</span>
442            </a>
443                      <a href="/tools/n8n-workflow-templates" class="flex items-center space-x-2 py-1 text-sm text-gray-300 hover:text-white transition-colors group">
444              <span class="w-4 h-4 text-gray-500 group-hover:text-accent flex-shrink-0 flex items-center justify-center"><svg viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg"><circle cx="10" cy="12" r="4" stroke="currentColor" stroke-width="2.5"/><circle cx="30" cy="12" r="4" stroke="currentColor" stroke-width="2.5"/><circle cx="20" cy="28" r="4" stroke="currentColor" stroke-width="2.5"/><path d="M14 14L18 24M26 14L22 24" stroke="currentColor" stroke-width="2.5"/></svg></span>
445              <span class="truncate">n8n Workflow Templates</span>
446            </a>
447                      <a href="/tools/online-courses" class="flex items-center space-x-2 py-1 text-sm text-gray-300 hover:text-white transition-colors group">
448              <span class="w-4 h-4 text-gray-500 group-hover:text-accent flex-shrink-0 flex items-center justify-center"><svg viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M4 14L20 6L36 14L20 22L4 14Z" stroke="currentColor" stroke-width="2.5" stroke-linejoin="round"/>
448<path d="M10 18V28C10 28 14 32 20 32C26 32 30 28 30 28V18" stroke="currentColor" stroke-width="2.5" stroke-linejoin="round"/><path d="M36 14V26" stroke="currentColor" stroke-width="2.5" stroke-linecap="round"/></svg></span>
449              <span class="truncate">Free Online Tech Courses</span>
450            </a>
451                      <a href="/tools/text-to-image" class="flex items-center space-x-2 py-1 text-sm text-gray-300 hover:text-white transition-colors group">
452              <span class="w-4 h-4 text-gray-500 group-hover:text-accent flex-shrink-0 flex items-center justify-center"><svg viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M8 10H32V30H8V10Z" stroke="currentColor" stroke-width="2.5" stroke-linejoin="round"/><path d="M14 18L18 14L24 20L28 16L32 20V30H8V20L14 18Z" stroke="currentColor" stroke-width="2.5" stroke-linejoin="round"/><circle cx="16" cy="15" r="1.5" fill="currentColor"/></svg></span>
453              <span class="truncate">Text to Image Generator</span>
454            </a>
455                      <a href="/tools/image-to-image" class="flex items-center space-x-2 py-1 text-sm text-gray-300 hover:text-white transition-colors group">
456              <span class="w-4 h-4 text-gray-500 group-hover:text-accent flex-shrink-0 flex items-center justify-center"><svg viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M6 10H20V20H6V10Z" stroke="currentColor" stroke-width="2.5" stroke-linejoin="round"/><path d="M20 20H34V30H20V20Z" stroke="currentColor" stroke-width="2.5" stroke-linejoin="round"/><path d="M6 24L12 18L18 24L20 22L26 28H6V24Z" stroke="currentColor" stroke-width="2.5" stroke-linejoin="round"/><path d="M24 14L28 10L34 16" stroke="currentColor" stroke-width="2.5" stroke-linejoin="round"/><path d="M10 30H8V34H14V32" stroke="currentColor" stroke-width="2" stroke-linecap="round"/><path d="M30 10H34V14" stroke="currentColor" stroke-width="2" stroke-linecap="round"/></svg></span>
457              <span class="truncate">Image to Image Generator</span>
458            </a>
459                      <a href="/tools/image-to-video" class="flex items-center space-x-2 py-1 text-sm text-gray-300 hover:text-white transition-colors group">
460              <span class="w-4 h-4 text-gray-500 group-hover:text-accent flex-shrink-0 flex items-center justify-center"><svg viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg"><rect x="6" y="8" width="22" height="24" rx="3" stroke="currentColor" stroke-width="2.5"/><path d="M28 16L34 12V28L28 24V16Z" stroke="currentColor" stroke-width="2.5" stroke-linejoin="round"/><circle cx="13" cy="16" r="1.5" fill="currentColor"/><path d="M10 24L14 20L18 24L22 22L26 26H10V24Z" stroke="currentColor" stroke-width="2" stroke-linejoin="round"/></svg></span>
461              <span class="truncate">Image to Video Generator</span>
462            </a>
463                  </div>
464      </div>
465
466      <div class="border-t border-border pt-6 space-y-4">
467        <a href="/about" class="block text-sm text-gray-300 hover:text-white transition-colors font-medium">About</a>
468        <a href="/contact" class="block text-sm text-gray-300 hover:text-white transition-colors font-medium">Contact</a>
469      </div>
470    </div>
471  </div>
472
473  <!-- Search Modal Overlay -->
474  <div id="search-modal" class="fixed inset-0 z-50 bg-base/90 backdrop-blur-md hidden items-center justify-center p-6 transition-all duration-300">
475    <div class="w-full max-w-2xl glass-panel !bg-surface/95 backdrop-blur-2xl rounded-2xl overflow-hidden shadow-[0_10px_40px_-10px_rgba(0,0,0,0.8)]">
476      <!-- Search Input Header -->
477      <div class="p-6 border-b border-border flex items-center justify-between">
478        <div class="flex items-center space-x-3 flex-grow">
479          <i data-lucide="search" class="w-6 h-6 text-gray-400"></i>
480          <input type="text" id="search-input" placeholder="Search for tools..." class="w-full bg-transparent border-none text-lg text-white placeholder:text-gray-500 focus:ring-0 focus:outline-none">
481        </div>
482        <button id="search-close-btn" class="p-2 text-gray-400 hover:text-white hover:bg-white/5 rounded-full transition-colors">
483          <i data-lucide="x" class="w-6 h-6"></i>
484        </button>
485      </div>
486
487      <!-- Search Results Box -->
488      <div id="search-results" class="max-h-[350px] overflow-y-auto p-4 empty:hidden divide-y divide-border">
489        <!-- Results loaded dynamically -->
490      </div>
491    </div>
492  </div>
493
494  <!-- Content Wrapper -->
495  <main class="flex-grow pt-24 relative z-10">
496
497<section class="max-w-[600px] mx-auto px-6 py-16 space-y-8 animate-[fadeIn_0.3s_ease-out]">
498  
499  <div class="space-y-3">
500    <span class="text-xs font-mono text-accent uppercase tracking-widest font-semibold">Get in Touch</span>
501    <h1 class="text-3xl font-bold tracking-tightest leading-none text-t1">
502      Contact <span class="gradient-text">Support</span>
503    </h1>
504    <p class="text-xs text-t2 leading-relaxed">
505      Have a tool recommendation, a bug report, or questions about ad placements? Drop us a message using the secure form below or email us directly at <span class="text-accent font-semibold">[email protected]</span>
506    </p>
507  </div>
508
509  <!-- Messages notifications -->
510    
511  
512  <!-- Contact Form -->
513  <form method="POST" action="/contact" class="space-y-4 bg-surface border border-border p-6 rounded-xl">
514    
515    <div class="grid grid-cols-2 gap-4">
516      <!-- Name -->
517      <div class="space-y-1.5">
518        <label for="contact-name" class="text-[10px] font-semibold text-t2 uppercase tracking-wider">Your Name</label>
519        <input type="text" name="name" id="contact-name" required placeholder="John Doe" class="w-full px-4 py-2.5 rounded-lg text-xs bg-bg border border-border focus:border-accent text-t1 placeholder:text-t3 focus:ring-0 focus:outline-none">
520      </div>
521      
522      <!-- Email -->
523      <div class="space-y-1.5">
524        <label for="contact-email" class="text-[10px] font-semibold text-t2 uppercase tracking-wider">Email Address</label>
525        <input type="email" name="email" id="contact-email" required placeholder="[email protected]" class="w-full px-4 py-2.5 rounded-lg text-xs bg-bg border border-border focus:border-accent text-t1 placeholder:text-t3 focus:ring-0 focus:outline-none">
526      </div>
527    </div>
528
529    <!-- Subject -->
530    <div class="space-y-1.5">
531      <label for="contact-subject" class="text-[10px] font-semibold text-t2 uppercase tracking-wider">Subject</label>
532      <input type="text" name="subject" id="contact-subject" required placeholder="e.g. Bug report, Tool suggestion" class="w-full px-4 py-2.5 rounded-lg text-xs bg-bg border border-border focus:border-accent text-t1 placeholder:text-t3 focus:ring-0 focus:outline-none">
533    </div>
534
535    <!-- Message -->
536    <div class="space-y-1.5">
537      <label for="contact-message" class="text-[10px] font-semibold text-t2 uppercase tracking-wider">Message Description</label>
538      <textarea name="message" id="contact-message" rows="5" required placeholder="Describe details of your query..." class="w-full px-4 py-3 rounded-lg text-xs bg-bg border border-border focus:border-accent text-t1 placeholder:text-t3 focus:ring-0 focus:outline-none resize-none"></textarea>
539    </div>
540
541    <!-- CSRF Token -->
542    <input type="hidden" name="csrf_token" value="15f41933f3d2cfa556a97e9c5c21f0328b6131cb021b11d1bbcc43013347b830">
543
544    <button type="submit" class="btn-primary w-full py-3 text-xs font-semibold flex items-center justify-center space-x-1.5">
545      <span>Send Message</span>
546      <svg class="w-4 h-4" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M12 19l9 2-9-18-9 18 9-2zm0 0v-8"/></svg>
547    </button>
548
549  </form>
550
551</section>
552
553  </main>
554
555  <!-- Footer Component -->
556  <footer class="border-t border-border bg-[#020202] pt-20 pb-10 relative z-10">
557    <div class="max-w-7xl mx-auto px-6">
558        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-5 gap-12 lg:gap-8 mb-16">
559            
560            <div class="lg:col-span-2">
561                <a href="/" class="flex items-center gap-2 mb-6 group">
562                    <div class="w-8 h-8 flex items-center justify-center">
563                        <img src="/assets/images/logo.svg" alt="Toolsfinity" class="w-8 h-8">
564                    </div>
565                    <span class="font-heading font-bold text-xl text-white">Toolsfinity</span>
566                </a>
567                <p class="text-gray-500 text-sm leading-relaxed max-w-sm mb-6">
568                    Every tool you need. Nothing you don&#039;t. Fast, private, and simple tools that help you solve daily tasks without signups or watermarks.
569                </p>
570                <div class="flex gap-4">
571                    <a href="#" class="text-gray-500 hover:text-white transition-colors"><i data-lucide="twitter" class="w-5 h-5"></i></a>
572                    <a href="#" class="text-gray-500 hover:text-white transition-colors"><i data-lucide="github" class="w-5 h-5"></i></a>
573                    <a href="#" class="text-gray-500 hover:text-white transition-colors"><i data-lucide="globe" class="w-5 h-5"></i></a>
574                </div>
575            </div>
576
577            <div>
578                <h4 class="text-white font-heading font-semibold mb-6">Popular Tools</h4>
579                <ul class="space-y-4 text-sm text-gray-500">
580                                            <li><a href="/tools/video-downloader" class="hover:text-accent transition-colors">Video Downloader</a></li>
581                                            <li><a href="/tools/website-screenshot" class="hover:text-accent transition-colors">Website Screenshot Tool</a></li>
582                                            <li><a href="/tools/text-to-speech" class="hover:text-accent transition-colors">Text to Speech Converter</a></li>
583                                            <li><a href="/tools/temporary-email" class="hover:text-accent transition-colors">Temporary Email Generator</a></li>
584                                            <li><a href="/tools/ai-image-generator" class="hover:text-accent transition-colors">AI Image Generator</a></li>
585                                    </ul>
586            </div>
587
588            <div>
589                <h4 class="text-white font-heading font-semibold mb-6">More Utilities</h4>
590                <ul class="space-y-4 text-sm text-gray-500">
591                                            <li><a href="/tools/ai-image-chat" class="hover:text-accent transition-colors">AI Image Analyzer</a></li>
592                                            <li><a href="/tools/manga-reader" class="hover:text-accent transition-colors">Manga Reader Online</a></li>
593                                            <li><a href="/tools/movie-search" class="hover:text-accent transition-colors">Movie &amp; TV Show Search</a></li>
594                                            <li><a href="/tools/medicine-information" class="hover:text-accent transition-colors">Medicine Information Search</a></li>
595                                            <li><a href="/tools/website-downloader" class="hover:text-accent transition-colors">Website Downloader</a></li>
596                                    </ul>
597            </div>
598
599            <div>
600                <h4 class="text-white font-heading font-semibold mb-6">Company</h4>
601                <ul class="space-y-4 text-sm text-gray-500">
602                    <li><a href="/about" class="hover:text-accent transition-colors">About Us</a></li>
603                    <li><a href="/contact" class="hover:text-accent transition-colors">Contact</a></li>
604                    <li><a href="/privacy-policy" class="hover:text-accent transition-colors">Privacy Policy</a></li>
605                    <li><a href="/terms-of-service" class="hover:text-accent transition-colors">Terms of Service</a></li>
606                    <li><a href="/sitemap" class="hover:text-accent transition-colors">HTML Sitemap</a></li>
607                    <li><a href="https://whatsapp.com/channel/0029Vb7FVyy6BIEdCN9BXh1C" target="_blank" rel="noopener noreferrer" class="hover:text-accent transition-colors inline-flex items-center gap-1.5">Join WhatsApp Community</a></li>
608                </ul>
609            </div>
610
611        </div>
612
613        <div class="border-t border-border pt-8 flex flex-col md:flex-row items-center justify-between gap-4">
614            <p class="text-gray-600 text-sm">© 2026 Toolsfinity. All rights reserved. Developed by <a href="https://www.badarbukhari.me" target="_blank" rel="noopener noreferrer" class="text-accent hover:text-accentDim transition-colors">Badar Bukhari</a>.</p>
615            <div class="flex items-center gap-3 text-sm">
616                <a href="https://whatsapp.com/channel/0029Vb7FVyy6BIEdCN9BXh1C" target="_blank" rel="noopener noreferrer" class="inline-flex items-center gap-1.5 text-gray-500 hover:text-accent transition-colors">
617                    <svg class="w-4 h-4" viewBox="0 0 24 24" fill="currentColor"><path d="M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.
617198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 005.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 00-3.48-8.413z"/></svg>
618                    <span>Join WhatsApp Channel</span>
619                </a>
620            </div>
621        </div>
622    </div>
623  </footer>
624
625  <!-- Core Javascript -->
626  
626<script src="/assets/js/main.js" defer></script>
626
627  
628  
628<script>
629      // Initialize Lucide Icons
630      lucide.createIcons();
631  </script>
631
632</body>
633</html>

Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.