Hugging Face's logo

Spaces:
crackuser
/
ai-tools
Running

App Files Community
crackuser commited on
Commit
157bade
·
verified ·
1 Parent(s): d7d899e

Add 3 files

Browse files
Files changed (3) hide show
  1. README.md +7 -5
  2. index.html +1179 -19
  3. prompts.txt +5 -0
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Ai Tools
3
- emoji: 🔥
4
- colorFrom: pink
5
- colorTo: purple
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: ai-tools
3
+ emoji: 🐳
4
+ colorFrom: green
5
+ colorTo: green
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,1179 @@
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>InstaToolMate - Free All-in-One Utility Tools</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <script src="https://unpkg.com/@lottiefiles/lottie-player@latest/dist/lottie-player.js"></script>
9
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
10
+ <link rel="preconnect" href="https://fonts.googleapis.com">
11
+ <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
12
+ <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap" rel="stylesheet">
13
+
14
+ <script>
15
+ tailwind.config = {
16
+ theme: {
17
+ extend: {
18
+ colors: {
19
+ primary: '#3498db',
20
+ secondary: '#2980b9',
21
+ dark: '#2c3e50',
22
+ light: '#ecf0f1',
23
+ accent: '#9b59b6'
24
+ },
25
+ animation: {
26
+ 'float': 'float 6s ease-in-out infinite',
27
+ 'pulse-slow': 'pulse 4s cubic-bezier(0.4, 0, 0.6, 1) infinite',
28
+ 'rotate-y': 'rotate-y 20s linear infinite'
29
+ },
30
+ keyframes: {
31
+ float: {
32
+ '0%, 100%': { transform: 'translateY(0)' },
33
+ '50%': { transform: 'translateY(-20px)' }
34
+ },
35
+ 'rotate-y': {
36
+ '0%': { transform: 'rotateY(0deg)' },
37
+ '100%': { transform: 'rotateY(360deg)' }
38
+ }
39
+ }
40
+ }
41
+ }
42
+ }
43
+ </script>
44
+
45
+ <style>
46
+ * {
47
+ margin: 0;
48
+ padding: 0;
49
+ box-sizing: border-box;
50
+ }
51
+
52
+ body {
53
+ font-family: 'Poppins', sans-serif;
54
+ background: linear-gradient(135deg, #f9fbfd, #e6f0fa, #d9e8ff);
55
+ color: #2c3e50;
56
+ min-height: 100vh;
57
+ }
58
+
59
+ .tool-card {
60
+ transition: all 0.3s ease;
61
+ transform-style: preserve-3d;
62
+ transform: perspective(1000px) rotateX(0deg) rotateY(0deg);
63
+ box-shadow: 0 20px 30px rgba(0, 0, 0, 0.3);
64
+ border-radius: 15px;
65
+ overflow: hidden;
66
+ }
67
+
68
+ .tool-card:hover {
69
+ transform: perspective(1000px) rotateX(5deg) rotateY(5deg) translateY(-10px);
70
+ box-shadow: 0 25px 40px rgba(0, 0, 0, 0.4);
71
+ }
72
+
73
+ .page-section {
74
+ transform: translateZ(20px);
75
+ }
76
+
77
+ .input-3d {
78
+ box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.1), 0 5px 15px rgba(0, 0, 0, 0.2);
79
+ transition: all 0.3s ease;
80
+ }
81
+
82
+ .input-3d:focus {
83
+ box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.1), 0 5px 15px rgba(255, 255, 255, 0.1);
84
+ }
85
+
86
+ .btn-3d {
87
+ transform: perspective(500px) translateZ(0);
88
+ transition: all 0.2s ease;
89
+ box-shadow: 0 8px 15px rgba(0, 0, 0, 0.3);
90
+ position: relative;
91
+ overflow: hidden;
92
+ }
93
+
94
+ .btn-3d:before {
95
+ content: '';
96
+ position: absolute;
97
+ top: -10px;
98
+ left: -10px;
99
+ right: -10px;
100
+ bottom: -10px;
101
+ background: linear-gradient(45deg, #3498db, #9b59b6, #3498db);
102
+ z-index: -1;
103
+ transform: scale(0.9);
104
+ filter: blur(10px);
105
+ opacity: 0;
106
+ transition: opacity 0.3s ease;
107
+ }
108
+
109
+ .btn-3d:hover {
110
+ transform: perspective(500px) translateZ(10px);
111
+ box-shadow: 0 15px 25px rgba(0, 0, 0, 0.4);
112
+ }
113
+
114
+ .btn-3d:hover:before {
115
+ opacity: 0.6;
116
+ }
117
+
118
+ .resume-preview {
119
+ transform: perspective(2000px) rotateY(5deg);
120
+ box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
121
+ transition: transform 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275);
122
+ }
123
+
124
+ .invoice-paper {
125
+ position: relative;
126
+ transform: perspective(1000px) rotateY(-5deg);
127
+ box-shadow: -10px 15px 30px rgba(0, 0, 0, 0.2);
128
+ background: linear-gradient(to bottom, #ffffff 0%, #f8f8f8 100%);
129
+ }
130
+
131
+ .invoice-paper:before {
132
+ content: '';
133
+ position: absolute;
134
+ top: 0;
135
+ right: 0;
136
+ bottom: 0;
137
+ width: 30px;
138
+ background: linear-gradient(to left, rgba(0,0,0,0.05) 0%, transparent 100%);
139
+ transform-origin: right;
140
+ transform: perspective(1000px) rotateY(-85deg);
141
+ }
142
+
143
+ .qr-container {
144
+ transform-style: preserve-3d;
145
+ perspective: 1000px;
146
+ animation: float 6s ease-in-out infinite;
147
+ }
148
+
149
+ .qr-container-inner {
150
+ transform: rotateX(10deg) rotateY(0deg);
151
+ transition: transform 0.5s ease;
152
+ }
153
+
154
+ .qr-container:hover .qr-container-inner {
155
+ transform: rotateX(10deg) rotateY(20deg);
156
+ }
157
+
158
+ .thumbnail-slider {
159
+ transform-style: preserve-3d;
160
+ perspective: 1000px;
161
+ }
162
+
163
+ .thumbnail-item {
164
+ transform: perspective(1000px) rotateY(var(--rotate)) translateZ(var(--tz)) translateX(var(--tx));
165
+ transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
166
+ box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3);
167
+ filter: brightness(var(--brightness));
168
+ }
169
+
170
+ .floating-element {
171
+ transform: translateZ(20px);
172
+ animation: float 8s ease-in-out infinite;
173
+ }
174
+
175
+ .team-card {
176
+ transform: perspective(1000px) translateZ(20px);
177
+ transition: transform 0.3s ease;
178
+ }
179
+
180
+ .team-card:hover {
181
+ transform: perspective(1000px) translateZ(40px) rotateZ(2deg);
182
+ }
183
+ </style>
184
+ </head>
185
+ <body>
186
+ <!-- Header -->
187
+ <header class="fixed top-0 w-full z-50 py-3 px-4 md:px-8 bg-dark/90 backdrop-blur-sm">
188
+ <div class="max-w-7xl mx-auto flex justify-between items-center">
189
+ <div class="flex items-center space-x-2">
190
+ <div class="w-12 h-12 bg-gradient-to-r from-primary to-accent rounded-xl flex items-center justify-center transform rotate-12">
191
+ <i class="fas fa-tools text-white text-xl"></i>
192
+ </div>
193
+ <h1 class="text-2xl font-bold bg-clip-text text-transparent bg-gradient-to-r from-primary to-accent">InstaToolMate</h1>
194
+ </div>
195
+
196
+ <nav class="hidden md:flex space-x-8">
197
+ <a href="#home" class="nav-link hover:text-primary font-medium transition-colors">Home</a>
198
+ <a href="#tools" class="nav-link hover:text-primary font-medium transition-colors">Tools</a>
199
+ <a href="#blog" class="nav-link hover:text-primary font-medium transition-colors">Blog</a>
200
+ <a href="#about" class="nav-link hover:text-primary font-medium transition-colors">About</a>
201
+ <a href="#contact" class="nav-link hover:text-primary font-medium transition-colors">Contact</a>
202
+ </nav>
203
+
204
+ <div class="flex items-center space-x-4">
205
+ <button class="md:hidden text-white text-2xl">
206
+ <i class="fas fa-bars"></i>
207
+ </button>
208
+ <button class="hidden md:block btn-3d bg-primary text-white py-2 px-6 rounded-lg font-semibold">Sign In</button>
209
+ </div>
210
+ </div>
211
+ </header>
212
+
213
+ <!-- Mobile Navigation -->
214
+ <div class="fixed top-0 left-0 w-full h-full bg-dark/95 backdrop-blur-lg z-40 p-8 hidden" id="mobile-nav">
215
+ <div class="flex justify-end mb-10">
216
+ <button class="text-white text-3xl">
217
+ <i class="fas fa-times"></i>
218
+ </button>
219
+ </div>
220
+ <div class="flex flex-col space-y-8 text-center">
221
+ <a href="#home" class="nav-link text-2xl font-semibold hover:text-primary transition-colors">Home</a>
222
+ <a href="#tools" class="nav-link text-2xl font-semibold hover:text-primary transition-colors">Tools</a>
223
+ <a href="#blog" class="nav-link text-2xl font-semibold hover:text-primary transition-colors">Blog</a>
224
+ <a href="#about" class="nav-link text-2xl font-semibold hover:text-primary transition-colors">About</a>
225
+ <a href="#contact" class="nav-link text-2xl font-semibold hover:text-primary transition-colors">Contact</a>
226
+ <button class="btn-3d bg-primary text-white py-3 px-8 rounded-lg font-semibold mt-8">Sign In</button>
227
+ </div>
228
+ </div>
229
+
230
+ <!-- Main Content -->
231
+ <main>
232
+ <!-- Home Section -->
233
+ <section id="home" class="min-h-screen pt-32 md:pt-24 pb-20 px-4">
234
+ <div class="max-w-7xl mx-auto">
235
+ <div class="grid grid-cols-1 lg:grid-cols-2 gap-16 items-center">
236
+ <div class="text-center lg:text-left">
237
+ <h1 class="text-4xl md:text-5xl lg:text-6xl font-bold mb-6 leading-tight">
238
+ Powerful Free Tools for <br>
239
+ <span class="bg-gradient-to-r from-primary to-accent bg-clip-text text-transparent">Freelancers, Creators & Professionals</span>
240
+ </h1>
241
+ <p class="text-lg md:text-xl text-gray-300 mb-8 max-w-2xl">
242
+ InstaToolMate offers a suite of essential free tools to help you work smarter and faster. Generate invoices, build resumes, create QR codes, download YouTube thumbnails and more — all in one place!
243
+ </p>
244
+ <a href="#tools" class="btn-3d inline-block bg-primary text-white text-lg font-semibold py-3 px-8 rounded-lg mt-4">
245
+ Get Started <i class="fas fa-arrow-right ml-2"></i>
246
+ </a>
247
+ </div>
248
+
249
+ <div class="flex justify-center items-center relative">
250
+ <div class="floating-element absolute top-0 left-0 w-24 h-24 bg-gradient-to-r from-primary to-secondary rounded-full filter blur-2xl opacity-30"></div>
251
+ <div class="floating-element absolute bottom-10 right-0 w-32 h-32 bg-gradient-to-r from-accent to-purple-500 rounded-full filter blur-2xl opacity-30"></div>
252
+
253
+ <div class="grid grid-cols-2 gap-6 relative">
254
+ <!-- Tool Cards with 3D effect -->
255
+ <a href="/invoice" class="tool-card bg-gradient-to-br from-white/20 to-blue-100/20 backdrop-blur-sm p-6 rounded-2xl hover:shadow-xl hover:shadow-blue-100/20 transition-all duration-300">
256
+ <div class="w-16 h-16 bg-gradient-to-r from-blue-400 to-blue-600 rounded-xl flex items-center justify-center mb-4">
257
+ <i class="fas fa-file-invoice text-white text-2xl"></i>
258
+ </div>
259
+ <h3 class="text-xl font-bold mb-2 text-blue-900">Invoice Generator</h3>
260
+ <p class="text-blue-700">Create professional invoices in seconds</p>
261
+ </a>
262
+
263
+ <div class="tool-card bg-gradient-to-br from-[#3498db]/20 to-[#2c3e50]/20 backdrop-blur-sm p-6 rounded-2xl transform rotate-3">
264
+ <div class="w-16 h-16 bg-gradient-to-r from-accent to-purple-600 rounded-xl flex items-center justify-center mb-4">
265
+ <i class="fas fa-file-alt text-white text-2xl"></i>
266
+ </div>
267
+ <h3 class="text-xl font-bold mb-2">Resume Builder</h3>
268
+ <p class="text-gray-300">Craft the perfect resume and cover letter</p>
269
+ </div>
270
+
271
+ <div class="tool-card bg-gradient-to-br from-[#3498db]/20 to-[#2c3e50]/20 backdrop-blur-sm p-6 rounded-2xl transform -rotate-2">
272
+ <div class="w-16 h-16 bg-gradient-to-r from-green-500 to-teal-500 rounded-xl flex items-center justify-center mb-4">
273
+ <i class="fas fa-qrcode text-white text-2xl"></i>
274
+ </div>
275
+ <h3 class="text-xl font-bold mb-2">QR Generator</h3>
276
+ <p class="text-gray-300">Generate QR codes for any content</p>
277
+ </div>
278
+
279
+ <div class="tool-card bg-gradient-to-br from-[#3498db]/20 to-[#2c3e50]/20 backdrop-blur-sm p-6 rounded-2xl transform rotate-6">
280
+ <div class="w-16 h-16 bg-gradient-to-r from-red-500 to-orange-500 rounded-xl flex items-center justify-center mb-4">
281
+ <i class="fab fa-youtube text-white text-2xl"></i>
282
+ </div>
283
+ <h3 class="text-xl font-bold mb-2">Thumbnail Downloader</h3>
284
+ <p class="text-gray-300">Download YouTube thumbnails instantly</p>
285
+ </div>
286
+ </div>
287
+ </div>
288
+ </div>
289
+ </div>
290
+ </section>
291
+
292
+ <!-- Tools Overview -->
293
+ <section id="tools" class="py-20 px-4 bg-dark/80">
294
+ <div class="max-w-7xl mx-auto">
295
+ <div class="text-center mb-16">
296
+ <h2 class="text-3xl md:text-4xl font-bold mb-4">All-in-One Free Utility Tools</h2>
297
+ <p class="text-lg text-gray-300 max-w-3xl mx-auto">
298
+ InstaToolMate offers a comprehensive suite of tools designed to make your work easier and more efficient. All tools are free to use with no sign-up required.
299
+ </p>
300
+ </div>
301
+
302
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
303
+ <!-- Invoice Generator Card -->
304
+ <div class="tool-card bg-gradient-to-br from-[#2c3e50] to-[#1a2530] backdrop-blur-sm p-6 rounded-2xl">
305
+ <div class="w-16 h-16 bg-gradient-to-r from-primary to-secondary rounded-xl flex items-center justify-center mb-4">
306
+ <i class="fas fa-file-invoice text-white text-2xl"></i>
307
+ </div>
308
+ <h3 class="text-2xl font-bold mb-3">Invoice Generator</h3>
309
+ <p class="text-gray-300 mb-6">Create professional invoices for your clients with auto calculations for hours, rates, and taxes.</p>
310
+ <a href="#invoice" class="text-primary font-medium flex items-center">
311
+ Use Tool <i class="fas fa-arrow-right ml-2 text-sm"></i>
312
+ </a>
313
+ </div>
314
+
315
+ <!-- Resume Builder Card -->
316
+ <div class="tool-card bg-gradient-to-br from-[#2c3e50] to-[#1a2530] backdrop-blur-sm p-6 rounded-2xl">
317
+ <div class="w-16 h-16 bg-gradient-to-r from-accent to-purple-600 rounded-xl flex items-center justify-center mb-4">
318
+ <i class="fas fa-file-alt text-white text-2xl"></i>
319
+ </div>
320
+ <h3 class="text-2xl font-bold mb-3">Resume & Cover Letter Builder</h3>
321
+ <p class="text-gray-300 mb-6">Build polished resumes and compelling cover letters that stand out to employers.</p>
322
+ <a href="#resume" class="text-primary font-medium flex items-center">
323
+ Use Tool <i class="fas fa-arrow-right ml-2 text-sm"></i>
324
+ </a>
325
+ </div>
326
+
327
+ <!-- QR Generator Card -->
328
+ <div class="tool-card bg-gradient-to-br from-[#2c3e50] to-[#1a2530] backdrop-blur-sm p-6 rounded-2xl">
329
+ <div class="w-16 h-16 bg-gradient-to-r from-green-500 to-teal-500 rounded-xl flex items-center justify-center mb-4">
330
+ <i class="fas fa-qrcode text-white text-2xl"></i>
331
+ </div>
332
+ <h3 class="text-2xl font-bold mb-3">QR Code Generator</h3>
333
+ <p class="text-gray-300 mb-6">Generate QR codes for URLs, text, WiFi credentials, and more in various designs.</p>
334
+ <a href="#qr" class="text-primary font-medium flex items-center">
335
+ Use Tool <i class="fas fa-arrow-right ml-2 text-sm"></i>
336
+ </a>
337
+ </div>
338
+
339
+ <!-- Thumbnail Downloader Card -->
340
+ <div class="tool-card bg-gradient-to-br from-[#2c3e50] to-[#1a2530] backdrop-blur-sm p-6 rounded-2xl">
341
+ <div class="w-16 h-16 bg-gradient-to-r from-red-500 to-orange-500 rounded-xl flex items-center justify-center mb-4">
342
+ <i class="fab fa-youtube text-white text-2xl"></i>
343
+ </div>
344
+ <h3 class="text-2xl font-bold mb-3">YouTube Thumbnail Downloader</h3>
345
+ <p class="text-gray-300 mb-6">Download high-quality thumbnails from any YouTube video in multiple resolutions.</p>
346
+ <a href="#thumbnail" class="text-primary font-medium flex items-center">
347
+ Use Tool <i class="fas fa-arrow-right ml-2 text-sm"></i>
348
+ </a>
349
+ </div>
350
+
351
+ <!-- Text Rewriter Card -->
352
+ <div class="tool-card bg-gradient-to-br from-[#2c3e50] to-[#1a2530] backdrop-blur-sm p-6 rounded-2xl">
353
+ <div class="w-16 h-16 bg-gradient-to-r from-yellow-500 to-amber-500 rounded-xl flex items-center justify-center mb-4">
354
+ <i class="fas fa-edit text-white text-2xl"></i>
355
+ </div>
356
+ <h3 class="text-2xl font-bold mb-3">Text Rewriter & Summarizer</h3>
357
+ <p class="text-gray-300 mb-6">Rewrite or summarize text with different tones (formal, casual, academic).</p>
358
+ <a href="#rewriter" class="text-primary font-medium flex items-center">
359
+ Use Tool <i class="fas fa-arrow-right ml-2 text-sm"></i>
360
+ </a>
361
+ </div>
362
+
363
+ <!-- Privacy Policy Generator Card -->
364
+ <div class="tool-card bg-gradient-to-br from-[#2c3e50] to-[#1a2530] backdrop-blur-sm p-6 rounded-2xl">
365
+ <div class="w-16 h-16 bg-gradient-to-r from-purple-500 to-indigo-600 rounded-xl flex items-center justify-center mb-4">
366
+ <i class="fas fa-shield-alt text-white text-2xl"></i>
367
+ </div>
368
+ <h3 class="text-2xl font-bold mb-3">Privacy Policy Generator</h3>
369
+ <p class="text-gray-300 mb-6">Create customized privacy policies for websites, apps and businesses.</p>
370
+ <a href="#privacy" class="text-primary font-medium flex items-center">
371
+ Use Tool <i class="fas fa-arrow-right ml-2 text-sm"></i>
372
+ </a>
373
+ </div>
374
+ </div>
375
+ </div>
376
+ </section>
377
+
378
+ <!-- Invoice Generator -->
379
+ <section id="invoice" class="py-20 px-4">
380
+ <div class="max-w-7xl mx-auto">
381
+ <div class="text-center mb-16">
382
+ <h2 class="text-3xl md:text-4xl font-bold mb-4">Invoice Generator</h2>
383
+ <p class="text-lg text-gray-300 max-w-3xl mx-auto">
384
+ Create professional invoices in seconds with our free generator. Just fill in your details and download as PDF.
385
+ </p>
386
+ </div>
387
+
388
+ <div class="bg-dark/80 backdrop-blur-lg rounded-3xl overflow-hidden shadow-2xl">
389
+ <div class="grid grid-cols-1 lg:grid-cols-2 gap-8 p-6 md:p-8">
390
+ <!-- Form Column -->
391
+ <div class="page-section p-6 bg-gradient-to-br from-[#1a2530]/90 to-[#0c131d]/90 rounded-xl">
392
+ <div class="mb-8">
393
+ <h3 class="text-xl font-bold mb-4 flex items-center">
394
+ <i class="fas fa-address-card text-primary mr-3"></i>
395
+ Client Information
396
+ </h3>
397
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
398
+ <div>
399
+ <label class="block text-gray-300 mb-2">Client Name</label>
400
+ <input type="text" class="input-3d w-full bg-[#192230] border border-gray-700 rounded-lg py-3 px-4 text-white">
401
+ </div>
402
+ <div>
403
+ <label class="block text-gray-300 mb-2">Client Email</label>
404
+ <input type="email" class="input-3d w-full bg-[#192230] border border-gray-700 rounded-lg py-3 px-4 text-white">
405
+ </div>
406
+ </div>
407
+ </div>
408
+
409
+ <div class="mb-8">
410
+ <h3 class="text-xl font-bold mb-4 flex items-center">
411
+ <i class="fas fa-receipt text-primary mr-3"></i>
412
+ Services
413
+ </h3>
414
+
415
+ <div class="space-y-4" id="services-container">
416
+ <div class="grid grid-cols-12 gap-3">
417
+ <div class="col-span-5">
418
+ <input type="text" placeholder="Description" class="input-3d w-full bg-[#192230] border border-gray-700 rounded-lg py-2 px-3 text-white">
419
+ </div>
420
+ <div class="col-span-2">
421
+ <input type="number" placeholder="Qty" value="1" min="1" class="input-3d w-full bg-[#192230] border border-gray-700 rounded-lg py-2 px-3 text-white">
422
+ </div>
423
+ <div class="col-span-3">
424
+ <input type="number" placeholder="Rate ($)" value="50" min="0" class="input-3d w-full bg-[#192230] border border-gray-700 rounded-lg py-2 px-3 text-white">
425
+ </div>
426
+ <div class="col-span-2 flex items-center justify-center">
427
+ <span class="font-semibold">$50.00</span>
428
+ </div>
429
+ </div>
430
+ </div>
431
+
432
+ <button class="mt-3 text-primary flex items-center">
433
+ <i class="fas fa-plus-circle mr-2"></i> Add another service
434
+ </button>
435
+ </div>
436
+
437
+ <div class="mb-8">
438
+ <h3 class="text-xl font-bold mb-4 flex items-center">
439
+ <i class="fas fa-percentage text-primary mr-3"></i>
440
+ Taxes & Discounts
441
+ </h3>
442
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
443
+ <div>
444
+ <label class="block text-gray-300 mb-2">Tax Rate (%)</label>
445
+ <input type="number" value="10" min="0" max="100" class="input-3d w-full bg-[#192230] border border-gray-700 rounded-lg py-3 px-4 text-white">
446
+ </div>
447
+ <div>
448
+ <label class="block text-gray-300 mb-2">Discount ($)</label>
449
+ <input type="number" value="0" min="0" class="input-3d w-full bg-[#192230] border border-gray-700 rounded-lg py-3 px-4 text-white">
450
+ </div>
451
+ </div>
452
+ </div>
453
+
454
+ <div class="flex flex-wrap gap-3">
455
+ <button class="btn-3d bg-primary text-white font-semibold py-3 px-6 rounded-lg flex-1 md:flex-none">
456
+ Generate Invoice
457
+ </button>
458
+ <button class="btn-3d bg-accent text-white font-semibold py-3 px-6 rounded-lg flex-1 md:flex-none">
459
+ Download PDF
460
+ </button>
461
+ <button class="btn-3d bg-gray-600 text-white font-semibold py-3 px-6 rounded-lg">
462
+ Reset
463
+ </button>
464
+ </div>
465
+ </div>
466
+
467
+ <!-- Preview Column -->
468
+ <div class="flex items-center justify-center relative">
469
+ <div class="invoice-paper bg-white p-8 rounded-xl w-full max-w-md">
470
+ <div class="flex justify-between items-start mb-10">
471
+ <div>
472
+ <h2 class="text-3xl font-bold text-gray-800">INVOICE</h2>
473
+ <p class="text-gray-600">#INV-2023-001</p>
474
+ </div>
475
+ <div class="text-right">
476
+ <p class="text-gray-600">Date: <span class="text-gray-800">Aug 23, 2023</span></p>
477
+ <p class="text-gray-600">Due: <span class="text-gray-800">Sep 6, 2023</span></p>
478
+ </div>
479
+ </div>
480
+
481
+ <div class="mb-8">
482
+ <p class="text-gray-600 text-sm mb-1">BILL TO</p>
483
+ <h3 class="text-xl font-bold text-gray-800">John Smith</h3>
484
+ <p class="text-gray-600">john@example.com</p>
485
+ </div>
486
+
487
+ <div class="border-t border-gray-300 pt-4 mb-4">
488
+ <div class="grid grid-cols-5 gap-4 mb-3 font-semibold text-gray-700">
489
+ <div class="col-span-3">Description</div>
490
+ <div class="text-center">Qty</div>
491
+ <div class="text-right">Amount</div>
492
+ </div>
493
+
494
+ <div class="grid grid-cols-5 gap-4 py-2 border-b border-gray-100 text-gray-600">
495
+ <div class="col-span-3">Web Design</div>
496
+ <div class="text-center">1</div>
497
+ <div class="text-right">$50.00</div>
498
+ </div>
499
+
500
+ <div class="pt-6">
501
+ <div class="flex justify-between py-2">
502
+ <span class="text-gray-600">Subtotal</span>
503
+ <span class="text-gray-800 font-semibold">$50.00</span>
504
+ </div>
505
+ <div class="flex justify-between py-2">
506
+ <span class="text-gray-600">Tax (10%)</span>
507
+ <span class="text-gray-800 font-semibold">$5.00</span>
508
+ </div>
509
+ <div class="flex justify-between py-2 border-t border-gray-300 text-lg">
510
+ <span class="text-gray-800 font-bold">Total</span>
511
+ <span class="text-gray-800 font-bold">$55.00</span>
512
+ </div>
513
+ </div>
514
+ </div>
515
+ </div>
516
+ </div>
517
+ </div>
518
+ </div>
519
+ </div>
520
+ </section>
521
+
522
+ <!-- YouTube Thumbnail Downloader -->
523
+ <section class="py-20 px-4 max-w-7xl mx-auto">
524
+ <div class="text-center mb-16">
525
+ <h1 class="text-4xl font-bold text-blue-900 mb-4">YouTube Thumbnail Downloader</h1>
526
+ <p class="text-xl text-blue-700 max-w-3xl mx-auto">Download high-quality thumbnails from any YouTube video in multiple resolutions.</p>
527
+ </div>
528
+
529
+ <div class="bg-white/80 backdrop-blur-lg rounded-3xl shadow-2xl p-8 mb-16">
530
+ <div class="mb-8">
531
+ <label class="block text-blue-800 text-lg mb-4 font-medium">YouTube Video URL</label>
532
+ <div class="flex gap-3">
533
+ <input type="url" placeholder="https://www.youtube.com/watch?v=..."
534
+ class="input-3d flex-1 bg-white border-2 border-blue-100 rounded-lg py-3 px-4 text-blue-900">
535
+ <button class="btn-3d bg-blue-500 hover:bg-blue-600 text-white font-semibold py-3 px-6 rounded-lg transition-all">
536
+ <i class="fab fa-youtube mr-2"></i> Get Thumbnails
537
+ </button>
538
+ </div>
539
+ </div>
540
+
541
+ <div id="thumbnails-container" class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
542
+ <!-- Thumbnails will appear here -->
543
+ <div class="flex justify-center items-center p-6 border-2 border-dashed border-blue-200 rounded-xl">
544
+ <p class="text-blue-400">Enter a YouTube URL above to view thumbnails</p>
545
+ </div>
546
+ </div>
547
+ </div>
548
+
549
+ <div class="bg-white/80 backdrop-blur-lg rounded-2xl p-8">
550
+ <h3 class="text-2xl font-bold mb-6 text-blue-900">How to Download YouTube Thumbnails</h3>
551
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
552
+ <div class="bg-blue-50/50 p-6 rounded-lg border border-blue-100">
553
+ <div class="bg-blue-500/10 text-blue-800 w-12 h-12 rounded-full flex items-center justify-center mb-4 mx-auto">
554
+ <span class="text-xl font-bold">1</span>
555
+ </div>
556
+ <h4 class="font-semibold text-blue-900 mb-2 text-center">Copy YouTube URL</h4>
557
+ <p class="text-blue-700 text-center">Copy the URL of any YouTube video from your browser</p>
558
+ </div>
559
+ <div class="bg-blue-50/50 p-6 rounded-lg border border-blue-100">
560
+ <div class="bg-blue-500/10 text-blue-800 w-12 h-12 rounded-full flex items-center justify-center mb-4 mx-auto">
561
+ <span class="text-xl font-bold">2</span>
562
+ </div>
563
+ <h4 class="font-semibold text-blue-900 mb-2 text-center">Paste & Click</h4>
564
+ <p class="text-blue-700 text-center">Paste the URL and click the Get Thumbnails button</p>
565
+ </div>
566
+ <div class="bg-blue-50/50 p-6 rounded-lg border border-blue-100">
567
+ <div class="bg-blue-500/10 text-blue-800 w-12 h-12 rounded-full flex items-center justify-center mb-4 mx-auto">
568
+ <span class="text-xl font-bold">3</span>
569
+ </div>
570
+ <h4 class="font-semibold text-blue-900 mb-2 text-center">Download</h4>
571
+ <p class="text-blue-700 text-center">Click any thumbnail image to download the high-res version</p>
572
+ </div>
573
+ </div>
574
+ </div>
575
+ </section>
576
+ <div class="max-w-7xl mx-auto">
577
+ <div class="text-center mb-16">
578
+ <h2 class="text-3xl md:text-4xl font-bold mb-4">QR Code Generator</h2>
579
+ <p class="text-lg text-gray-300 max-w-3xl mx-auto">
580
+ Create QR codes for URLs, text, WiFi credentials and more. Download the PNG to use anywhere.
581
+ </p>
582
+ </div>
583
+
584
+ <div class="bg-dark/80 backdrop-blur-lg rounded-3xl overflow-hidden shadow-2xl">
585
+ <div class="grid grid-cols-1 lg:grid-cols-2 gap-8 p-6 md:p-8">
586
+ <!-- Form Column -->
587
+ <div class="page-section p-6 bg-gradient-to-br from-[#1a2530]/90 to-[#0c131d]/90 rounded-xl">
588
+ <div class="mb-8">
589
+ <label class="block text-gray-300 mb-4">Enter URL or Text</label>
590
+ <input type="text" id="qr-input" placeholder="https://example.com" class="input-3d w-full bg-[#192230] border border-gray-700 rounded-lg py-3 px-4 text-white mb-4">
591
+
592
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-6">
593
+ <div>
594
+ <label class="block text-gray-300 mb-2">Color</label>
595
+ <select class="input-3d w-full bg-[#192230] border border-gray-700 rounded-lg py-3 px-4 text-white">
596
+ <option value="#2c3e50">Dark Blue</option>
597
+ <option value="#3498db">Blue</option>
598
+ <option value="#e74c3c">Red</option>
599
+ <option value="#2ecc71">Green</option>
600
+ <option value="#9b59b6">Purple</option>
601
+ </select>
602
+ </div>
603
+ <div>
604
+ <label class="block text-gray-300 mb-2">Size</label>
605
+ <select class="input-3d w-full bg-[#192230] border border-gray-700 rounded-lg py-3 px-4 text-white">
606
+ <option value="200">200px</option>
607
+ <option value="300">300px</option>
608
+ <option value="400">400px</option>
609
+ </select>
610
+ </div>
611
+ </div>
612
+ </div>
613
+
614
+ <div class="flex flex-wrap gap-3">
615
+ <button onclick="generateQR()" class="btn-3d bg-primary text-white font-semibold py-3 px-6 rounded-lg">
616
+ Generate QR Code
617
+ </button>
618
+ <button id="download-btn" disabled class="btn-3d bg-accent text-white font-semibold py-3 px-6 rounded-lg" onclick="downloadQR()">
619
+ Download PNG
620
+ </button>
621
+ <button class="btn-3d bg-gray-600 text-white font-semibold py-3 px-6 rounded-lg">
622
+ Reset
623
+ </button>
624
+ </div>
625
+ </div>
626
+
627
+ <!-- Preview Column -->
628
+ <div class="flex items-center justify-center relative">
629
+ <div class="qr-container flex flex-col items-center justify-center">
630
+ <div id="qrcode" class="bg-white p-4 rounded-xl mb-6 flex items-center justify-center min-h-[200px] min-w-[200px]">
631
+ <p class="text-gray-500">QR Code will appear here</p>
632
+ </div>
633
+ <p class="text-gray-400 max-w-xs text-center">Scan this QR code with any smartphone camera or QR reader app</p>
634
+ </div>
635
+ </div>
636
+ </div>
637
+ </div>
638
+
639
+ <!-- How to Use Section -->
640
+ <div class="mt-16 max-w-3xl mx-auto bg-dark/80 backdrop-blur-lg rounded-2xl p-8">
641
+ <h3 class="text-2xl font-bold mb-6 text-center">How to Use This Tool</h3>
642
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
643
+ <div class="flex items-start">
644
+ <div class="bg-primary/20 text-primary w-10 h-10 rounded-full flex items-center justify-center mr-4 mt-1">
645
+ 1
646
+ </div>
647
+ <div>
648
+ <h4 class="font-semibold mb-2">Enter Content</h4>
649
+ <p class="text-gray-400">Type or paste the URL or text you want to encode.</p>
650
+ </div>
651
+ </div>
652
+ <div class="flex items-start">
653
+ <div class="bg-primary/20 text-primary w-10 h-10 rounded-full flex items-center justify-center mr-4 mt-1">
654
+ 2
655
+ </div>
656
+ <div>
657
+ <h4 class="font-semibold mb-2">Customize</h4>
658
+ <p class="text-gray-400">Select color and size preferences (optional).</p>
659
+ </div>
660
+ </div>
661
+ <div class="flex items-start">
662
+ <div class="bg-primary/20 text-primary w-10 h-10 rounded-full flex items-center justify-center mr-4 mt-1">
663
+ 3
664
+ </div>
665
+ <div>
666
+ <h4 class="font-semibold mb-2">Generate</h4>
667
+ <p class="text-gray-400">Click the Generate button to create your QR code.</p>
668
+ </div>
669
+ </div>
670
+ <div class="flex items-start">
671
+ <div class="bg-primary/20 text-primary w-10 h-10 rounded-full flex items-center justify-center mr-4 mt-1">
672
+ 4
673
+ </div>
674
+ <div>
675
+ <h4 class="font-semibold mb-2">Download</h4>
676
+ <p class="text-gray-400">Download the PNG image to use in your projects.</p>
677
+ </div>
678
+ </div>
679
+ </div>
680
+ </div>
681
+ </div>
682
+ </section>
683
+
684
+ <!-- Text Rewriter & Summarizer -->
685
+ <section class="py-20 px-4 max-w-7xl mx-auto">
686
+ <div class="text-center mb 0-16">
687
+ <h1 class="text-4xl font-bold text-blue-900 mb-4">Text Rewriter & Summarizer</h1>
688
+ <p class="text-xl text-blue-700 max-w-3xl mx-auto">Enhance your text by rewriting for clarity or summarizing the key points.</p>
689
+ </div>
690
+
691
+ <div class="bg-white/80 backdrop-blur-lg rounded-3xl shadow-2xl p-8 mb-16">
692
+ <div class="grid grid-cols-1 lg:grid-cols-2 gap-8">
693
+ <div>
694
+ <label class="block text-blue-800 text-lg mb-4 font-medium">Original Text</label>
695
+ <textarea class="input-3d w-full h-64 bg-white border-2 border-blue-100 rounded-lg py-3 px-4 text-blue-900"
696
+ placeholder="Paste your text here..."></textarea>
697
+
698
+ <div class="flex flex-wrap gap-3 mt-4">
699
+ <button class="btn-3d bg-blue-500 hover:bg-blue-600 text-white font-semibold py-3 px-6 rounded-lg">
700
+ <i class="fas fa-edit mr-2"></i> Rewrite Text
701
+ </button>
702
+ <button class="btn-3d bg-blue-400 hover:bg-blue-500 text-white font-semibold py-3 px-6 rounded-lg">
703
+ <i class="fas fa-compress-alt mr-2"></i> Summarize
704
+ </button>
705
+ <button class="btn-3d bg-blue-300 hover:bg-blue-400 text-white font-semibold py-3 px-6 rounded-lg">
706
+ <i class="fas fa-redo mr-2"></i> Reset
707
+ </button>
708
+ </div>
709
+ </div>
710
+
711
+ <div>
712
+ <label class="block text-blue-800 text-lg mb-4 font-medium">Result</label>
713
+ <div class="input-3d w-full h-64 bg-white border-2 border-blue-100 rounded-lg py-3 px-4 text-blue-900 overflow-auto">
714
+ <p class="text-blue-400 italic">Your rewritten or summarized text will appear here...</p>
715
+ </div>
716
+
717
+ <div class="flex flex-wrap gap-3 mt-4">
718
+ <button class="btn-3d bg-blue-400 hover:bg-blue-500 text-white font-semibold py-3 px-6 rounded-lg">
719
+ <i class="far fa-copy mr-2"></i> Copy to Clipboard
720
+ </button>
721
+ <button class="btn-3d bg-blue-300 hover:bg-blue-400 text-white font-semibold py-3 px-6 rounded-lg">
722
+ <i class="fas fa-download mr-2"></i> Download as TXT
723
+ </button>
724
+ </div>
725
+ </div>
726
+ </div>
727
+ </div>
728
+
729
+ <div class="bg-white/80 backdrop-blur-lg rounded-2xl p-8">
730
+ <h3 class="text-2xl font-bold mb-6 text-blue-900">How to Use This Tool</h3>
731
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
732
+ <div class="flex items-start">
733
+ <div class="bg-blue-500/10 text-blue-800 w-10 h-10 rounded-full flex items-center justify-center mr-4 mt-1">
734
+ 1
735
+ </div>
736
+ <div>
737
+ <h4 class="font-semibold text-blue-900 mb-2">Paste Your Text</h4>
738
+ <p class="text-blue-700">Copy and paste any text into the input box (articles, essays, reports, etc.)</p>
739
+ </div>
740
+ </div>
741
+ <div class="flex items-start">
742
+ <div class="bg-blue-500/10 text-blue-800 w-10 h-10 rounded-full flex items-center justify-center mr-4 mt-1">
743
+ 2
744
+ </div>
745
+ <div>
746
+ <h4 class="font-semibold text-blue-900 mb-2">Choose Action</h4>
747
+ <p class="text-blue-700">Click "Rewrite" to rephrase or "Summarize" to condense the text</p>
748
+ </div>
749
+ </div>
750
+ <div class="flex items-start">
751
+ <div class="bg-blue-500/10 text-blue-800 w-10 h-10 rounded-full flex items-center justify-center mr-4 mt-1">
752
+ 3
753
+ </div>
754
+ <div>
755
+ <h4 class="font-semibold text-blue-900 mb-2">Review Output</h4>
756
+ <p class="text-blue-700">Check the results box for your rewritten/summarized version</p>
757
+ </div>
758
+ </div>
759
+ <div class="flex items-start">
760
+ <div class="bg-blue-500/10 text-blue-800 w-10 h-10 rounded-full flex items-center justify-center mr-4 mt-1">
761
+ 4
762
+ </div>
763
+ <div>
764
+ <h4 class="font-semibold text-blue-900 mb-2">Copy or Download</h4>
765
+ <p class="text-blue-700">Use the buttons to copy to clipboard or download as text file</p>
766
+ </div>
767
+ </div>
768
+ </div>
769
+ </div>
770
+ </section>
771
+ <div class="max-w-7xl mx-auto">
772
+ <div class="text-center mb-16">
773
+ <h2 class="text-3xl md:text-4xl font-bold mb-4">Resume & Cover Letter Builder</h2>
774
+ <p class="text-lg text-gray-300 max-w-3xl mx-auto">
775
+ Create a professional resume and cover letter with our easy-to-use builder. Download as PDF and land your dream job!
776
+ </p>
777
+ </div>
778
+
779
+ <div class="bg-dark/80 backdrop-blur-lg rounded-3xl overflow-hidden shadow-2xl">
780
+ <div class="grid grid-cols-1 lg:grid-cols-2 gap-8 p-6 md:p-8">
781
+ <!-- Form Column -->
782
+ <div class="page-section">
783
+ <div class="mb-6 flex">
784
+ <button class="py-3 px-6 bg-primary text-white font-semibold rounded-l-lg">Resume</button>
785
+ <button class="py-3 px-6 bg-gray-700 text-gray-300 font-semibold rounded-r-lg">Cover Letter</button>
786
+ </div>
787
+
788
+ <div class="bg-gradient-to-br from-[#1a2530]/90 to-[#0c131d]/90 rounded-xl p-6">
789
+ <h3 class="text-xl font-bold mb-6 flex items-center">
790
+ <i class="fas fa-user text-primary mr-3"></i>
791
+ Personal Information
792
+ </h3>
793
+
794
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-6">
795
+ <div>
796
+ <label class="block text-gray-300 mb-2">Full Name</label>
797
+ <input type="text" class="input-3d w-full bg-[#192230] border border-gray-700 rounded-lg py-3 px-4 text-white">
798
+ </div>
799
+ <div>
800
+ <label class="block text-gray-300 mb-2">Job Title</label>
801
+ <input type="text" class="input-3d w-full bg-[#192230] border border-gray-700 rounded-lg py-3 px-4 text-white">
802
+ </div>
803
+ </div>
804
+
805
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-6">
806
+ <div>
807
+ <label class="block text-gray-300 mb-2">Email</label>
808
+ <input type="email" class="input-3d w-full bg-[#192230] border border-gray-700 rounded-lg py-3 px-4 text-white">
809
+ </div>
810
+ <div>
811
+ <label class="block text-gray-300 mb-2">Phone</label>
812
+ <input type="tel" class="input-3d w-full bg-[#192230] border border-gray-700 rounded-lg py-3 px-4 text-white">
813
+ </div>
814
+ </div>
815
+
816
+ <div class="mb-6">
817
+ <label class="block text-gray-300 mb-2">About Me</label>
818
+ <textarea class="input-3d w-full bg-[#192230] border border-gray-700 rounded-lg py-3 px-4 text-white h-32"></textarea>
819
+ </div>
820
+
821
+ <div class="flex flex-wrap gap-3 mt-8">
822
+ <button class="btn-3d bg-primary text-white font-semibold py-3 px-6 rounded-lg">
823
+ Preview Resume
824
+ </button>
825
+ <button class="btn-3d bg-accent text-white font-semibold py-3 px-6 rounded-lg">
826
+ Download PDF
827
+ </button>
828
+ </div>
829
+ </div>
830
+ </div>
831
+
832
+ <!-- Preview Column -->
833
+ <div class="flex items-center justify-center relative">
834
+ <div class="resume-preview bg-white p-8 rounded-xl w-full max-w-md">
835
+ <div class="text-center mb-6">
836
+ <h2 class="text-2xl font-bold text-gray-800">Jane Doe</h2>
837
+ <p class="text-primary">Senior Web Designer</p>
838
+ <div class="flex justify-center space-x-3 mt-3 text-gray-600">
839
+ <span>jane@example.com</span>
840
+ <span>•</span>
841
+ <span>(123) 456-7890</span>
842
+ </div>
843
+ </div>
844
+
845
+ <div class="mb-6">
846
+ <h3 class="text-lg font-bold text-gray-800 border-b border-gray-300 pb-1 mb-3">Summary</h3>
847
+ <p class="text-sm text-gray-600">Creative web designer with 5+ years of experience in creating responsive and user-friendly websites. Proficient in HTML, CSS, JavaScript, and modern frameworks.</p>
848
+ </div>
849
+
850
+ <div class="mb-6">
851
+ <h3 class="text-lg font-bold text-gray-800 border-b border-gray-300 pb-1 mb-3">Experience</h3>
852
+ <div class="mb-3">
853
+ <div class="flex justify-between">
854
+ <span class="font-semibold">Lead Web Designer</span>
855
+ <span class="text-sm text-gray-600">2019-Present</span>
856
+ </div>
857
+ <p class="text-sm text-gray-600">Creative Solutions Inc.</p>
858
+ </div>
859
+
860
+ <div>
861
+ <div class="flex justify-between">
862
+ <span class="font-semibold">Web Designer</span>
863
+ <span class="text-sm text-gray-600">2016-2019</span>
864
+ </div>
865
+ <p class="text-sm text-gray-600">Digital Media Studio</p>
866
+ </div>
867
+ </div>
868
+
869
+ <div>
870
+ <h3 class="text-lg font-bold text-gray-800 border-b border-gray-300 pb-1 mb-3">Education</h3>
871
+ <div class="flex justify-between">
872
+ <span class="font-semibold">BFA in Web Design</span>
873
+ <span class="text-sm text-gray-600">2012-2016</span>
874
+ </div>
875
+ <p class="text-sm text-gray-600">University of Design</p>
876
+ </div>
877
+ </div>
878
+ </div>
879
+ </div>
880
+ </div>
881
+ </div>
882
+ </section>
883
+
884
+ <!-- Privacy Policy Generator -->
885
+ <section id="privacy" class="py-20 px-4 bg-[#0a0f15]">
886
+ <div class="max-w-7xl mx-auto">
887
+ <div class="text-center mb-16">
888
+ <h2 class="text-3xl md:text-4xl font-bold mb-4">Privacy Policy Generator</h2>
889
+ <p class="text-lg text-gray-300 max-w-3xl mx-auto">
890
+ Generate a custom privacy policy for your website or app in minutes. Just fill in your details and copy or download the policy.
891
+ </p>
892
+ </div>
893
+
894
+ <div class="bg-dark/80 backdrop-blur-lg rounded-3xl overflow-hidden shadow-2xl">
895
+ <div class="grid grid-cols-1 lg:grid-cols-2 gap-8 p-6 md:p-8">
896
+ <!-- Form Column -->
897
+ <div class="page-section p-6 bg-gradient-to-br from-[#1a2530]/90 to-[#0c131d]/90 rounded-xl">
898
+ <div class="mb-8">
899
+ <h3 class="text-xl font-bold mb-4 flex items-center">
900
+ <i class="fas fa-info-circle text-primary mr-3"></i>
901
+ Business Information
902
+ </h3>
903
+ <div class="grid grid-cols-1 gap-4">
904
+ <div>
905
+ <label class="block text-gray-300 mb-2">Website/App Name</label>
906
+ <input type="text" class="input-3d w-full bg-[#192230] border border-gray-700 rounded-lg py-3 px-4 text-white">
907
+ </div>
908
+ <div>
909
+ <label class="block text-gray-300 mb-2">Contact Email</label>
910
+ <input type="email" class="input-3d w-full bg-[#192230] border border-gray-700 rounded-lg py-3 px-4 text-white">
911
+ </div>
912
+ <div>
913
+ <label class="block text-gray-300 mb-2">Website URL</label>
914
+ <input type="url" class="input-3d w-full bg-[#192230] border border-gray-700 rounded-lg py-3 px-4 text-white">
915
+ </div>
916
+ </div>
917
+ </div>
918
+
919
+ <div class="mb-8">
920
+ <h3 class="text-xl font-bold mb-4 flex items-center">
921
+ <i class="fas fa-check-circle text-primary mr-3"></i>
922
+ Policy Options
923
+ </h3>
924
+
925
+ <div class="space-y-4 mb-6">
926
+ <div class="flex items-center">
927
+ <input type="checkbox" id="collect-data" class="mr-3 h-5 w-5 rounded border-gray-700 bg-[#192230] text-primary">
928
+ <label for="collect-data" class="text-gray-300">Collects personal data</label>
929
+ </div>
930
+ <div class="flex items-center">
931
+ <input type="checkbox" id="use-cookies" class="mr-3 h-5 w-5 rounded border-gray-700 bg-[#192230] text-primary">
932
+ <label for="use-cookies" class="text-gray-300">Uses cookies</label>
933
+ </div>
934
+ <div class="flex items-center">
935
+ <input type="checkbox" id="third-party" class="mr-3 h-5 w-5 rounded border-gray-700 bg-[#192230] text-primary">
936
+ <label for="third-party" class="text-gray-300">Shares with third parties</label>
937
+ </div>
938
+ <div class="flex items-center">
939
+ <input type="checkbox" id="user-accounts" class="mr-3 h-5 w-5 rounded border-gray-700 bg-[#192230] text-primary">
940
+ <label for="user-accounts" class="text-gray-300">Has user accounts</label>
941
+ </div>
942
+ </div>
943
+ </div>
944
+
945
+ <div class="flex flex-wrap gap-3">
946
+ <button class="btn-3d bg-primary text-white font-semibold py-3 px-6 rounded-lg">
947
+ Generate Policy
948
+ </button>
949
+ <button class="btn-3d bg-accent text-white font-semibold py-3 px-6 rounded-lg">
950
+ Copy to Clipboard
951
+ </button>
952
+ <button class="btn-3d bg-gray-600 text-white font-semibold py-3 px-6 rounded-lg">
953
+ Download TXT
954
+ </button>
955
+ </div>
956
+ </div>
957
+
958
+ <!-- Preview Column -->
959
+ <div class="flex items-center justify-center relative">
960
+ <div class="invoice-paper bg-white p-8 rounded-xl w-full max-w-md">
961
+ <h2 class="text-2xl font-bold text-gray-800 mb-4">Privacy Policy</h2>
962
+ <div class="text-xs text-gray-600 leading-relaxed">
963
+ <p class="mb-4">Last Updated: June 15, 2023</p>
964
+
965
+ <p class="font-semibold mb-1">1. Introduction</p>
966
+ <p class="mb-4">Welcome to MyWebsite ("we," "our," or "us"). This Privacy Policy explains how we collect, use, disclose, and safeguard your information when you visit our website.</p>
967
+
968
+ <p class="font-semibold mb-1">2. Data Collection</p>
969
+ <p class="mb-4">We collect personal data that you provide to us voluntarily when you register for an account, subscribe to our newsletter, or contact us.</p>
970
+
971
+ <p class="font-semibold mb-1">3. How We Use Your Data</p>
972
+ <p class="mb-4">Your information helps us provide and improve our services, communicate with you, and for security and fraud prevention.</p>
973
+
974
+ <p class="font-semibold mb-1">4. Cookies</p>
975
+ <p class="mb-4">We use cookies to enhance your experience on our website. You can set your browser to refuse all or some browser cookies.</p>
976
+
977
+ <p class="font-semibold mb-1">5. Contact Us</p>
978
+ <p>For questions about this policy, email us at contact@mywebsite.com.</p>
979
+ </div>
980
+ </div>
981
+ </div>
982
+ </div>
983
+ </div>
984
+
985
+ <!-- How to Use Section -->
986
+ <div class="mt-16 max-w-3xl mx-auto bg-dark/80 backdrop-blur-lg rounded-2xl p-8">
987
+ <h3 class="text-2xl font-bold mb-6 text-center">How to Use This Tool</h3>
988
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
989
+ <div class="flex items-start">
990
+ <div class="bg-primary/20 text-primary w-10 h-10 rounded-full flex items-center justify-center mr-4 mt-1">
991
+ 1
992
+ </div>
993
+ <div>
994
+ <h4 class="font-semibold mb-2">Enter Your Details</h4>
995
+ <p class="text-gray-400">Fill in your business name, website URL, and contact email.</p>
996
+ </div>
997
+ </div>
998
+ <div class="flex items-start">
999
+ <div class="bg-primary/20 text-primary w-10 h-10 rounded-full flex items-center justify-center mr-4 mt-1">
1000
+ 2
1001
+ </div>
1002
+ <div>
1003
+ <h4 class="font-semibold mb-2">Select Options</h4>
1004
+ <p class="text-gray-400">Check all the boxes that apply to your website or app.</p>
1005
+ </div>
1006
+ </div>
1007
+ <div class="flex items-start">
1008
+ <div class="bg-primary/20 text-primary w-10 h-10 rounded-full flex items-center justify-center mr-4 mt-1">
1009
+ 3
1010
+ </div>
1011
+ <div>
1012
+ <h4 class="font-semibold mb-2">Generate Policy</h4>
1013
+ <p class="text-gray-400">Click the Generate button to create your custom policy.</p>
1014
+ </div>
1015
+ </div>
1016
+ <div class="flex items-start">
1017
+ <div class="bg-primary/20 text-primary w-10 h-10 rounded-full flex items-center justify-center mr-4 mt-1">
1018
+ 4
1019
+ </div>
1020
+ <div>
1021
+ <h4 class="font-semibold mb-2">Copy & Place</h4>
1022
+ <p class="text-gray-400">Copy the text and place it on your website's Privacy Policy page.</p>
1023
+ </div>
1024
+ </div>
1025
+ </div>
1026
+ </div>
1027
+ </div>
1028
+ </section>
1029
+
1030
+ <!-- Footer -->
1031
+ <footer class="bg-[#0a0f15] py-12 px-4">
1032
+ <div class="max-w-7xl mx-auto">
1033
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
1034
+ <div>
1035
+ <div class="flex items-center space-x-2 mb-6">
1036
+ <div class="w-10 h-10 bg-gradient-to-r from-primary to-accent rounded-xl flex items-center justify-center">
1037
+ <i class="fas fa-tools text-white"></i>
1038
+ </div>
1039
+ <h2 class="text-xl font-bold">InstaToolMate</h2>
1040
+ </div>
1041
+ <p class="text-gray-400 mb-6">
1042
+ Free all-in-one utility tools for freelancers, creators, and professionals. Everything you need in one place.
1043
+ </p>
1044
+ <div class="flex space-x-4">
1045
+ <a href="#" class="text-gray-400 hover:text-white text-lg"><i class="fab fa-facebook"></i></a>
1046
+ <a href="#" class="text-gray-400 hover:text-white text-lg"><i class="fab fa-twitter"></i></a>
1047
+ <a href="#" class="text-gray-400 hover:text-white text-lg"><i class="fab fa-instagram"></i></a>
1048
+ <a href="#" class="text-gray-400 hover:text-white text-lg"><i class="fab fa-linkedin"></i></a>
1049
+ </div>
1050
+ </div>
1051
+
1052
+ <div>
1053
+ <h3 class="text-lg font-semibold mb-6">Tools</h3>
1054
+ <ul class="space-y-3">
1055
+ <li><a href="#invoice" class="text-gray-400 hover:text-primary">Invoice Generator</a></li>
1056
+ <li><a href="#resume" class="text-gray-400 hover:text-primary">Resume Builder</a></li>
1057
+ <li><a href="#qr" class="text-gray-400 hover:text-primary">QR Code Generator</a></li>
1058
+ <li><a href="#thumbnail" class="text-gray-400 hover:text-primary">Thumbnail Downloader</a></li>
1059
+ <li><a href="#rewriter" class="text-gray-400 hover:text-primary">Text Rewriter</a></li>
1060
+ </ul>
1061
+ </div>
1062
+
1063
+ <div>
1064
+ <h3 class="text-lg font-semibold mb-6">Quick Links</h3>
1065
+ <ul class="space-y-3">
1066
+ <li><a href="#home" class="text-gray-400 hover:text-primary">Home</a></li>
1067
+ <li><a href="#tools" class="text-gray-400 hover:text-primary">All Tools</a></li>
1068
+ <li><a href="#blog" class="text-gray-400 hover:text-primary">Blog</a></li>
1069
+ <li><a href="#about" class="text-gray-400 hover:text-primary">About Us</a></li>
1070
+ <li><a href="#contact" class="text-gray-400 hover:text-primary">Contact</a></li>
1071
+ </ul>
1072
+ </div>
1073
+
1074
+ <div>
1075
+ <h3 class="text-lg font-semibold mb-6">Newsletter</h3>
1076
+ <p class="text-gray-400 mb-4">
1077
+ Subscribe to get updates on new tools and features.
1078
+ </p>
1079
+ <div class="flex">
1080
+ <input type="email" placeholder="Your email" class="py-3 px-4 bg-[#1a2530] text-white rounded-l-lg w-full focus:outline-none">
1081
+ <button class="bg-primary hover:bg-secondary text-white py-3 px-4 rounded-r-lg">
1082
+ <i class="fas fa-paper-plane"></i>
1083
+ </button>
1084
+ </div>
1085
+ </div>
1086
+ </div>
1087
+
1088
+ <div class="border-t border-gray-800 mt-10 pt-8 text-center text-gray-500">
1089
+ <p>&copy; 2023 InstaToolMate. All rights reserved.</p>
1090
+ </div>
1091
+ </div>
1092
+ </footer>
1093
+ </main>
1094
+
1095
+ <!-- QR Code Script -->
1096
+ <script src="https://cdn.rawgit.com/davidshimjs/qrcodejs/gh-pages/qrcode.min.js"></script>
1097
+
1098
+ <script>
1099
+ // QR Code Generator Functionality
1100
+ function generateQR() {
1101
+ const text = document.getElementById('qr-input').value.trim();
1102
+ if (!text) {
1103
+ alert('Please enter text or URL');
1104
+ return;
1105
+ }
1106
+
1107
+ const qrc = document.getElementById('qrcode');
1108
+ qrc.innerHTML = '';
1109
+
1110
+ new QRCode(qrc, {
1111
+ text: text,
1112
+ width: 200,
1113
+ height: 200,
1114
+ colorDark: '#2c3e50',
1115
+ colorLight: '#ffffff',
1116
+ correctLevel: QRCode.CorrectLevel.H
1117
+ });
1118
+
1119
+ document.getElementById('download-btn').disabled = false;
1120
+ }
1121
+
1122
+ function downloadQR() {
1123
+ const canvas = document.querySelector('#qrcode canvas');
1124
+ const link = document.createElement('a');
1125
+ link.download = 'qrcode.png';
1126
+ link.href = canvas.toDataURL('image/png');
1127
+ link.click();
1128
+ }
1129
+
1130
+ // Mobile navigation toggle
1131
+ document.querySelector('.fa-bars').addEventListener('click', function() {
1132
+ document.getElementById('mobile-nav').classList.remove('hidden');
1133
+ document.body.classList.add('overflow-hidden');
1134
+ });
1135
+
1136
+ document.querySelector('.fa-times').addEventListener('click', function() {
1137
+ document.getElementById('mobile-nav').classList.add('hidden');
1138
+ document.body.classList.remove('overflow-hidden');
1139
+ });
1140
+
1141
+ // Smooth scrolling for navigation links
1142
+ document.querySelectorAll('a.nav-link').forEach(anchor => {
1143
+ anchor.addEventListener('click', function(e) {
1144
+ e.preventDefault();
1145
+
1146
+ document.getElementById('mobile-nav').classList.add('hidden');
1147
+ document.body.classList.remove('overflow-hidden');
1148
+
1149
+ const targetId = this.getAttribute('href').substring(1);
1150
+ const targetSection = document.getElementById(targetId);
1151
+
1152
+ window.scrollTo({
1153
+ top: targetSection.offsetTop - 80,
1154
+ behavior: 'smooth'
1155
+ });
1156
+ });
1157
+ });
1158
+
1159
+ // Tool card hover effect
1160
+ const toolCards = document.querySelectorAll('.tool-card');
1161
+ toolCards.forEach(card => {
1162
+ card.addEventListener('mousemove', (e) => {
1163
+ const rect = card.getBoundingClientRect();
1164
+ const x = e.clientX - rect.left;
1165
+ const y = e.clientY - rect.top;
1166
+
1167
+ const rotateY = 15 * ((x - rect.width / 2) / rect.width);
1168
+ const rotateX = -15 * ((y - rect.height / 2) / rect.height);
1169
+
1170
+ card.style.transform = `perspective(1000px) rotateX(${rotateX}deg) rotateY(${rotateY}deg) translateY(-10px)`;
1171
+ });
1172
+
1173
+ card.addEventListener('mouseleave', () => {
1174
+ card.style.transform = 'perspective(1000px) rotateX(0) rotateY(0) translateY(0)';
1175
+ });
1176
+ });
1177
+ </script>
1178
+ <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=crackuser/ai-tools" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
1179
+ </html>
prompts.txt ADDED
@@ -0,0 +1,5 @@
 
 
 
 
 
 
1
+ Project Name: InstaToolMate — All-in-One Free Utility Tools Style: Modern 3D style, sleek UI with shadows, smooth animations, interactive buttons, futuristic but clean look, responsive design for desktop & mobile. Website Structure & Pages: 1. Home Page: Show 3D-style floating cards/icons for each tool (Invoice Generator, Resume Builder, QR Code Generator, YouTube Thumbnail Downloader, Text Rewriter/Summarizer) arranged in a grid or carousel with subtle hover animations and shadows. Short tagline: “Powerful Free Tools for Freelancers, Creators & Professionals” CTA Button: “Get Started” → Scrolls down to tools section or redirects to Tools page. Clean header with logo and navigation (Home, Tools, Blog, About, Contact). 2. Tools Overview Page: Grid layout listing all tools with 3D icons and short descriptions. Each tool card clickable → navigates to the dedicated tool page. 3. Tool Detail Pages (One page per tool): A) Invoice Generator Full 3D style form with input fields: Client Name, Service Description, Hours, Rate, Taxes, Total. Buttons: “Generate PDF”, “Download Invoice”, “Reset Form”. Real-time preview of invoice in a 3D styled paper effect to the right or below form. Responsive & mobile-friendly. Instruction section: “How to create and send your invoice.” B) Resume & Cover Letter Builder Multi-step 3D form with fields: Name, Contact Info, Skills, Work Experience, Education. Buttons: “Preview Resume”, “Download PDF”, “Reset”. Separate tab or toggle for Cover Letter with editable template. Real-time 3D page flip effect preview of resume. Tips & best practices section below form. C) QR Code Generator Input box for URL/text/WiFi credentials. Buttons: “Generate QR Code”, “Download PNG”, “Reset”. 3D rotating QR code preview with subtle animations. Instruction: “Scan with any QR reader or smartphone camera.” D) YouTube Thumbnail Downloader Input box for YouTube video URL. Button: “Fetch Thumbnails”. Display 3D carousel slider with all available thumbnails. Buttons below each thumbnail: “Download” & “Set as Profile Pic”. Instruction: “Enter valid YouTube link, choose and download thumbnail.” E) Text Rewriter / Summarizer Textarea input with character count and word count display. Buttons: “Rewrite Text”, “Summarize Text”, “Reset”. Option dropdown for tone selection: Formal, Casual, Academic. Output box with 3D text effect and copy-to-clipboard button. Instruction: “Paste your text and choose rewrite or summarize.” 4. Blog Page: Clean 3D card layout for blog posts covering tool usage tips, freelancing advice, SEO tips, content creation hacks, and legal tips. Each blog card has 3D hover effect and clickable title. Pagination or infinite scroll. 5. About Page: 3D layered team images or illustration. Mission statement and vision in modern text layout with subtle animations. 6. Contact Page: 3D style contact form with fields: Name, Email, Message. Submit button with hover animation. Embedded Google Map with 3D style pin. Additional Features: Smooth page transitions with fade or slide effect in 3D space. Responsive for desktop, tablet, and mobile with consistent 3D styling. SEO optimized meta tags for each page. Fast loading animations and minimalistic color palette (shades of blue, white, and silver). Footer with social links, newsletter signup, and quick links. Keywords & SEO Tags: “Free online invoice generator” “Build professional resumes online” “Generate QR codes instantly” “Download YouTube video thumbnails” “AI powered text rewriter and summarizer” “Best free utility tools for freelancers”
2
+ Build a modern, fully responsive 3D-style web application called InstaToolMate that provides six free online utility tools for creators, freelancers, and professionals. The design should include floating 3D cards, hover animations, soft shadows, and a clean white and blue futuristic color scheme. 🔹 The Home Page should display six interactive 3D cards — each representing a tool with a title, icon, and button that opens a fully working dedicated page for that tool. ✅ Tools to include (each must open in its own working page): Invoice Generator – Input: client details, service details, amount. Output: downloadable PDF invoice. Resume & Cover Letter Builder – Multi-step form. Output: PDF preview and download. QR Code Generator – Input: text or URL. Output: live preview of QR Code + Download PNG button. YouTube Thumbnail Downloader – Input: YouTube video URL. Output: fetch all thumbnails and allow downloading. Text Rewriter / Summarizer – Input: textarea. Output: rewritten or summarized version with copy-to-clipboard button. Privacy Policy Generator – Form-based input (website name, email, platform used). Output: editable privacy policy text with copy/download option. 🔸 Each tool page should include: Title + short tool description Working input fields and functional buttons (e.g., Generate, Download, Copy) 3D or layered layout with interactive feedback A responsive layout for both desktop and mobile A short guide: “How to use this tool” 📄 Additional Pages: Blog: Grid layout of SEO tips, resume tips, freelancing, tool tutorials (each blog card has 3D hover effect) About: 3D text section about the platform's mission Contact: Form with Name, Email, and Message. “Submit” button must work 🔧 Site Features: Sticky top navigation menu with links to Home, Tools, Blog, About, Contact Floating 3D tool cards for visual appeal Footer with quick links, newsletter signup, and social media icons SEO meta titles and descriptions for each page Fast loading, optimized structure Make sure QR Code Generator, YouTube Thumbnail Downloader, and Text Rewriter are fully working and open on separate pages with complete functionality.
3
+ Create a modern, responsive 3D-style utility website called InstaToolMate that offers six different free online tools. The homepage should display each tool as a floating 3D card with hover effects. Each card must link to a separate, fully working page with that tool’s features. The entire website should follow a clean white and light blue color palette with futuristic, soft-glow 3D effects and animation. ✅ Six Tools to Include (each tool must open in its own working page): Invoice Generator – Input for service and client info, output PDF download. Resume & Cover Letter Builder – Multi-step form for resume and cover letter, with real-time preview and downloadable output. QR Code Generator – User inputs text/URL, clicks “Generate,” shows QR code preview and allows PNG download. YouTube Thumbnail Downloader – Input: YouTube video URL → fetch all thumbnail versions (max resolution). Add download buttons below each thumbnail. Must open in a separate, working page. Text Rewriter & Summarizer – Input: user pastes text, then clicks either “Rewrite” or “Summarize.” Shows rephrased or summarized version in an output box. Include copy-to-clipboard and reset buttons. This tool must be fully functional and hosted on a separate page. Privacy Policy Generator – Form-based input (site name, email, tools used), output editable policy text with download or copy option. 🔧 Each Tool Page Must Include: Unique page path (like /invoice, /resume, /qr-code, /thumbnail, /rewriter, /privacy) Tool title, short description, clean UI, and functional input/output Clear instructions or “How to Use” guide Full 3D interactive layout (hover effects, soft shadows, subtle motion) Must be responsive across mobile, tablet, and desktop 📄 Additional Pages: Blog – 3D-style card layout of articles (tips on SEO, freelancing, using tools) About – Mission & story in layered visual style Contact – Simple contact form (Name, Email, Message) with working “Submit” button 🔗 Navigation & Footer: Sticky top navigation bar: Home | Tools | Blog | About | Contact Footer with social links, quick links to all 6 tools, and newsletter signup 🧠 Important Instructions: YouTube Thumbnail Downloader and Text Rewriter MUST each have their own fully working pages with complete functionality. Do not combine tools on the same page. Each tool must have a dedicated page. Focus on visual consistency, usability, and speed across all tools.
4
+ Build a responsive, modern 3D-style utility website called InstaToolMate. The homepage must showcase six interactive 3D tool cards with titles, icons, and working buttons that navigate to separate, dedicated pages using correct URL paths — not hash links like #tool-name. Each tool must have a proper path-based URL like /invoice, /resume, /qr-code, /thumbnail, /text-rewriter, and /privacy-policy. Do not use anchor tags or scroll links like #qr. ✅ Tools and Their Correct URLs (each should have a fully working page): Invoice Generator → /invoice Resume & Cover Letter Builder → /resume QR Code Generator → /qr-code YouTube Thumbnail Downloader → /thumbnail Text Rewriter & Summarizer → /text-rewriter Privacy Policy Generator → /privacy-policy 🔹 Each tool page must include: A page title and short usage description Working form inputs with buttons like “Generate,” “Download,” “Copy” A clean 3D layout with hover effects and subtle animations Instructions below the tool section Mobile and desktop responsive design 🔸 Other Pages: Blog (URL: /blog) with articles shown in 3D card layout About (URL: /about) with platform mission and visuals Contact (URL: /contact) with a working form 🔧 Navigation & Sitewide Layout: Sticky top navbar: Home | Tools | Blog | About | Contact Homepage must use actual links (href="/tool-name") for each button Footer with quick links to each tool page and social icons 🎨 Style: 3D floating cards and layered interface White and soft blue color palette Smooth transitions and lightweight performance Optimized for SEO and fast loading 🧠 Ensure every homepage tool card uses correct internal page routing, and each tool page works independently.
5
+ Build a responsive, modern 3D-style utility website called InstaToolMate. The homepage must showcase six interactive 3D tool cards with titles, icons, and working buttons that navigate to separate, dedicated pages using correct URL paths — not hash links like #tool-name. Each tool must have a proper path-based URL like /invoice, /resume, /qr-code, /thumbnail, /text-rewriter, and /privacy-policy. Do not use anchor tags or scroll links like #qr. ✅ Tools and Their Correct URLs (each should have a fully working page): Invoice Generator → /invoice Resume & Cover Letter Builder → /resume QR Code Generator → /qr-code YouTube Thumbnail Downloader → /thumbnail Text Rewriter & Summarizer → /text-rewriter Privacy Policy Generator → /privacy-policy 🔹 Each tool page must include: A page title and short usage description Working form inputs with buttons like “Generate,” “Download,” “Copy” A clean 3D layout with hover effects and subtle animations Instructions below the tool section Mobile and desktop responsive design 🔸 Other Pages: Blog (URL: /blog) with articles shown in 3D card layout About (URL: /about) with platform mission and visuals Contact (URL: /contact) with a working form 🔧 Navigation & Sitewide Layout: Sticky top navbar: Home | Tools | Blog | About | Contact Homepage must use actual links (href="/tool-name") for each button Footer with quick links to each tool page and social icons 🎨 Style: 3D floating cards and layered interface White and soft blue color palette Smooth transitions and lightweight performance Optimized for SEO and fast loading 🧠 Ensure every homepage tool card uses correct internal page routing, and each tool page works independently.