Hugging Face's logo

Spaces:
mclarktechdir1
/
deepsite-project-7bdcb
Running

App Files Community
mclarktechdir1 commited on
Commit
6e8e09e
·
verified ·
1 Parent(s): b3346f2

Initial DeepSite commit

Browse files
Files changed (3) hide show
  1. README.md +9 -6
  2. index.html +530 -19
  3. script.js +388 -0
README.md CHANGED
@@ -1,10 +1,13 @@
1
  ---
2
- title: Deepsite Project 7bdcb
3
- emoji: 🔥
4
- colorFrom: indigo
5
- colorTo: pink
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: DeepSite Project
3
+ colorFrom: purple
4
+ colorTo: yellow
 
5
  sdk: static
6
+ emoji: ✨
7
+ tags:
8
+ - deepsite-v4
9
  ---
10
 
11
+ # DeepSite Project
12
+
13
+ This project has been created with [DeepSite](https://deepsite.hf.co) AI Vibe Coding.
index.html CHANGED
@@ -1,19 +1,530 @@
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>AI Resume ATS Optimizer 🤖 | Convert PDF to ATS-Friendly Text</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <link rel="preconnect" href="https://fonts.googleapis.com">
9
+ <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
10
+ <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
11
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
12
+ <style>
13
+ * {
14
+ font-family: 'Inter', sans-serif;
15
+ }
16
+
17
+ .gradient-bg {
18
+ background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
19
+ }
20
+
21
+ .card-shadow {
22
+ box-shadow: 0 10px 40px rgba(0, 0, 0, 0.08);
23
+ }
24
+
25
+ .resume-preview {
26
+ background: linear-gradient(45deg, #f8f9fa, #e9ecef);
27
+ }
28
+
29
+ .section-checkbox:checked + .section-label {
30
+ background-color: #e3f2fd;
31
+ border-color: #2196f3;
32
+ }
33
+
34
+ .progress-bar {
35
+ height: 8px;
36
+ border-radius: 4px;
37
+ background: linear-gradient(90deg, #4facfe 0%, #00f2fe 100%);
38
+ transition: width 0.5s ease;
39
+ }
40
+
41
+ .ats-badge {
42
+ background: linear-gradient(45deg, #43e97b, #38f9d7);
43
+ }
44
+
45
+ .pdf-preview {
46
+ border: 2px dashed #cbd5e0;
47
+ border-radius: 8px;
48
+ transition: all 0.3s ease;
49
+ }
50
+
51
+ .pdf-preview.dragover {
52
+ border-color: #667eea;
53
+ background-color: rgba(102, 126, 234, 0.05);
54
+ }
55
+
56
+ .fade-in {
57
+ animation: fadeIn 0.5s ease-in;
58
+ }
59
+
60
+ @keyframes fadeIn {
61
+ from { opacity: 0; transform: translateY(10px); }
62
+ to { opacity: 1; transform: translateY(0); }
63
+ }
64
+
65
+ .pulse {
66
+ animation: pulse 2s infinite;
67
+ }
68
+
69
+ @keyframes pulse {
70
+ 0% { opacity: 1; }
71
+ 50% { opacity: 0.7; }
72
+ 100% { opacity: 1; }
73
+ }
74
+ </style>
75
+ </head>
76
+ <body class="bg-gray-50 min-h-screen">
77
+ <!-- Header -->
78
+ <header class="gradient-bg text-white py-8">
79
+ <div class="container mx-auto px-4">
80
+ <div class="flex flex-col md:flex-row justify-between items-center">
81
+ <div class="mb-6 md:mb-0">
82
+ <h1 class="text-3xl md:text-4xl font-bold mb-2">AI Resume ATS Optimizer</h1>
83
+ <p class="text-blue-100">Convert PDF resumes to ATS-friendly text files with AI</p>
84
+ </div>
85
+ <div class="flex items-center space-x-4">
86
+ <div class="bg-white/20 backdrop-blur-sm rounded-lg px-4 py-2">
87
+ <i class="fas fa-robot mr-2"></i>
88
+ <span>Powered by AI</span>
89
+ </div>
90
+ <div class="ats-badge text-gray-800 font-semibold rounded-lg px-4 py-2">
91
+ <i class="fas fa-check-circle mr-2"></i>
92
+ <span>ATS Optimized</span>
93
+ </div>
94
+ </div>
95
+ </div>
96
+ </div>
97
+ </header>
98
+
99
+ <!-- Main Content -->
100
+ <main class="container mx-auto px-4 py-8">
101
+ <div class="grid grid-cols-1 lg:grid-cols-3 gap-8">
102
+ <!-- Left Column: Upload & Sections -->
103
+ <div class="lg:col-span-2">
104
+ <!-- Upload Section -->
105
+ <div class="bg-white rounded-2xl card-shadow p-6 mb-8">
106
+ <h2 class="text-2xl font-bold text-gray-800 mb-4 flex items-center">
107
+ <i class="fas fa-file-upload text-blue-500 mr-3"></i>
108
+ Upload Your Resume PDF
109
+ </h2>
110
+ <p class="text-gray-600 mb-6">Upload your resume in PDF format. Our AI will analyze and convert it to ATS-optimized text.</p>
111
+
112
+ <div id="pdfUploadArea" class="pdf-preview p-8 text-center cursor-pointer transition-all duration-300 hover:border-blue-400">
113
+ <div class="max-w-md mx-auto">
114
+ <div class="text-blue-500 mb-4">
115
+ <i class="fas fa-cloud-upload-alt text-5xl"></i>
116
+ </div>
117
+ <h3 class="text-xl font-semibold text-gray-700 mb-2">Drop your PDF here</h3>
118
+ <p class="text-gray-500 mb-4">or click to browse files</p>
119
+ <input type="file" id="pdfFile" accept=".pdf" class="hidden">
120
+ <label for="pdfFile" class="inline-block gradient-bg text-white font-medium py-3 px-6 rounded-lg cursor-pointer hover:opacity-90 transition">
121
+ <i class="fas fa-search mr-2"></i>
122
+ Browse Files
123
+ </label>
124
+ <p class="text-gray-400 text-sm mt-4">Supports PDF files up to 10MB</p>
125
+ </div>
126
+ </div>
127
+
128
+ <div id="uploadedFileInfo" class="hidden mt-6 p-4 bg-green-50 border border-green-200 rounded-lg">
129
+ <div class="flex items-center justify-between">
130
+ <div class="flex items-center">
131
+ <i class="fas fa-file-pdf text-red-500 text-2xl mr-3"></i>
132
+ <div>
133
+ <h4 class="font-semibold text-gray-800" id="fileName">resume.pdf</h4>
134
+ <p class="text-gray-600 text-sm" id="fileSize">2.4 MB</p>
135
+ </div>
136
+ </div>
137
+ <button id="removeFile" class="text-gray-500 hover:text-red-500">
138
+ <i class="fas fa-times"></i>
139
+ </button>
140
+ </div>
141
+ <div class="mt-3">
142
+ <div class="flex justify-between text-sm text-gray-600 mb-1">
143
+ <span>Upload progress</span>
144
+ <span id="uploadPercent">100%</span>
145
+ </div>
146
+ <div class="w-full bg-gray-200 rounded-full h-2">
147
+ <div class="progress-bar rounded-full h-2" id="uploadProgressBar" style="width: 100%"></div>
148
+ </div>
149
+ </div>
150
+ </div>
151
+ </div>
152
+
153
+ <!-- Sections Selection -->
154
+ <div class="bg-white rounded-2xl card-shadow p-6">
155
+ <h2 class="text-2xl font-bold text-gray-800 mb-4 flex items-center">
156
+ <i class="fas fa-check-square text-green-500 mr-3"></i>
157
+ Select Sections to Include
158
+ </h2>
159
+ <p class="text-gray-600 mb-6">Choose which sections of your resume should be included in the ATS-optimized text file.</p>
160
+
161
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
162
+ <!-- Contact Information -->
163
+ <div class="section-option">
164
+ <input type="checkbox" id="contactInfo" class="hidden section-checkbox" checked>
165
+ <label for="contactInfo" class="section-label flex items-center p-4 border-2 border-gray-200 rounded-xl cursor-pointer transition-all hover:border-blue-300">
166
+ <div class="flex-shrink-0 w-12 h-12 bg-blue-100 rounded-lg flex items-center justify-center mr-4">
167
+ <i class="fas fa-user-circle text-blue-600 text-xl"></i>
168
+ </div>
169
+ <div>
170
+ <h3 class="font-semibold text-gray-800">Contact Information</h3>
171
+ <p class="text-gray-500 text-sm">Name, phone, email, address</p>
172
+ </div>
173
+ <div class="ml-auto">
174
+ <i class="fas fa-check-circle text-blue-500 text-xl hidden check-icon"></i>
175
+ </div>
176
+ </label>
177
+ </div>
178
+
179
+ <!-- Social Media -->
180
+ <div class="section-option">
181
+ <input type="checkbox" id="socialMedia" class="hidden section-checkbox" checked>
182
+ <label for="socialMedia" class="section-label flex items-center p-4 border-2 border-gray-200 rounded-xl cursor-pointer transition-all hover:border-blue-300">
183
+ <div class="flex-shrink-0 w-12 h-12 bg-purple-100 rounded-lg flex items-center justify-center mr-4">
184
+ <i class="fas fa-hashtag text-purple-600 text-xl"></i>
185
+ </div>
186
+ <div>
187
+ <h3 class="font-semibold text-gray-800">Social Media</h3>
188
+ <p class="text-gray-500 text-sm">LinkedIn, GitHub, portfolio links</p>
189
+ </div>
190
+ <div class="ml-auto">
191
+ <i class="fas fa-check-circle text-blue-500 text-xl hidden check-icon"></i>
192
+ </div>
193
+ </label>
194
+ </div>
195
+
196
+ <!-- Work Experience -->
197
+ <div class="section-option">
198
+ <input type="checkbox" id="workExperience" class="hidden section-checkbox" checked>
199
+ <label for="workExperience" class="section-label flex items-center p-4 border-2 border-gray-200 rounded-xl cursor-pointer transition-all hover:border-blue-300">
200
+ <div class="flex-shrink-0 w-12 h-12 bg-green-100 rounded-lg flex items-center justify-center mr-4">
201
+ <i class="fas fa-briefcase text-green-600 text-xl"></i>
202
+ </div>
203
+ <div>
204
+ <h3 class="font-semibold text-gray-800">Work Experience</h3>
205
+ <p class="text-gray-500 text-sm">Job history, roles, responsibilities</p>
206
+ </div>
207
+ <div class="ml-auto">
208
+ <i class="fas fa-check-circle text-blue-500 text-xl hidden check-icon"></i>
209
+ </div>
210
+ </label>
211
+ </div>
212
+
213
+ <!-- Education -->
214
+ <div class="section-option">
215
+ <input type="checkbox" id="education" class="hidden section-checkbox" checked>
216
+ <label for="education" class="section-label flex items-center p-4 border-2 border-gray-200 rounded-xl cursor-pointer transition-all hover:border-blue-300">
217
+ <div class="flex-shrink-0 w-12 h-12 bg-yellow-100 rounded-lg flex items-center justify-center mr-4">
218
+ <i class="fas fa-graduation-cap text-yellow-600 text-xl"></i>
219
+ </div>
220
+ <div>
221
+ <h3 class="font-semibold text-gray-800">Education</h3>
222
+ <p class="text-gray-500 text-sm">Degrees, institutions, dates</p>
223
+ </div>
224
+ <div class="ml-auto">
225
+ <i class="fas fa-check-circle text-blue-500 text-xl hidden check-icon"></i>
226
+ </div>
227
+ </label>
228
+ </div>
229
+
230
+ <!-- Certifications -->
231
+ <div class="section-option">
232
+ <input type="checkbox" id="certifications" class="hidden section-checkbox">
233
+ <label for="certifications" class="section-label flex items-center p-4 border-2 border-gray-200 rounded-xl cursor-pointer transition-all hover:border-blue-300">
234
+ <div class="flex-shrink-0 w-12 h-12 bg-red-100 rounded-lg flex items-center justify-center mr-4">
235
+ <i class="fas fa-certificate text-red-600 text-xl"></i>
236
+ </div>
237
+ <div>
238
+ <h3 class="font-semibold text-gray-800">Certifications</h3>
239
+ <p class="text-gray-500 text-sm">Professional certificates, licenses</p>
240
+ </div>
241
+ <div class="ml-auto">
242
+ <i class="fas fa-check-circle text-blue-500 text-xl hidden check-icon"></i>
243
+ </div>
244
+ </label>
245
+ </div>
246
+
247
+ <!-- Skills -->
248
+ <div class="section-option">
249
+ <input type="checkbox" id="skills" class="hidden section-checkbox" checked>
250
+ <label for="skills" class="section-label flex items-center p-4 border-2 border-gray-200 rounded-xl cursor-pointer transition-all hover:border-blue-300">
251
+ <div class="flex-shrink-0 w-12 h-12 bg-indigo-100 rounded-lg flex items-center justify-center mr-4">
252
+ <i class="fas fa-tools text-indigo-600 text-xl"></i>
253
+ </div>
254
+ <div>
255
+ <h3 class="font-semibold text-gray-800">Skills</h3>
256
+ <p class="text-gray-500 text-sm">Technical, soft skills, proficiencies</p>
257
+ </div>
258
+ <div class="ml-auto">
259
+ <i class="fas fa-check-circle text-blue-500 text-xl hidden check-icon"></i>
260
+ </div>
261
+ </label>
262
+ </div>
263
+
264
+ <!-- Summary -->
265
+ <div class="section-option">
266
+ <input type="checkbox" id="summary" class="hidden section-checkbox" checked>
267
+ <label for="summary" class="section-label flex items-center p-4 border-2 border-gray-200 rounded-xl cursor-pointer transition-all hover:border-blue-300">
268
+ <div class="flex-shrink-0 w-12 h-12 bg-teal-100 rounded-lg flex items-center justify-center mr-4">
269
+ <i class="fas fa-clipboard-list text-teal-600 text-xl"></i>
270
+ </div>
271
+ <div>
272
+ <h3 class="font-semibold text-gray-800">Summary</h3>
273
+ <p class="text-gray-500 text-sm">Professional summary, objective, profile</p>
274
+ </div>
275
+ <div class="ml-auto">
276
+ <i class="fas fa-check-circle text-blue-500 text-xl hidden check-icon"></i>
277
+ </div>
278
+ </label>
279
+ </div>
280
+ </div>
281
+
282
+ <div class="mt-8 pt-6 border-t border-gray-200">
283
+ <div class="flex flex-col sm:flex-row justify-between items-center">
284
+ <div class="mb-4 sm:mb-0">
285
+ <h3 class="font-semibold text-gray-800">AI Processing Prompt</h3>
286
+ <p class="text-gray-600 text-sm">Role: You are an expert talent analyst at top consulting firm that specializes in HR</p>
287
+ </div>
288
+ <button id="convertBtn" class="gradient-bg text-white font-semibold py-3 px-8 rounded-lg hover:opacity-90 transition flex items-center">
289
+ <i class="fas fa-robot mr-2"></i>
290
+ Convert with AI
291
+ </button>
292
+ </div>
293
+ </div>
294
+ </div>
295
+ </div>
296
+
297
+ <!-- Right Column: Preview & Results -->
298
+ <div class="lg:col-span-1">
299
+ <!-- Processing State -->
300
+ <div id="processingState" class="hidden bg-white rounded-2xl card-shadow p-6 mb-8">
301
+ <h2 class="text-2xl font-bold text-gray-800 mb-6 text-center">AI Processing Resume</h2>
302
+
303
+ <div class="text-center mb-6">
304
+ <div class="inline-flex items-center justify-center w-20 h-20 bg-gradient-to-r from-blue-500 to-purple-500 rounded-full mb-4">
305
+ <i class="fas fa-robot text-white text-3xl"></i>
306
+ </div>
307
+ <h3 class="font-semibold text-gray-800 text-xl mb-2">Analyzing PDF Content</h3>
308
+ <p class="text-gray-600">Our AI is extracting and optimizing your resume data</p>
309
+ </div>
310
+
311
+ <div class="mb-6">
312
+ <div class="flex justify-between text-sm text-gray-600 mb-2">
313
+ <span>Processing progress</span>
314
+ <span id="processingPercent">0%</span>
315
+ </div>
316
+ <div class="w-full bg-gray-200 rounded-full h-3">
317
+ <div class="progress-bar rounded-full h-3" id="processingProgressBar" style="width: 0%"></div>
318
+ </div>
319
+ </div>
320
+
321
+ <div class="space-y-4">
322
+ <div class="flex items-center">
323
+ <div class="w-8 h-8 rounded-full bg-blue-100 flex items-center justify-center mr-3">
324
+ <i class="fas fa-file-pdf text-blue-600 text-sm"></i>
325
+ </div>
326
+ <div class="flex-1">
327
+ <p class="font-medium text-gray-700">Parsing PDF structure</p>
328
+ <div class="w-full bg-gray-200 rounded-full h-1.5 mt-1">
329
+ <div class="bg-blue-500 rounded-full h-1.5 processing-step" data-step="1" style="width: 0%"></div>
330
+ </div>
331
+ </div>
332
+ </div>
333
+
334
+ <div class="flex items-center">
335
+ <div class="w-8 h-8 rounded-full bg-purple-100 flex items-center justify-center mr-3">
336
+ <i class="fas fa-text-height text-purple-600 text-sm"></i>
337
+ </div>
338
+ <div class="flex-1">
339
+ <p class="font-medium text-gray-700">Extracting text content</p>
340
+ <div class="w-full bg-gray-200 rounded-full h-1.5 mt-1">
341
+ <div class="bg-purple-500 rounded-full h-1.5 processing-step" data-step="2" style="width: 0%"></div>
342
+ </div>
343
+ </div>
344
+ </div>
345
+
346
+ <div class="flex items-center">
347
+ <div class="w-8 h-8 rounded-full bg-green-100 flex items-center justify-center mr-3">
348
+ <i class="fas fa-magic text-green-600 text-sm"></i>
349
+ </div>
350
+ <div class="flex-1">
351
+ <p class="font-medium text-gray-700">Optimizing for ATS</p>
352
+ <div class="w-full bg-gray-200 rounded-full h-1.5 mt-1">
353
+ <div class="bg-green-500 rounded-full h-1.5 processing-step" data-step="3" style="width: 0%"></div>
354
+ </div>
355
+ </div>
356
+ </div>
357
+
358
+ <div class="flex items-center">
359
+ <div class="w-8 h-8 rounded-full bg-yellow-100 flex items-center justify-center mr-3">
360
+ <i class="fas fa-check-double text-yellow-600 text-sm"></i>
361
+ </div>
362
+ <div class="flex-1">
363
+ <p class="font-medium text-gray-700">Finalizing text file</p>
364
+ <div class="w-full bg-gray-200 rounded-full h-1.5 mt-1">
365
+ <div class="bg-yellow-500 rounded-full h-1.5 processing-step" data-step="4" style="width: 0%"></div>
366
+ </div>
367
+ </div>
368
+ </div>
369
+ </div>
370
+ </div>
371
+
372
+ <!-- Results Section -->
373
+ <div id="resultsSection" class="hidden bg-white rounded-2xl card-shadow p-6">
374
+ <div class="flex justify-between items-center mb-6">
375
+ <h2 class="text-2xl font-bold text-gray-800">Results</h2>
376
+ <div class="ats-badge text-gray-800 font-semibold rounded-full px-3 py-1 text-sm">
377
+ <i class="fas fa-check-circle mr-1"></i>
378
+ ATS Ready
379
+ </div>
380
+ </div>
381
+
382
+ <div class="mb-6 p-4 bg-blue-50 rounded-xl">
383
+ <div class="flex items-center mb-2">
384
+ <i class="fas fa-info-circle text-blue-500 mr-2"></i>
385
+ <h3 class="font-semibold text-gray-800">Conversion Successful!</h3>
386
+ </div>
387
+ <p class="text-gray-700 text-sm">Your resume has been optimized for Applicant Tracking Systems. Download the text file below.</p>
388
+ </div>
389
+
390
+ <div class="mb-6">
391
+ <h3 class="font-semibold text-gray-800 mb-3 flex items-center">
392
+ <i class="fas fa-file-alt text-gray-500 mr-2"></i>
393
+ Preview of Optimized Text
394
+ </h3>
395
+ <div class="resume-preview rounded-xl p-4 max-h-60 overflow-y-auto">
396
+ <pre id="textPreview" class="text-sm text-gray-800 whitespace-pre-wrap font-mono"></pre>
397
+ </div>
398
+ <div class="text-right mt-2">
399
+ <button id="copyTextBtn" class="text-blue-600 hover:text-blue-800 text-sm font-medium">
400
+ <i class="far fa-copy mr-1"></i>
401
+ Copy to clipboard
402
+ </button>
403
+ </div>
404
+ </div>
405
+
406
+ <div class="space-y-4">
407
+ <button id="downloadBtn" class="w-full gradient-bg text-white font-semibold py-3 px-4 rounded-lg hover:opacity-90 transition flex items-center justify-center">
408
+ <i class="fas fa-download mr-2"></i>
409
+ Download .TXT File
410
+ </button>
411
+
412
+ <button id="newConversionBtn" class="w-full border-2 border-gray-300 text-gray-700 font-medium py-3 px-4 rounded-lg hover:bg-gray-50 transition flex items-center justify-center">
413
+ <i class="fas fa-redo mr-2"></i>
414
+ Convert Another Resume
415
+ </button>
416
+ </div>
417
+
418
+ <div class="mt-6 pt-6 border-t border-gray-200">
419
+ <h3 class="font-semibold text-gray-800 mb-3">Tips for ATS Success</h3>
420
+ <ul class="space-y-2 text-sm text-gray-600">
421
+ <li class="flex items-start">
422
+ <i class="fas fa-check text-green-500 mt-1 mr-2"></i>
423
+ <span>Use simple, clean formatting</span>
424
+ </li>
425
+ <li class="flex items-start">
426
+ <i class="fas fa-check text-green-500 mt-1 mr-2"></i>
427
+ <span>Include relevant keywords from job description</span>
428
+ </li>
429
+ <li class="flex items-start">
430
+ <i class="fas fa-check text-green-500 mt-1 mr-2"></i>
431
+ <span>Avoid graphics, tables, and columns</span>
432
+ </li>
433
+ <li class="flex items-start">
434
+ <i class="fas fa-check text-green-500 mt-1 mr-2"></i>
435
+ <span>Use standard section headings</span>
436
+ </li>
437
+ </ul>
438
+ </div>
439
+ </div>
440
+
441
+ <!-- Initial Preview -->
442
+ <div id="initialPreview" class="bg-white rounded-2xl card-shadow p-6">
443
+ <h2 class="text-2xl font-bold text-gray-800 mb-6">How It Works</h2>
444
+
445
+ <div class="space-y-6">
446
+ <div class="flex items-start">
447
+ <div class="flex-shrink-0 w-10 h-10 rounded-full bg-gradient-to-r from-blue-500 to-blue-400 flex items-center justify-center text-white font-bold mr-4">1</div>
448
+ <div>
449
+ <h3 class="font-semibold text-gray-800 mb-1">Upload PDF Resume</h3>
450
+ <p class="text-gray-600 text-sm">Upload your resume in PDF format. We support files up to 10MB.</p>
451
+ </div>
452
+ </div>
453
+
454
+ <div class="flex items-start">
455
+ <div class="flex-shrink-0 w-10 h-10 rounded-full bg-gradient-to-r from-purple-500 to-purple-400 flex items-center justify-center text-white font-bold mr-4">2</div>
456
+ <div>
457
+ <h3 class="font-semibold text-gray-800 mb-1">Select Sections</h3>
458
+ <p class="text-gray-600 text-sm">Choose which resume sections to include in the ATS-optimized text.</p>
459
+ </div>
460
+ </div>
461
+
462
+ <div class="flex items-start">
463
+ <div class="flex-shrink-0 w-10 h-10 rounded-full bg-gradient-to-r from-green-500 to-green-400 flex items-center justify-center text-white font-bold mr-4">3</div>
464
+ <div>
465
+ <h3 class="font-semibold text-gray-800 mb-1">AI Processing</h3>
466
+ <p class="text-gray-600 text-sm">Our AI analyzes and optimizes your resume for Applicant Tracking Systems.</p>
467
+ </div>
468
+ </div>
469
+
470
+ <div class="flex items-start">
471
+ <div class="flex-shrink-0 w-10 h-10 rounded-full bg-gradient-to-r from-yellow-500 to-yellow-400 flex items-center justify-center text-white font-bold mr-4">4</div>
472
+ <div>
473
+ <h3 class="font-semibold text-gray-800 mb-1">Download Text File</h3>
474
+ <p class="text-gray-600 text-sm">Get your optimized .TXT file ready to upload to any job application.</p>
475
+ </div>
476
+ </div>
477
+ </div>
478
+
479
+ <div class="mt-8 p-4 bg-gradient-to-r from-blue-50 to-purple-50 rounded-xl border border-blue-100">
480
+ <div class="flex items-center mb-2">
481
+ <i class="fas fa-lightbulb text-yellow-500 text-xl mr-3"></i>
482
+ <h3 class="font-semibold text-gray-800">Why ATS Optimization Matters</h3>
483
+ </div>
484
+ <p class="text-gray-700 text-sm">Over 75% of resumes are rejected by ATS before a human ever sees them. Our AI ensures your resume gets past these systems.</p>
485
+ </div>
486
+ </div>
487
+ </div>
488
+ </div>
489
+ </main>
490
+
491
+ <!-- Footer -->
492
+ <footer class="bg-gray-800 text-white py-8 mt-12">
493
+ <div class="container mx-auto px-4">
494
+ <div class="flex flex-col md:flex-row justify-between items-center">
495
+ <div class="mb-6 md:mb-0">
496
+ <h2 class="text-2xl font-bold mb-2">AI Resume ATS Optimizer</h2>
497
+ <p class="text-gray-400">Powered by AI to boost your job search success</p>
498
+ </div>
499
+ <div class="flex space-x-6">
500
+ <a href="#" class="text-gray-300 hover:text-white transition">
501
+ <i class="fab fa-github text-xl"></i>
502
+ </a>
503
+ <a href="#" class="text-gray-300 hover:text-white transition">
504
+ <i class="fab fa-twitter text-xl"></i>
505
+ </a>
506
+ <a href="#" class="text-gray-300 hover:text-white transition">
507
+ <i class="fab fa-linkedin text-xl"></i>
508
+ </a>
509
+ </div>
510
+ </div>
511
+ <div class="mt-8 pt-8 border-t border-gray-700 text-center text-gray-500 text-sm">
512
+ <p>This is a demo application. In a production environment, this would connect to actual PDF parsing and AI services.</p>
513
+ </div>
514
+ </div>
515
+ </footer>
516
+
517
+ <!-- Toast Notification -->
518
+ <div id="toast" class="fixed bottom-4 right-4 bg-gray-800 text-white p-4 rounded-lg shadow-lg transform translate-y-full transition-transform duration-300 z-50 max-w-sm">
519
+ <div class="flex items-center">
520
+ <i class="fas fa-check-circle text-green-400 mr-3 text-xl"></i>
521
+ <div>
522
+ <p class="font-medium" id="toastMessage">Operation completed successfully!</p>
523
+ </div>
524
+ </div>
525
+ </div>
526
+
527
+ <script src="script.js"></script>
528
+ <script src="https://deepsite.hf.co/deepsite-badge.js"></script>
529
+ </body>
530
+ </html>
script.js ADDED
@@ -0,0 +1,388 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ // DOM Elements
2
+ const pdfFileInput = document.getElementById('pdfFile');
3
+ const pdfUploadArea = document.getElementById('pdfUploadArea');
4
+ const uploadedFileInfo = document.getElementById('uploadedFileInfo');
5
+ const fileNameElement = document.getElementById('fileName');
6
+ const fileSizeElement = document.getElementById('fileSize');
7
+ const removeFileButton = document.getElementById('removeFile');
8
+ const uploadProgressBar = document.getElementById('uploadProgressBar');
9
+ const uploadPercent = document.getElementById('uploadPercent');
10
+ const convertButton = document.getElementById('convertBtn');
11
+ const processingState = document.getElementById('processingState');
12
+ const initialPreview = document.getElementById('initialPreview');
13
+ const resultsSection = document.getElementById('resultsSection');
14
+ const processingProgressBar = document.getElementById('processingProgressBar');
15
+ const processingPercent = document.getElementById('processingPercent');
16
+ const textPreview = document.getElementById('textPreview');
17
+ const downloadButton = document.getElementById('downloadBtn');
18
+ const newConversionButton = document.getElementById('newConversionBtn');
19
+ const copyTextButton = document.getElementById('copyTextBtn');
20
+ const toast = document.getElementById('toast');
21
+ const toastMessage = document.getElementById('toastMessage');
22
+ const sectionCheckboxes = document.querySelectorAll('.section-checkbox');
23
+ const sectionLabels = document.querySelectorAll('.section-label');
24
+
25
+ // Sample resume data for demonstration
26
+ const sampleResumeData = {
27
+ contactInfo: "Jane Doe\n(123) 456-7890\njane.doe@email.com\n123 Main Street, New York, NY 10001",
28
+ socialMedia: "LinkedIn: linkedin.com/in/janedoe\nGitHub: github.com/janedoe\nPortfolio: janedoe.dev",
29
+ workExperience: "Senior Software Engineer, Tech Solutions Inc. (2020-Present)\n- Lead development of customer-facing web applications\n- Implemented Agile methodologies improving team productivity by 30%\n- Mentored 5 junior developers\n\nSoftware Developer, Innovate Corp. (2017-2020)\n- Developed and maintained internal tools using React and Node.js\n- Reduced application load time by 40% through performance optimization\n- Collaborated with cross-functional teams to deliver projects on schedule",
30
+ education: "Master of Science in Computer Science\nUniversity of Technology (2015-2017)\nGPA: 3.8/4.0\n\nBachelor of Science in Information Technology\nState College (2011-2015)",
31
+ certifications: "AWS Certified Solutions Architect - Associate\nGoogle Professional Cloud Architect\nScrum Master Certification (CSM)",
32
+ skills: "Programming: JavaScript, Python, Java, C#\nFrameworks: React, Node.js, Angular, .NET\nDatabases: MySQL, MongoDB, PostgreSQL\nTools: Git, Docker, AWS, Jenkins\nSoft Skills: Leadership, Problem-solving, Communication, Team Collaboration",
33
+ summary: "Senior Software Engineer with 8+ years of experience in full-stack development, specializing in scalable web applications. Proven track record of leading cross-functional teams, implementing Agile methodologies, and delivering projects that improve efficiency and user experience. Passionate about mentoring junior developers and staying current with emerging technologies."
34
+ };
35
+
36
+ // Current state
37
+ let currentFile = null;
38
+ let selectedSections = ['contactInfo', 'socialMedia', 'workExperience', 'education', 'skills', 'summary'];
39
+
40
+ // Initialize event listeners
41
+ function init() {
42
+ // File upload handlers
43
+ pdfFileInput.addEventListener('change', handleFileSelect);
44
+
45
+ // Drag and drop handlers
46
+ pdfUploadArea.addEventListener('dragover', handleDragOver);
47
+ pdfUploadArea.addEventListener('dragleave', handleDragLeave);
48
+ pdfUploadArea.addEventListener('drop', handleDrop);
49
+
50
+ // File removal
51
+ removeFileButton.addEventListener('click', removeFile);
52
+
53
+ // Section selection handlers
54
+ sectionCheckboxes.forEach(checkbox => {
55
+ checkbox.addEventListener('change', updateSectionSelection);
56
+ // Initialize check icons
57
+ if (checkbox.checked) {
58
+ const label = checkbox.nextElementSibling;
59
+ const checkIcon = label.querySelector('.check-icon');
60
+ if (checkIcon) checkIcon.classList.remove('hidden');
61
+ }
62
+ });
63
+
64
+ // Convert button
65
+ convertButton.addEventListener('click', startConversion);
66
+
67
+ // Results buttons
68
+ downloadButton.addEventListener('click', downloadTextFile);
69
+ newConversionButton.addEventListener('click', resetToInitialState);
70
+ copyTextButton.addEventListener('click', copyTextToClipboard);
71
+
72
+ // Initialize with sample text preview
73
+ updateTextPreview();
74
+ }
75
+
76
+ // Handle file selection
77
+ function handleFileSelect(event) {
78
+ const file = event.target.files[0];
79
+ if (file && file.type === 'application/pdf') {
80
+ processFile(file);
81
+ } else {
82
+ showToast('Please select a valid PDF file', 'error');
83
+ }
84
+ }
85
+
86
+ // Handle drag over
87
+ function handleDragOver(event) {
88
+ event.preventDefault();
89
+ event.stopPropagation();
90
+ pdfUploadArea.classList.add('dragover');
91
+ }
92
+
93
+ // Handle drag leave
94
+ function handleDragLeave(event) {
95
+ event.preventDefault();
96
+ event.stopPropagation();
97
+ pdfUploadArea.classList.remove('dragover');
98
+ }
99
+
100
+ // Handle drop
101
+ function handleDrop(event) {
102
+ event.preventDefault();
103
+ event.stopPropagation();
104
+ pdfUploadArea.classList.remove('dragover');
105
+
106
+ const files = event.dataTransfer.files;
107
+ if (files.length > 0) {
108
+ const file = files[0];
109
+ if (file.type === 'application/pdf') {
110
+ processFile(file);
111
+ } else {
112
+ showToast('Please drop a valid PDF file', 'error');
113
+ }
114
+ }
115
+ }
116
+
117
+ // Process the uploaded file
118
+ function processFile(file) {
119
+ currentFile = file;
120
+
121
+ // Update UI with file info
122
+ fileNameElement.textContent = file.name;
123
+ fileSizeElement.textContent = formatFileSize(file.size);
124
+
125
+ // Show upload progress animation
126
+ uploadedFileInfo.classList.remove('hidden');
127
+ simulateUploadProgress();
128
+
129
+ // Enable convert button
130
+ convertButton.disabled = false;
131
+ convertButton.classList.remove('opacity-50');
132
+
133
+ showToast(`File "${file.name}" uploaded successfully`, 'success');
134
+ }
135
+
136
+ // Simulate upload progress
137
+ function simulateUploadProgress() {
138
+ let progress = 0;
139
+ const interval = setInterval(() => {
140
+ progress += Math.random() * 15;
141
+ if (progress >= 100) {
142
+ progress = 100;
143
+ clearInterval(interval);
144
+ }
145
+
146
+ uploadProgressBar.style.width = `${progress}%`;
147
+ uploadPercent.textContent = `${Math.round(progress)}%`;
148
+ }, 100);
149
+ }
150
+
151
+ // Format file size
152
+ function formatFileSize(bytes) {
153
+ if (bytes < 1024) return bytes + ' B';
154
+ else if (bytes < 1024 * 1024) return (bytes / 1024).toFixed(1) + ' KB';
155
+ else return (bytes / (1024 * 1024)).toFixed(1) + ' MB';
156
+ }
157
+
158
+ // Remove file
159
+ function removeFile() {
160
+ currentFile = null;
161
+ pdfFileInput.value = '';
162
+ uploadedFileInfo.classList.add('hidden');
163
+ convertButton.disabled = true;
164
+ convertButton.classList.add('opacity-50');
165
+ }
166
+
167
+ // Update section selection
168
+ function updateSectionSelection(event) {
169
+ const checkbox = event.target;
170
+ const label = checkbox.nextElementSibling;
171
+ const checkIcon = label.querySelector('.check-icon');
172
+
173
+ if (checkbox.checked) {
174
+ checkIcon.classList.remove('hidden');
175
+ selectedSections.push(checkbox.id);
176
+ } else {
177
+ checkIcon.classList.add('hidden');
178
+ selectedSections = selectedSections.filter(id => id !== checkbox.id);
179
+ }
180
+
181
+ // Update preview if we have results
182
+ if (resultsSection.classList.contains('hidden') === false) {
183
+ updateTextPreview();
184
+ }
185
+ }
186
+
187
+ // Start the conversion process
188
+ function startConversion() {
189
+ if (!currentFile && selectedSections.length === 0) {
190
+ showToast('Please upload a PDF and select at least one section', 'error');
191
+ return;
192
+ }
193
+
194
+ if (!currentFile) {
195
+ showToast('Please upload a PDF file first', 'error');
196
+ return;
197
+ }
198
+
199
+ if (selectedSections.length === 0) {
200
+ showToast('Please select at least one section to include', 'error');
201
+ return;
202
+ }
203
+
204
+ // Hide initial preview and show processing state
205
+ initialPreview.classList.add('hidden');
206
+ processingState.classList.remove('hidden');
207
+ processingState.classList.add('fade-in');
208
+
209
+ // Start the processing animation
210
+ simulateProcessing();
211
+ }
212
+
213
+ // Simulate AI processing
214
+ function simulateProcessing() {
215
+ let progress = 0;
216
+ const steps = document.querySelectorAll('.processing-step');
217
+
218
+ const interval = setInterval(() => {
219
+ progress += Math.random() * 8;
220
+ if (progress >= 100) {
221
+ progress = 100;
222
+ clearInterval(interval);
223
+
224
+ // Show results after a brief delay
225
+ setTimeout(showResults, 500);
226
+ }
227
+
228
+ // Update main progress bar
229
+ processingProgressBar.style.width = `${progress}%`;
230
+ processingPercent.textContent = `${Math.round(progress)}%`;
231
+
232
+ // Update individual step progress
233
+ const stepProgress = progress / 100;
234
+ steps.forEach((step, index) => {
235
+ const stepNum = parseInt(step.getAttribute('data-step'));
236
+ const stepTarget = stepNum * 25;
237
+ const stepWidth = Math.min(Math.max(0, (progress - (stepTarget - 25)) / 25 * 100), 100);
238
+ step.style.width = `${stepWidth}%`;
239
+ });
240
+ }, 200);
241
+ }
242
+
243
+ // Show results
244
+ function showResults() {
245
+ processingState.classList.add('hidden');
246
+ resultsSection.classList.remove('hidden');
247
+ resultsSection.classList.add('fade-in');
248
+
249
+ updateTextPreview();
250
+ showToast('Resume successfully converted to ATS-optimized text!', 'success');
251
+ }
252
+
253
+ ===========================\n";
254
+ text += sampleResumeData.contactInfo + "\n\n";
255
+ }
256
+
257
+ if (selectedSections.includes('socialMedia')) {
258
+ text += "SOCIAL MEDIA & LINKS\n";
259
+ text += "====================\n";
260
+ text += sampleResumeData.socialMedia + "\n\n";
261
+ }
262
+
263
+ if (selectedSections.includes('workExperience')) {
264
+ text += "WORK EXPERIENCE\n";
265
+ text += "================\n";
266
+ text += sampleResumeData.workExperience + "\n\n";
267
+ }
268
+
269
+ if (selectedSections.includes('education')) {
270
+ text += "EDUCATION\n";
271
+ text += "=========\n";
272
+ text += sampleResumeData.education + "\n\n";
273
+ }
274
+
275
+ if (selectedSections.includes('certifications')) {
276
+ text += "CERTIFICATIONS\n";
277
+ text += "==============\n";
278
+ text += sampleResumeData.certifications + "\n\n";
279
+ }
280
+
281
+ if (selectedSections.includes('skills')) {
282
+ text += "SKILLS\n";
283
+ text += "======\n";
284
+ text += sampleResumeData.skills + "\n\n";
285
+ }
286
+
287
+ text += "\n=== END OF RESUME ===";
288
+ text += "\n\n[This resume has been optimized for Applicant Tracking Systems by AI Resume ATS Optimizer]";
289
+
290
+ textPreview.textContent = text;
291
+ }
292
+
293
+ // Download text file
294
+ function downloadTextFile() {
295
+ const text = textPreview.textContent;
296
+ const blob = new Blob([text], { type: 'text/plain' });
297
+ const url = URL.createObjectURL(blob);
298
+
299
+ const a = document.createElement('a');
300
+ a.href = url;
301
+ a.download = 'ats_optimized_resume.txt';
302
+ document.body.appendChild(a);
303
+ a.click();
304
+
305
+ setTimeout(() => {
306
+ document.body.removeChild(a);
307
+ URL.revokeObjectURL(url);
308
+ }, 100);
309
+
310
+ showToast('Text file downloaded successfully!', 'success');
311
+ }
312
+
313
+ // Copy text to clipboard
314
+ function copyTextToClipboard() {
315
+ const text = textPreview.textContent;
316
+
317
+ navigator.clipboard.writeText(text).then(() => {
318
+ showToast('Text copied to clipboard!', 'success');
319
+ }).catch(err => {
320
+ console.error('Failed to copy text: ', err);
321
+ showToast('Failed to copy text to clipboard', 'error');
322
+ });
323
+ }
324
+
325
+ // Reset to initial state
326
+ function resetToInitialState() {
327
+ // Reset file
328
+ removeFile();
329
+
330
+ // Reset sections
331
+ sectionCheckboxes.forEach(checkbox => {
332
+ if (checkbox.id !== 'certifications') {
333
+ checkbox.checked = true;
334
+ const label = checkbox.nextElementSibling;
335
+ const checkIcon = label.querySelector('.check-icon');
336
+ checkIcon.classList.remove('hidden');
337
+ } else {
338
+ checkbox.checked = false;
339
+ const label = checkbox.nextElementSibling;
340
+ const checkIcon = label.querySelector('.check-icon');
341
+ checkIcon.classList.add('hidden');
342
+ }
343
+ });
344
+
345
+ selectedSections = ['contactInfo', 'socialMedia', 'workExperience', 'education', 'skills', 'summary'];
346
+
347
+ // Hide results and show initial preview
348
+ resultsSection.classList.add('hidden');
349
+ initialPreview.classList.remove('hidden');
350
+ initialPreview.classList.add('fade-in');
351
+
352
+ showToast('Ready for a new conversion!', 'success');
353
+ }
354
+
355
+ // Show toast notification
356
+ function showToast(message, type = 'success') {
357
+ toastMessage.textContent = message;
358
+
359
+ // Set color based on type
360
+ if (type === 'error') {
361
+ toast.style.backgroundColor = '#ef4444';
362
+ } else if (type === 'success') {
363
+ toast.style.backgroundColor = '#10b981';
364
+ } else {
365
+ toast.style.backgroundColor = '#3b82f6';
366
+ }
367
+
368
+ // Show toast
369
+ toast.classList.remove('translate-y-full');
370
+
371
+ // Hide after 3 seconds
372
+ setTimeout(() => {
373
+ toast.classList.add('translate-y-full');
374
+ }, 3000);
375
+ }
376
+
377
+ // Initialize the application when DOM is loaded
378
+ document.addEventListener('DOMContentLoaded', init);
379
+
380
+ // Add some interactivity to section labels
381
+ sectionLabels.forEach(label => {
382
+ label.addEventListener('click', function() {
383
+ this.classList.add('transform', 'scale-[1.02]', 'transition-transform');
384
+ setTimeout(() => {
385
+ this.classList.remove('transform', 'scale-[1.02]');
386
+ }, 150);
387
+ });
388
+ });