Hugging Face's logo

Spaces:
Ansumaninnovation
/
edgetools
Running

App Files Community
Ansumaninnovation commited on
Commit
54e96d8
·
verified ·
1 Parent(s): 6c1663e

Add 2 files

Browse files
Files changed (2) hide show
  1. README.md +6 -4
  2. index.html +851 -19
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Edgetools
3
- emoji: 🏆
4
- colorFrom: gray
5
  colorTo: blue
6
  sdk: static
7
  pinned: false
 
 
8
  ---
9
 
10
- Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
 
1
  ---
2
+ title: edgetools
3
+ emoji: 🐳
4
+ colorFrom: blue
5
  colorTo: blue
6
  sdk: static
7
  pinned: false
8
+ tags:
9
+ - deepsite
10
  ---
11
 
12
+ Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
index.html CHANGED
@@ -1,19 +1,851 @@
1
- <!doctype html>
2
- <html>
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width" />
6
- <title>My static Space</title>
7
- <link rel="stylesheet" href="style.css" />
8
- </head>
9
- <body>
10
- <div class="card">
11
- <h1>Welcome to your static Space!</h1>
12
- <p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
13
- <p>
14
- Also don't forget to check the
15
- <a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
16
- </p>
17
- </div>
18
- </body>
19
- </html>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>MultiTool | Premium All-in-One Web Utility Platform</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
9
+ <style>
10
+ /* Custom CSS for enhancements */
11
+ :root {
12
+ --primary: #3b82f6;
13
+ --primary-hover: #2563eb;
14
+ --secondary: #10b981;
15
+ --accent: #6366f1;
16
+ --dark: #1e293b;
17
+ --light: #f8fafc;
18
+ }
19
+
20
+ body {
21
+ font-family: 'Inter', system-ui, -apple-system, sans-serif;
22
+ background-color: #f8fafc;
23
+ color: #1e293b;
24
+ }
25
+
26
+ .gradient-bg {
27
+ background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%);
28
+ }
29
+
30
+ .tool-card {
31
+ transition: all 0.3s ease;
32
+ transform: translateY(0);
33
+ box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
34
+ }
35
+
36
+ .tool-card:hover {
37
+ transform: translateY(-4px);
38
+ box-shadow: 0 10px 15px rgba(0, 0, 0, 0.1);
39
+ }
40
+
41
+ .tab-active {
42
+ border-bottom: 3px solid var(--primary);
43
+ color: var(--primary);
44
+ font-weight: 600;
45
+ }
46
+
47
+ .text-output {
48
+ min-height: 200px;
49
+ background-color: #f1f5f9;
50
+ border-radius: 0.375rem;
51
+ }
52
+
53
+ .color-preview {
54
+ width: 100%;
55
+ height: 40px;
56
+ border-radius: 0.375rem;
57
+ }
58
+
59
+ /* Animation for tool switching */
60
+ @keyframes fadeIn {
61
+ from { opacity: 0; transform: translateY(10px); }
62
+ to { opacity: 1; transform: translateY(0); }
63
+ }
64
+
65
+ .fade-in {
66
+ animation: fadeIn 0.3s ease-out forwards;
67
+ }
68
+
69
+ /* Custom scrollbar */
70
+ ::-webkit-scrollbar {
71
+ width: 8px;
72
+ height: 8px;
73
+ }
74
+
75
+ ::-webkit-scrollbar-track {
76
+ background: #f1f1f1;
77
+ }
78
+
79
+ ::-webkit-scrollbar-thumb {
80
+ background: #cbd5e1;
81
+ border-radius: 4px;
82
+ }
83
+
84
+ ::-webkit-scrollbar-thumb:hover {
85
+ background: #94a3b8;
86
+ }
87
+ </style>
88
+ </head>
89
+ <body class="min-h-screen flex flex-col">
90
+ <!-- Header -->
91
+ <header class="gradient-bg border-b border-gray-200">
92
+ <div class="container mx-auto px-4 py-4">
93
+ <div class="flex items-center justify-between">
94
+ <div class="flex items-center space-x-2">
95
+ <div class="w-10 h-10 rounded-md bg-blue-500 flex items-center justify-center">
96
+ <i class="fas fa-tools text-white text-xl"></i>
97
+ </div>
98
+ <h1 class="text-2xl font-bold text-blue-600">MultiTool</h1>
99
+ </div>
100
+
101
+ <nav class="hidden md:flex items-center space-x-6">
102
+ <a href="#" class="font-medium text-gray-700 hover:text-blue-600 transition">Tools</a>
103
+ <a href="#" class="font-medium text-gray-700 hover:text-blue-600 transition">Premium</a>
104
+ <a href="#" class="font-medium text-gray-700 hover:text-blue-600 transition">Blog</a>
105
+ <a href="#" class="font-medium text-gray-700 hover:text-blue-600 transition">About</a>
106
+ </nav>
107
+
108
+ <div class="flex items-center space-x-4">
109
+ <button class="hidden md:block px-4 py-2 text-blue-600 font-medium rounded-md hover:bg-blue-50 transition">
110
+ Log In
111
+ </button>
112
+ <button class="px-4 py-2 bg-blue-600 text-white font-medium rounded-md hover:bg-blue-700 transition shadow-sm">
113
+ Get Premium
114
+ </button>
115
+ <button class="md:hidden text-gray-700">
116
+ <i class="fas fa-bars text-xl"></i>
117
+ </button>
118
+ </div>
119
+ </div>
120
+ </div>
121
+ </header>
122
+
123
+ <!-- Hero Section -->
124
+ <section class="gradient-bg py-16">
125
+ <div class="container mx-auto px-4 text-center">
126
+ <h2 class="text-4xl md:text-5xl font-bold text-gray-800 mb-4">Supercharge Your Productivity</h2>
127
+ <p class="text-xl text-gray-600 max-w-2xl mx-auto mb-8">
128
+ All the essential web tools you need, beautifully designed and optimized for maximum efficiency.
129
+ </p>
130
+
131
+ <div class="max-w-md mx-auto relative">
132
+ <input type="text" placeholder="Search for tools..."
133
+ class="w-full px-6 py-4 rounded-full border border-gray-300 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent shadow-sm">
134
+ <button class="absolute right-2 top-2 bg-blue-600 text-white p-2 rounded-full hover:bg-blue-700 transition">
135
+ <i class="fas fa-search"></i>
136
+ </button>
137
+ </div>
138
+
139
+ <div class="mt-8 flex flex-wrap justify-center gap-3 max-w-2xl mx-auto">
140
+ <span class="px-3 py-1 bg-blue-100 text-blue-800 rounded-full text-sm">PDF Tools</span>
141
+ <span class="px-3 py-1 bg-green-100 text-green-800 rounded-full text-sm">Image Processing</span>
142
+ <span class="px-3 py-1 bg-purple-100 text-purple-800 rounded-full text-sm">Text Tools</span>
143
+ <span class="px-3 py-1 bg-yellow-100 text-yellow-800 rounded-full text-sm">Data Converters</span>
144
+ <span class="px-3 py-1 bg-red-100 text-red-800 rounded-full text-sm">Security</span>
145
+ <span class="px-3 py-1 bg-indigo-100 text-indigo-800 rounded-full text-sm">Developers</span>
146
+ </div>
147
+ </div>
148
+ </section>
149
+
150
+ <!-- Main Content -->
151
+ <main class="flex-grow container mx-auto px-4 py-12">
152
+ <!-- Tool Selector Tabs -->
153
+ <div class="mb-8 border-b border-gray-200">
154
+ <div class="flex space-x-8 overflow-x-auto pb-2 scrollbar-hidden">
155
+ <button onclick="switchTool('pdf')" class="tab-button px-1 py-4 font-medium text-gray-500 hover:text-blue-600 whitespace-nowrap transition flex items-center">
156
+ <i class="far fa-file-pdf mr-2"></i> PDF Tools
157
+ </button>
158
+ <button onclick="switchTool('image')" class="tab-button px-1 py-4 font-medium text-gray-500 hover:text-blue-600 whitespace-nowrap transition flex items-center">
159
+ <i class="far fa-image mr-2"></i> Image Tools
160
+ </button>
161
+ <button onclick="switchTool('text')" class="tab-button px-1 py-4 font-medium text-gray-500 hover:text-blue-600 whitespace-nowrap transition flex items-center active">
162
+ <i class="far fa-file-alt mr-2"></i> Text Tools
163
+ </button>
164
+ <button onclick="switchTool('data')" class="tab-button px-1 py-4 font-medium text-gray-500 hover:text-blue-600 whitespace-nowrap transition flex items-center">
165
+ <i class="fas fa-database mr-2"></i> Data Converters
166
+ </button>
167
+ <button onclick="switchTool('security')" class="tab-button px-1 py-4 font-medium text-gray-500 hover:text-blue-600 whitespace-nowrap transition flex items-center">
168
+ <i class="fas fa-lock mr-2"></i> Security
169
+ </button>
170
+ </div>
171
+ </div>
172
+
173
+ <!-- Tool Content -->
174
+ <div id="tool-content" class="fade-in">
175
+ <!-- Text Tools (Default) -->
176
+ <div id="text-tool" class="tool-section">
177
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-8 mb-12">
178
+ <!-- Text Case Converter -->
179
+ <div class="tool-card bg-white rounded-xl shadow-sm p-6">
180
+ <div class="flex items-center justify-between mb-4">
181
+ <h3 class="text-lg font-semibold text-gray-800">Text Case Converter</h3>
182
+ <button class="text-blue-500 hover:text-blue-700">
183
+ <i class="far fa-copy"></i>
184
+ </button>
185
+ </div>
186
+ <textarea class="w-full p-3 border border-gray-300 rounded-md mb-4 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent" placeholder="Enter your text here..." rows="3"></textarea>
187
+ <div class="flex flex-wrap gap-2 mb-4">
188
+ <button class="px-3 py-1 bg-blue-100 text-blue-700 rounded-md text-sm hover:bg-blue-200">UPPERCASE</button>
189
+ <button class="px-3 py-1 bg-blue-100 text-blue-700 rounded-md text-sm hover:bg-blue-200">lowercase</button>
190
+ <button class="px-3 py-1 bg-blue-100 text-blue-700 rounded-md text-sm hover:bg-blue-200">Title Case</button>
191
+ <button class="px-3 py-1 bg-blue-100 text-blue-700 rounded-md text-sm hover:bg-blue-200">Sentence case</button>
192
+ <button class="px-3 py-1 bg-blue-100 text-blue-700 rounded-md text-sm hover:bg-blue-200">camelCase</button>
193
+ <button class="px-3 py-1 bg-blue-100 text-blue-700 rounded-md text-sm hover:bg-blue-200">PascalCase</button>
194
+ </div>
195
+ </div>
196
+
197
+ <!-- Character Counter -->
198
+ <div class="tool-card bg-white rounded-xl shadow-sm p-6">
199
+ <div class="flex items-center justify-between mb-4">
200
+ <h3 class="text-lg font-semibold text-gray-800">Character & Word Counter</h3>
201
+ <button class="text-blue-500 hover:text-blue-700">
202
+ <i class="far fa-copy"></i>
203
+ </button>
204
+ </div>
205
+ <textarea class="w-full p-3 border border-gray-300 rounded-md mb-4 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent" placeholder="Type or paste your text here..." rows="3"></textarea>
206
+ <div class="grid grid-cols-3 gap-4 text-center">
207
+ <div class="bg-gray-50 p-3 rounded-md">
208
+ <div class="text-2xl font-bold text-blue-600" id="char-count">0</div>
209
+ <div class="text-sm text-gray-500">Characters</div>
210
+ </div>
211
+ <div class="bg-gray-50 p-3 rounded-md">
212
+ <div class="text-2xl font-bold text-blue-600" id="word-count">0</div>
213
+ <div class="text-sm text-gray-500">Words</div>
214
+ </div>
215
+ <div class="bg-gray-50 p-3 rounded-md">
216
+ <div class="text-2xl font-bold text-blue-600" id="line-count">0</div>
217
+ <div class="text-sm text-gray-500">Lines</div>
218
+ </div>
219
+ </div>
220
+ </div>
221
+ </div>
222
+
223
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
224
+ <!-- Lorem Ipsum Generator -->
225
+ <div class="tool-card bg-white rounded-xl shadow-sm p-6">
226
+ <h3 class="text-lg font-semibold text-gray-800 mb-4">Lorem Ipsum Generator</h3>
227
+ <div class="grid grid-cols-2 gap-4 mb-4">
228
+ <div>
229
+ <label class="block text-sm font-medium text-gray-700 mb-1">Paragraphs</label>
230
+ <input type="number" min="1" max="20" value="3" class="w-full p-2 border border-gray-300 rounded-md">
231
+ </div>
232
+ <div>
233
+ <label class="block text-sm font-medium text-gray-700 mb-1">Sentences per paragraph</label>
234
+ <input type="number" min="1" max="20" value="5" class="w-full p-2 border border-gray-300 rounded-md">
235
+ </div>
236
+ </div>
237
+ <div class="mb-4">
238
+ <label class="flex items-center">
239
+ <input type="checkbox" class="rounded border-gray-300 text-blue-600 focus:ring-blue-500">
240
+ <span class="ml-2 text-sm text-gray-700">Start with "Lorem ipsum dolor sit amet..."</span>
241
+ </label>
242
+ </div>
243
+ <button class="w-full py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 transition">Generate Text</button>
244
+ </div>
245
+
246
+ <!-- Text Diff Checker -->
247
+ <div class="tool-card bg-white rounded-xl shadow-sm p-6">
248
+ <h3 class="text-lg font-semibold text-gray-800 mb-2">Text Diff Checker</h3>
249
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-4">
250
+ <div>
251
+ <label class="block text-sm font-medium text-gray-700 mb-1">Original Text</label>
252
+ <textarea class="w-full p-2 border border-gray-300 rounded-md text-sm" rows="2"></textarea>
253
+ </div>
254
+ <div>
255
+ <label class="block text-sm font-medium text-gray-700 mb-1">Changed Text</label>
256
+ <textarea class="w-full p-2 border border-gray-300 rounded-md text-sm" rows="2"></textarea>
257
+ </div>
258
+ </div>
259
+ <button class="py-2 px-4 bg-blue-600 text-white rounded-md hover:bg-blue-700 transition">Find Differences</button>
260
+ </div>
261
+ </div>
262
+ </div>
263
+
264
+ <!-- PDF Tools (Hidden by default) -->
265
+ <div id="pdf-tool" class="tool-section hidden">
266
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
267
+ <!-- PDF to Word -->
268
+ <div class="tool-card bg-white rounded-xl shadow-sm p-6">
269
+ <div class="flex items-center mb-4">
270
+ <div class="w-12 h-12 rounded-lg bg-red-100 flex items-center justify-center mr-4">
271
+ <i class="far fa-file-word text-red-600 text-xl"></i>
272
+ </div>
273
+ <h3 class="text-lg font-semibold text-gray-800">PDF to Word Converter</h3>
274
+ </div>
275
+ <div class="border-2 border-dashed border-gray-300 rounded-lg p-8 text-center mb-4">
276
+ <i class="far fa-file-pdf text-4xl text-red-500 mb-3"></i>
277
+ <p class="text-gray-600 mb-3">Drag & drop your PDF file here</p>
278
+ <button class="px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 transition">
279
+ <i class="fas fa-plus mr-2"></i> Select File
280
+ </button>
281
+ <p class="text-xs text-gray-500 mt-3">Up to 50MB • PDF only</p>
282
+ </div>
283
+ <div class="flex justify-between items-center">
284
+ <div>
285
+ <p class="text-xs text-gray-500">Premium users: Unlimited file size</p>
286
+ </div>
287
+ <button class="px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 transition flex items-center">
288
+ <i class="fas fa-download mr-2"></i> Convert to Word
289
+ </button>
290
+ </div>
291
+ </div>
292
+
293
+ <!-- PDF Merge -->
294
+ <div class="tool-card bg-white rounded-xl shadow-sm p-6">
295
+ <div class="flex items-center mb-4">
296
+ <div class="w-12 h-12 rounded-lg bg-blue-100 flex items-center justify-center mr-4">
297
+ <i class="fas fa-file-archive text-blue-600 text-xl"></i>
298
+ </div>
299
+ <h3 class="text-lg font-semibold text-gray-800">PDF Merger</h3>
300
+ </div>
301
+ <div class="space-y-3 mb-4">
302
+ <div class="border border-gray-300 rounded-md p-3 flex items-center justify-between">
303
+ <div class="flex items-center">
304
+ <i class="far fa-file-pdf text-red-500 mr-3"></i>
305
+ <span class="text-sm">document1.pdf</span>
306
+ </div>
307
+ <button class="text-red-500 hover:text-red-700">
308
+ <i class="fas fa-times"></i>
309
+ </button>
310
+ </div>
311
+ <div class="border border-gray-300 rounded-md p-3 flex items-center justify-between">
312
+ <div class="flex items-center">
313
+ <i class="far fa-file-pdf text-red-500 mr-3"></i>
314
+ <span class="text-sm">report2023.pdf</span>
315
+ </div>
316
+ <button class="text-red-500 hover:text-red-700">
317
+ <i class="fas fa-times"></i>
318
+ </button>
319
+ </div>
320
+ <div class="border-2 border-dashed border-gray-300 rounded-md p-3 text-center cursor-pointer hover:bg-gray-50">
321
+ <i class="fas fa-plus text-gray-400 mr-2"></i>
322
+ <span class="text-sm text-gray-600">Add more files</span>
323
+ </div>
324
+ </div>
325
+ <div class="mb-4">
326
+ <label class="block text-sm font-medium text-gray-700 mb-1">Merge order</label>
327
+ <div class="flex items-center space-x-3">
328
+ <button class="px-3 py-1 bg-blue-100 text-blue-700 rounded-md text-sm hover:bg-blue-200">
329
+ <i class="fas fa-sort-alpha-down mr-1"></i> Alphabetical
330
+ </button>
331
+ <button class="px-3 py-1 bg-blue-100 text-blue-700 rounded-md text-sm hover:bg-blue-200">
332
+ <i class="fas fa-sort-numeric-down mr-1"></i> Numeric
333
+ </button>
334
+ <button class="px-3 py-1 bg-blue-100 text-blue-700 rounded-md text-sm hover:bg-blue-200">
335
+ <i class="fas fa-sort-amount-down mr-1"></i> Custom
336
+ </button>
337
+ </div>
338
+ </div>
339
+ <button class="w-full py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 transition flex items-center justify-center">
340
+ <i class="fas fa-file-export mr-2"></i> Merge PDFs
341
+ </button>
342
+ </div>
343
+ </div>
344
+ </div>
345
+
346
+ <!-- Image Tools (Hidden by default) -->
347
+ <div id="image-tool" class="tool-section hidden">
348
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
349
+ <!-- Image Compressor -->
350
+ <div class="tool-card bg-white rounded-xl shadow-sm p-6">
351
+ <div class="flex items-center mb-4">
352
+ <div class="w-12 h-12 rounded-lg bg-purple-100 flex items-center justify-center mr-4">
353
+ <i class="fas fa-compress-alt text-purple-600 text-xl"></i>
354
+ </div>
355
+ <h3 class="text-lg font-semibold text-gray-800">Image Compressor</h3>
356
+ </div>
357
+ <div class="border-2 border-dashed border-gray-300 rounded-lg p-8 text-center mb-4">
358
+ <i class="far fa-image text-4xl text-purple-500 mb-3"></i>
359
+ <p class="text-gray-600 mb-3">Drag & drop your image here</p>
360
+ <button class="px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 transition">
361
+ <i class="fas fa-plus mr-2"></i> Select Image
362
+ </button>
363
+ <p class="text-xs text-gray-500 mt-3">JPG, PNG, WEBP • Up to 20MB</p>
364
+ </div>
365
+ <div class="mb-4">
366
+ <label class="block text-sm font-medium text-gray-700 mb-2">Compression Quality: <span id="quality-value">70</span>%</label>
367
+ <input type="range" min="10" max="95" value="70" class="w-full h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer" id="quality-slider">
368
+ <div class="flex justify-between text-xs text-gray-500 mt-1">
369
+ <span>Smaller file</span>
370
+ <span>Better quality</span>
371
+ </div>
372
+ </div>
373
+ <div class="flex justify-between items-center">
374
+ <div class="text-sm">
375
+ <span class="text-gray-500">Estimated size: </span>
376
+ <span class="font-medium">~1.2MB</span>
377
+ <span class="text-gray-500 ml-2">(50% reduction)</span>
378
+ </div>
379
+ <button class="px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 transition flex items-center">
380
+ <i class="fas fa-compress-alt mr-2"></i> Compress Image
381
+ </button>
382
+ </div>
383
+ </div>
384
+
385
+ <!-- Image Converter -->
386
+ <div class="tool-card bg-white rounded-xl shadow-sm p-6">
387
+ <div class="flex items-center mb-4">
388
+ <div class="w-12 h-12 rounded-lg bg-green-100 flex items-center justify-center mr-4">
389
+ <i class="fas fa-exchange-alt text-green-600 text-xl"></i>
390
+ </div>
391
+ <h3 class="text-lg font-semibold text-gray-800">Image Format Converter</h3>
392
+ </div>
393
+ <div class="border-2 border-dashed border-gray-300 rounded-lg p-8 text-center mb-4">
394
+ <i class="far fa-image text-4xl text-green-500 mb-3"></i>
395
+ <p class="text-gray-600 mb-3">Drag & drop your image here</p>
396
+ <button class="px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 transition">
397
+ <i class="fas fa-plus mr-2"></i> Select Image
398
+ </button>
399
+ <p class="text-xs text-gray-500 mt-3">JPG, PNG, GIF, WEBP • Up to 20MB</p>
400
+ </div>
401
+ <div class="mb-4">
402
+ <label class="block text-sm font-medium text-gray-700 mb-2">Convert to:</label>
403
+ <div class="grid grid-cols-4 gap-2">
404
+ <button class="py-2 px-1 border border-gray-300 rounded-md text-xs font-medium hover:bg-gray-50 focus:border-blue-500 focus:ring-1 focus:ring-blue-500">JPG</button>
405
+ <button class="py-2 px-1 border border-blue-500 bg-blue-50 text-blue-700 rounded-md text-xs font-medium">PNG</button>
406
+ <button class="py-2 px-1 border border-gray-300 rounded-md text-xs font-medium hover:bg-gray-50 focus:border-blue-500 focus:ring-1 focus:ring-blue-500">WEBP</button>
407
+ <button class="py-2 px-1 border border-gray-300 rounded-md text-xs font-medium hover:bg-gray-50 focus:border-blue-500 focus:ring-1 focus:ring-blue-500">GIF</button>
408
+ </div>
409
+ </div>
410
+ <button class="w-full py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 transition flex items-center justify-center">
411
+ <i class="fas fa-exchange-alt mr-2"></i> Convert Image
412
+ </button>
413
+ </div>
414
+ </div>
415
+ </div>
416
+
417
+ <!-- Data Tools (Hidden by default) -->
418
+ <div id="data-tool" class="tool-section hidden">
419
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
420
+ <!-- JSON to CSV -->
421
+ <div class="tool-card bg-white rounded-xl shadow-sm p-6">
422
+ <div class="flex items-center mb-4">
423
+ <div class="w-12 h-12 rounded-lg bg-yellow-100 flex items-center justify-center mr-4">
424
+ <i class="fas fa-code text-yellow-600 text-xl"></i>
425
+ </div>
426
+ <h3 class="text-lg font-semibold text-gray-800">JSON to CSV Converter</h3>
427
+ </div>
428
+ <textarea class="w-full p-3 border border-gray-300 rounded-md mb-4 font-mono text-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent" placeholder='Paste your JSON here (e.g. [{"name":"John","age":30},{"name":"Jane","age":25}])' rows="5"></textarea>
429
+ <div class="flex justify-between items-center mb-4">
430
+ <div class="text-sm text-gray-500">
431
+ <i class="fas fa-info-circle mr-1"></i> Supports nested JSON with flattening
432
+ </div>
433
+ <div>
434
+ <button class="px-3 py-1 bg-blue-100 text-blue-700 rounded-md text-sm hover:bg-blue-200">
435
+ <i class="fas fa-random mr-1"></i> Sample Data
436
+ </button>
437
+ </div>
438
+ </div>
439
+ <button class="w-full py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 transition">
440
+ Convert to CSV
441
+ </button>
442
+ </div>
443
+
444
+ <!-- Base64 Encoder/Decoder -->
445
+ <div class="tool-card bg-white rounded-xl shadow-sm p-6">
446
+ <div class="flex items-center mb-4">
447
+ <div class="w-12 h-12 rounded-lg bg-indigo-100 flex items-center justify-center mr-4">
448
+ <i class="fas fa-key text-indigo-600 text-xl"></i>
449
+ </div>
450
+ <h3 class="text-lg font-semibold text-gray-800">Base64 Encoder/Decoder</h3>
451
+ </div>
452
+ <div class="mb-4">
453
+ <label class="block text-sm font-medium text-gray-700 mb-1">Input</label>
454
+ <textarea class="w-full p-3 border border-gray-300 rounded-md font-mono text-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent" placeholder="Enter text to encode/decode" rows="3"></textarea>
455
+ </div>
456
+ <div class="flex items-center justify-center mb-4">
457
+ <button class="p-2 rounded-full bg-gray-100 hover:bg-gray-200 transition">
458
+ <i class="fas fa-arrow-down text-gray-600"></i>
459
+ <i class="fas fa-arrow-up text-gray-600 mt-1"></i>
460
+ </button>
461
+ </div>
462
+ <div class="mb-4">
463
+ <label class="block text-sm font-medium text-gray-700 mb-1">Output</label>
464
+ <textarea class="w-full p-3 border border-gray-300 rounded-md font-mono text-sm bg-gray-50" rows="3" readonly></textarea>
465
+ </div>
466
+ <div class="grid grid-cols-2 gap-3">
467
+ <button class="py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 transition">
468
+ <i class="fas fa-lock mr-2"></i> Encode
469
+ </button>
470
+ <button class="py-2 bg-gray-600 text-white rounded-md hover:bg-gray-700 transition">
471
+ <i class="fas fa-lock-open mr-2"></i> Decode
472
+ </button>
473
+ </div>
474
+ </div>
475
+ </div>
476
+ </div>
477
+
478
+ <!-- Security Tools (Hidden by default) -->
479
+ <div id="security-tool" class="tool-section hidden">
480
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
481
+ <!-- Password Generator -->
482
+ <div class="tool-card bg-white rounded-xl shadow-sm p-6">
483
+ <div class="flex items-center mb-4">
484
+ <div class="w-12 h-12 rounded-lg bg-amber-100 flex items-center justify-center mr-4">
485
+ <i class="fas fa-key text-amber-600 text-xl"></i>
486
+ </div>
487
+ <h3 class="text-lg font-semibold text-gray-800">Password Generator</h3>
488
+ </div>
489
+ <div class="mb-4">
490
+ <div class="flex items-center justify-between bg-gray-50 p-3 rounded-md mb-3">
491
+ <span id="generated-password" class="font-mono">Tq7$kL9@pXv2</span>
492
+ <button class="text-blue-500 hover:text-blue-700">
493
+ <i class="far fa-copy"></i>
494
+ </button>
495
+ </div>
496
+ <div class="flex justify-between items-center mb-2">
497
+ <span class="text-sm font-medium text-gray-700">Strength:</span>
498
+ <div class="flex items-center">
499
+ <span class="text-sm font-medium text-green-600 mr-1">Strong</span>
500
+ <div class="flex">
501
+ <div class="w-3 h-1 bg-green-500 mx-px rounded-full"></div>
502
+ <div class="w-3 h-1 bg-green-500 mx-px rounded-full"></div>
503
+ <div class="w-3 h-1 bg-green-500 mx-px rounded-full"></div>
504
+ <div class="w-3 h-1 bg-green-500 mx-px rounded-full"></div>
505
+ </div>
506
+ </div>
507
+ </div>
508
+ <input type="range" min="8" max="32" value="16" class="w-full h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer" id="length-slider">
509
+ <div class="flex justify-between text-xs text-gray-500 mt-1">
510
+ <span>8</span>
511
+ <span>12</span>
512
+ <span>16</span>
513
+ <span>20</span>
514
+ <span>24</span>
515
+ <span>28</span>
516
+ <span>32</span>
517
+ </div>
518
+ </div>
519
+ <div class="space-y-2 mb-4">
520
+ <label class="flex items-center">
521
+ <input type="checkbox" checked class="rounded border-gray-300 text-blue-600 focus:ring-blue-500">
522
+ <span class="ml-2 text-sm text-gray-700">Uppercase Letters (A-Z)</span>
523
+ </label>
524
+ <label class="flex items-center">
525
+ <input type="checkbox" checked class="rounded border-gray-300 text-blue-600 focus:ring-blue-500">
526
+ <span class="ml-2 text-sm text-gray-700">Lowercase Letters (a-z)</span>
527
+ </label>
528
+ <label class="flex items-center">
529
+ <input type="checkbox" checked class="rounded border-gray-300 text-blue-600 focus:ring-blue-500">
530
+ <span class="ml-2 text-sm text-gray-700">Numbers (0-9)</span>
531
+ </label>
532
+ <label class="flex items-center">
533
+ <input type="checkbox" checked class="rounded border-gray-300 text-blue-600 focus:ring-blue-500">
534
+ <span class="ml-2 text-sm text-gray-700">Special Characters (!@#$%)</span>
535
+ </label>
536
+ </div>
537
+ <button class="w-full py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 transition">
538
+ <i class="fas fa-redo mr-2"></i> Generate New Password
539
+ </button>
540
+ </div>
541
+
542
+ <!-- Password Strength Checker -->
543
+ <div class="tool-card bg-white rounded-xl shadow-sm p-6">
544
+ <div class="flex items-center mb-4">
545
+ <div class="w-12 h-12 rounded-lg bg-red-100 flex items-center justify-center mr-4">
546
+ <i class="fas fa-shield-alt text-red-600 text-xl"></i>
547
+ </div>
548
+ <h3 class="text-lg font-semibold text-gray-800">Password Strength Checker</h3>
549
+ </div>
550
+ <div class="mb-4">
551
+ <label class="block text-sm font-medium text-gray-700 mb-1">Enter password to check</label>
552
+ <input type="password" class="w-full p-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent" placeholder="Your password...">
553
+ </div>
554
+ <div class="space-y-4 mb-4">
555
+ <div>
556
+ <div class="flex items-center justify-between mb-1">
557
+ <span class="text-sm font-medium text-gray-700">Length</span>
558
+ <span class="text-xs font-medium text-gray-500">0/12</span>
559
+ </div>
560
+ <div class="w-full bg-gray-200 rounded-full h-1">
561
+ <div class="bg-red-500 h-1 rounded-full" style="width: 0%"></div>
562
+ </div>
563
+ </div>
564
+ <div>
565
+ <div class="flex items-center justify-between mb-1">
566
+ <span class="text-sm font-medium text-gray-700">Complexity</span>
567
+ <span class="text-xs font-medium text-gray-500">0/4</span>
568
+ </div>
569
+ <div class="w-full bg-gray-200 rounded-full h-1">
570
+ <div class="bg-red-500 h-1 rounded-full" style="width: 0%"></div>
571
+ </div>
572
+ </div>
573
+ <div>
574
+ <div class="flex items-center justify-between mb-1">
575
+ <span class="text-sm font-medium text-gray-700">Uniqueness</span>
576
+ <span class="text-xs font-medium text-gray-500">Common</span>
577
+ </div>
578
+ <div class="w-full bg-gray-200 rounded-full h-1">
579
+ <div class="bg-red-500 h-1 rounded-full" style="width: 0%"></div>
580
+ </div>
581
+ </div>
582
+ </div>
583
+ <div class="bg-red-50 border border-red-200 rounded-md p-3 text-sm text-red-600 mb-4">
584
+ <i class="fas fa-exclamation-circle mr-1"></i> This password is very weak and can be cracked instantly.
585
+ </div>
586
+ <button class="w-full py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 transition">
587
+ Check Strength
588
+ </button>
589
+ </div>
590
+ </div>
591
+ </div>
592
+ </div>
593
+
594
+ <!-- Premium CTA -->
595
+ <div class="mt-16 bg-gradient-to-r from-blue-500 to-blue-600 rounded-xl p-8 text-white">
596
+ <div class="max-w-4xl mx-auto">
597
+ <div class="flex flex-col md:flex-row items-center">
598
+ <div class="md:w-2/3 mb-6 md:mb-0">
599
+ <h3 class="text-2xl font-bold mb-2">Upgrade to MultiTool Premium</h3>
600
+ <p class="mb-4">Unlock all tools with no file size limits, batch processing, and an ad-free experience.</p>
601
+ <ul class="space-y-2 mb-4">
602
+ <li class="flex items-center">
603
+ <i class="fas fa-check-circle mr-2"></i>
604
+ <span>No advertisements</span>
605
+ </li>
606
+ <li class="flex items-center">
607
+ <i class="fas fa-check-circle mr-2"></i>
608
+ <span>Unlimited file sizes</span>
609
+ </li>
610
+ <li class="flex items-center">
611
+ <i class="fas fa-check-circle mr-2"></i>
612
+ <span>Batch process multiple files</span>
613
+ </li>
614
+ <li class="flex items-center">
615
+ <i class="fas fa-check-circle mr-2"></i>
616
+ <span>Priority cloud processing</span>
617
+ </li>
618
+ </ul>
619
+ </div>
620
+ <div class="md:w-1/3">
621
+ <div class="bg-white rounded-lg p-4 text-gray-800 shadow-lg">
622
+ <div class="text-center">
623
+ <span class="text-xl font-bold">$9</span>
624
+ <span class="text-gray-500">/month</span>
625
+ </div>
626
+ <p class="text-sm text-gray-600 text-center mb-4">or $90/year (save 20%)</p>
627
+ <button class="w-full py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 transition shadow-md">
628
+ Get Premium Now
629
+ </button>
630
+ <p class="text-xs text-gray-500 text-center mt-2">7-day money back guarantee</p>
631
+ </div>
632
+ </div>
633
+ </div>
634
+ </div>
635
+ </div>
636
+
637
+ <!-- More Tools Grid -->
638
+ <div class="mt-16">
639
+ <h2 class="text-2xl font-bold text-gray-800 mb-8">More Useful Tools</h2>
640
+ <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
641
+ <a href="#" class="tool-card bg-white rounded-xl shadow-sm p-6 hover:bg-gray-50 transition">
642
+ <div class="flex items-center mb-3">
643
+ <div class="w-10 h-10 rounded-md bg-blue-100 flex items-center justify-center mr-3">
644
+ <i class="fas fa-globe text-blue-600"></i>
645
+ </div>
646
+ <h3 class="font-medium text-gray-800">URL Shortener</h3>
647
+ </div>
648
+ <p class="text-sm text-gray-600">Create short, memorable links for sharing anywhere.</p>
649
+ </a>
650
+
651
+ <a href="#" class="tool-card bg-white rounded-xl shadow-sm p-6 hover:bg-gray-50 transition">
652
+ <div class="flex items-center mb-3">
653
+ <div class="w-10 h-10 rounded-md bg-purple-100 flex items-center justify-center mr-3">
654
+ <i class="fas fa-qrcode text-purple-600"></i>
655
+ </div>
656
+ <h3 class="font-medium text-gray-800">QR Code Generator</h3>
657
+ </div>
658
+ <p class="text-sm text-gray-600">Generate QR codes for URLs, text, contact info and more.</p>
659
+ </a>
660
+
661
+ <a href="#" class="tool-card bg-white rounded-xl shadow-sm p-6 hover:bg-gray-50 transition">
662
+ <div class="flex items-center mb-3">
663
+ <div class="w-10 h-10 rounded-md bg-green-100 flex items-center justify-center mr-3">
664
+ <i class="fas fa-palette text-green-600"></i>
665
+ </div>
666
+ <h3 class="font-medium text-gray-800">Color Picker</h3>
667
+ </div>
668
+ <p class="text-sm text-gray-600">Get color codes, generate palettes, and check contrast.</p>
669
+ </a>
670
+
671
+ <a href="#" class="tool-card bg-white rounded-xl shadow-sm p-6 hover:bg-gray-50 transition">
672
+ <div class="flex items-center mb-3">
673
+ <div class="w-10 h-10 rounded-md bg-yellow-100 flex items-center justify-center mr-3">
674
+ <i class="fas fa-calendar-alt text-yellow-600"></i>
675
+ </div>
676
+ <h3 class="font-medium text-gray-800">Date Calculator</h3>
677
+ </div>
678
+ <p class="text-sm text-gray-600">Calculate time differences, add/subtract days, and more.</p>
679
+ </a>
680
+
681
+ <a href="#" class="tool-card bg-white rounded-xl shadow-sm p-6 hover:bg-gray-50 transition">
682
+ <div class="flex items-center mb-3">
683
+ <div class="w-10 h-10 rounded-md bg-indigo-100 flex items-center justify-center mr-3">
684
+ <i class="fas fa-code text-indigo-600"></i>
685
+ </div>
686
+ <h3 class="font-medium text-gray-800">Code Formatter</h3>
687
+ </div>
688
+ <p class="text-sm text-gray-600">Beautify/minify HTML, CSS, and JavaScript code.</p>
689
+ </a>
690
+
691
+ <a href="#" class="tool-card bg-white rounded-xl shadow-sm p-6 hover:bg-gray-50 transition">
692
+ <div class="flex items-center mb-3">
693
+ <div class="w-10 h-10 rounded-md bg-pink-100 flex items-center justify-center mr-3">
694
+ <i class="fas fa-ruler-combined text-pink-600"></i>
695
+ </div>
696
+ <h3 class="font-medium text-gray-800">Unit Converter</h3>
697
+ </div>
698
+ <p class="text-sm text-gray-600">Convert between different units of measurement.</p>
699
+ </a>
700
+ </div>
701
+
702
+ <div class="text-center mt-8">
703
+ <button class="px-6 py-3 border border-gray-300 rounded-lg text-blue-600 font-medium hover:bg-gray-50 transition">
704
+ View All 100+ Tools
705
+ </button>
706
+ </div>
707
+ </div>
708
+ </main>
709
+
710
+ <!-- Footer -->
711
+ <footer class="bg-gray-50 border-t border-gray-200 mt-16">
712
+ <div class="container mx-auto px-4 py-12">
713
+ <div class="grid grid-cols-1 md:grid-cols-4 gap-8 mb-8">
714
+ <div>
715
+ <h4 class="text-lg font-semibold text-gray-800 mb-4">MultiTool</h4>
716
+ <p class="text-gray-600 mb-4">Your all-in-one solution for daily web tools. Boosting productivity one click at a time.</p>
717
+ <div class="flex space-x-4">
718
+ <a href="#" class="text-gray-500 hover:text-gray-700">
719
+ <i class="fab fa-twitter"></i>
720
+ </a>
721
+ <a href="#" class="text-gray-500 hover:text-gray-700">
722
+ <i class="fab fa-github"></i>
723
+ </a>
724
+ <a href="#" class="text-gray-500 hover:text-gray-700">
725
+ <i class="fab fa-facebook"></i>
726
+ </a>
727
+ </div>
728
+ </div>
729
+
730
+ <div>
731
+ <h4 class="text-lg font-semibold text-gray-800 mb-4">Tools</h4>
732
+ <ul class="space-y-2">
733
+ <li><a href="#" class="text-gray-600 hover:text-blue-600 transition">PDF Tools</a></li>
734
+ <li><a href="#" class="text-gray-600 hover:text-blue-600 transition">Image Tools</a></li>
735
+ <li><a href="#" class="text-gray-600 hover:text-blue-600 transition">Text Tools</a></li>
736
+ <li><a href="#" class="text-gray-600 hover:text-blue-600 transition">Security Tools</a></li>
737
+ <li><a href="#" class="text-gray-600 hover:text-blue-600 transition">Developer Tools</a></li>
738
+ </ul>
739
+ </div>
740
+
741
+ <div>
742
+ <h4 class="text-lg font-semibold text-gray-800 mb-4">Company</h4>
743
+ <ul class="space-y-2">
744
+ <li><a href="#" class="text-gray-600 hover:text-blue-600 transition">About Us</a></li>
745
+ <li><a href="#" class="text-gray-600 hover:text-blue-600 transition">Careers</a></li>
746
+ <li><a href="#" class="text-gray-600 hover:text-blue-600 transition">Press</a></li>
747
+ <li><a href="#" class="text-gray-600 hover:text-blue-600 transition">Blog</a></li>
748
+ <li><a href="#" class="text-gray-600 hover:text-blue-600 transition">Contact</a></li>
749
+ </ul>
750
+ </div>
751
+
752
+ <div>
753
+ <h4 class="text-lg font-semibold text-gray-800 mb-4">Legal</h4>
754
+ <ul class="space-y-2">
755
+ <li><a href="#" class="text-gray-600 hover:text-blue-600 transition">Terms of Service</a></li>
756
+ <li><a href="#" class="text-gray-600 hover:text-blue-600 transition">Privacy Policy</a></li>
757
+ <li><a href="#" class="text-gray-600 hover:text-blue-600 transition">Cookie Policy</a></li>
758
+ <li><a href="#" class="text-gray-600 hover:text-blue-600 transition">GDPR</a></li>
759
+ <li><a href="#" class="text-gray-600 hover:text-blue-600 transition">DMCA</a></li>
760
+ </ul>
761
+ </div>
762
+ </div>
763
+
764
+ <div class="pt-6 border-t border-gray-200 flex flex-col md:flex-row justify-between items-center">
765
+ <p class="text-gray-500 text-sm mb-4 md:mb-0">© 2023 MultiTool. All rights reserved.</p>
766
+ <div class="flex space-x-6">
767
+ <a href="#" class="text-gray-500 hover:text-gray-700 text-sm">Status</a>
768
+ <a href="#" class="text-gray-500 hover:text-gray-700 text-sm">Sitemap</a>
769
+ <a href="#" class="text-gray-500 hover:text-gray-700 text-sm">Support</a>
770
+ </div>
771
+ </div>
772
+ </div>
773
+ </footer>
774
+
775
+ <script>
776
+ // Tool switching functionality
777
+ function switchTool(toolName) {
778
+ // Hide all tool sections
779
+ document.querySelectorAll('.tool-section').forEach(section => {
780
+ section.classList.add('hidden');
781
+ });
782
+
783
+ // Show selected tool section
784
+ document.getElementById(`${toolName}-tool`).classList.remove('hidden');
785
+
786
+ // Update active tab
787
+ document.querySelectorAll('.tab-button').forEach(button => {
788
+ button.classList.remove('tab-active');
789
+ });
790
+
791
+ // Find clicked button and add active class
792
+ const buttons = document.querySelectorAll('.tab-button');
793
+ for (let i = 0; i < buttons.length; i++) {
794
+ if (buttons[i].textContent.includes(toolName.charAt(0).toUpperCase() + toolName.slice(1)) ||
795
+ (toolName === 'pdf' && buttons[i].textContent.includes('PDF'))) {
796
+ buttons[i].classList.add('tab-active');
797
+ break;
798
+ }
799
+ }
800
+
801
+ // Add fade-in animation
802
+ document.getElementById(`${toolName}-tool`).classList.add('fade-in');
803
+ setTimeout(() => {
804
+ document.getElementById(`${toolName}-tool`).classList.remove('fade-in');
805
+ }, 300);
806
+ }
807
+
808
+ // Set text tool as active by default
809
+ document.addEventListener('DOMContentLoaded', function() {
810
+ document.querySelector('.tab-button:nth-child(3)').classList.add('tab-active');
811
+
812
+ // Character counter functionality
813
+ const textarea = document.querySelector('#text-tool textarea');
814
+ if (textarea) {
815
+ textarea.addEventListener('input', function() {
816
+ const text = this.value;
817
+ document.getElementById('char-count').textContent = text.length;
818
+ document.getElementById('word-count').textContent = text.trim() === '' ? 0 : text.trim().split(/\s+/).length;
819
+ document.getElementById('line-count').textContent = text === '' ? 0 : text.split('\n').length;
820
+ });
821
+ }
822
+
823
+ // Password generator length slider
824
+ const lengthSlider = document.getElementById('length-slider');
825
+ if (lengthSlider) {
826
+ lengthSlider.addEventListener('input', function() {
827
+ document.getElementById('generated-password').textContent = generatePassword(this.value);
828
+ });
829
+ }
830
+
831
+ // Image quality slider
832
+ const qualitySlider = document.getElementById('quality-slider');
833
+ if (qualitySlider) {
834
+ qualitySlider.addEventListener('input', function() {
835
+ document.getElementById('quality-value').textContent = this.value;
836
+ });
837
+ }
838
+ });
839
+
840
+ // Simple password generator for demo
841
+ function generatePassword(length = 12) {
842
+ const chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789!@#$%^&*()';
843
+ let password = '';
844
+ for (let i = 0; i < length; i++) {
845
+ password += chars.charAt(Math.floor(Math.random() * chars.length));
846
+ }
847
+ return password;
848
+ }
849
+ </script>
850
+ <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - <a href="https://enzostvs-deepsite.hf.space?remix=Ansumaninnovation/edgetools" style="color: #fff;text-decoration: underline;" target="_blank" >🧬 Remix</a></p></body>
851
+ </html>