Hugging Face's logo

Spaces:
Imarticuslearning
/
CV_Guru
Sleeping

App Files Community
Imarticuslearning commited on
Commit
04e4cb9
·
verified ·
1 Parent(s): 51f9bdc

Upload 3 files

Browse files
Files changed (3) hide show
  1. templates/home_page.html +77 -0
  2. templates/review_output.html +702 -0
  3. templates/upload_resume.html +134 -0
templates/home_page.html ADDED
@@ -0,0 +1,77 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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>Resume Parser</title>
7
+ <!-- Font Awesome for icons -->
8
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
9
+ <style>
10
+ body {
11
+ font-family: 'Arial', sans-serif;
12
+ margin: 0;
13
+ padding: 0;
14
+ background: linear-gradient(135deg, #a0c4ff, #b9fbc0); /* Soft gradient background */
15
+ background-size: cover; /* Cover the entire viewport */
16
+ color: #333; /* Darker text for readability */
17
+ text-align: center;
18
+ overflow-x: hidden;
19
+ }
20
+ .container {
21
+ max-width: 900px;
22
+ margin: 50px auto;
23
+ padding: 30px;
24
+ background-color: #ffffff; /* White background for the content area */
25
+ border-radius: 10px; /* Rounded corners */
26
+ box-shadow: 0 8px 30px rgba(0, 0, 0, 0.1); /* Slight shadow for depth */
27
+ transition: box-shadow 0.3s ease-in-out; /* Smooth transition for shadow */
28
+ }
29
+ .container:hover {
30
+ box-shadow: 0 12px 40px rgba(0, 0, 0, 0.2); /* Deeper shadow on hover */
31
+ }
32
+ h1 {
33
+ color: #333; /* Darker color for the heading */
34
+ margin-bottom: 20px; /* Spacing below heading */
35
+ }
36
+ p {
37
+ line-height: 1.6; /* Increased line height for readability */
38
+ color: #666; /* Slightly lighter text color for paragraphs */
39
+ margin-bottom: 30px; /* Spacing below paragraph */
40
+ }
41
+ .cta-button {
42
+ display: inline-block;
43
+ padding: 12px 24px;
44
+ background-color: #4caf50; /* Green button background color */
45
+ color: #ffffff; /* White text color */
46
+ border: none;
47
+ border-radius: 8px; /* Rounded corners for the button */
48
+ cursor: pointer;
49
+ text-decoration: none;
50
+ font-size: 16px; /* Font size for the button */
51
+ transition: background-color 0.3s, transform 0.3s, box-shadow 0.3s; /* Smooth transition effects */
52
+ }
53
+ .cta-button:hover {
54
+ background-color: #45a049; /* Darker green on hover */
55
+ transform: scale(1.05); /* Slight scale effect on hover */
56
+ box-shadow: 0 8px 15px rgba(0, 0, 0, 0.2); /* Subtle shadow on hover */
57
+ }
58
+ .cta-button:active {
59
+ transform: scale(1); /* Ensures button scales back down on click */
60
+ box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15); /* Reduced shadow on click */
61
+ }
62
+ .icon {
63
+ font-size: 40px; /* Size of icons */
64
+ color: #4caf50; /* Green color for icons */
65
+ margin-bottom: 20px; /* Spacing below icons */
66
+ }
67
+ </style>
68
+ </head>
69
+ <body>
70
+ <div class="container">
71
+ <i class="fas fa-briefcase icon"></i>
72
+ <h1>CV Guru</h1>
73
+ <p>Welcome to the Resume Parser! Effortlessly upload and analyze your resumes to gain actionable insights and enhance your job search.</p>
74
+ <a class="cta-button" href="/v1/resumes/"><i class="fas fa-upload"></i> Get Started</a>
75
+ </div>
76
+ </body>
77
+ </html>
templates/review_output.html ADDED
@@ -0,0 +1,702 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+
4
+ <head>
5
+ <meta charset="UTF-8">
6
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
7
+ <title>Resume Review Output</title>
8
+ <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet">
9
+ <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap" rel="stylesheet">
10
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css"> <!-- Font Awesome CDN -->
11
+ <style>
12
+ body {
13
+ background-image: url('https://www.example.com/light-bg.jpg');
14
+ background-size: cover;
15
+ background-color: #f4f4f9;
16
+ color: #2c3e50;
17
+ font-family: 'Roboto', sans-serif;
18
+ overflow-x: hidden;
19
+ }
20
+
21
+ .container {
22
+ background: rgba(255, 255, 255, 0.95);
23
+ border-radius: 15px;
24
+ box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
25
+ padding: 20px;
26
+ margin-top: 50px;
27
+ }
28
+
29
+ .card {
30
+ border: none;
31
+ background: linear-gradient(135deg, #ecf0f1, #ffffff);
32
+ border-radius: 15px;
33
+ transition: transform 0.3s, box-shadow 0.3s;
34
+ }
35
+
36
+ .card:hover {
37
+ transform: translateY(-5px);
38
+ box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
39
+ }
40
+
41
+ .info-section .info-item {
42
+ background: rgba(236, 240, 241, 0.8);
43
+ padding: 15px;
44
+ margin-bottom: 10px;
45
+ border-radius: 10px;
46
+ transition: background-color 0.3s, transform 0.3s;
47
+ }
48
+
49
+ .info-section .info-item:hover {
50
+ background: rgba(236, 240, 241, 0.9);
51
+ transform: translateY(-3px);
52
+ }
53
+
54
+ .info-title {
55
+ font-size: 1.2rem;
56
+ font-weight: 500;
57
+ color: #2980b9;
58
+ }
59
+
60
+ .info-content {
61
+ font-size: 1rem;
62
+ font-weight: 400;
63
+ color: #34495e;
64
+ }
65
+
66
+ .btn-toggle {
67
+ background-color: #e74c3c;
68
+ border: none;
69
+ color: #ffffff;
70
+ cursor: pointer;
71
+ font-size: 1rem;
72
+ padding: 10px 20px;
73
+ border-radius: 5px;
74
+ display: inline-flex;
75
+ align-items: center;
76
+ transition: background-color 0.3s, transform 0.3s;
77
+ }
78
+
79
+ .btn-toggle::after {
80
+ content: '\25BC';
81
+ margin-left: 10px;
82
+ transition: transform 0.3s;
83
+ }
84
+
85
+ .btn-toggle[aria-expanded="true"]::after {
86
+ transform: rotate(180deg);
87
+ }
88
+
89
+ .btn-toggle:hover {
90
+ background-color: #c0392b;
91
+ transform: scale(1.05);
92
+ }
93
+
94
+ h1 {
95
+ font-size: 2.5rem;
96
+ font-weight: 700;
97
+ text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
98
+ color: #2c3e50;
99
+ }
100
+
101
+ a {
102
+ color: #3498db;
103
+ }
104
+
105
+ a:hover {
106
+ text-decoration: underline;
107
+ color: #2980b9;
108
+ }
109
+
110
+ .collapse {
111
+ background-color: rgba(255, 255, 255, 0.9);
112
+ padding: 10px;
113
+ border-radius: 10px;
114
+ }
115
+
116
+ .section-header {
117
+ display: flex;
118
+ align-items: center;
119
+ margin-bottom: 10px;
120
+ }
121
+
122
+ .section-header i {
123
+ margin-right: 10px;
124
+ }
125
+
126
+ .no-data {
127
+ color: #e74c3c;
128
+ font-style: italic;
129
+ font-size: 1rem;
130
+ }
131
+ </style>
132
+ </head>
133
+
134
+ <body>
135
+ <div class="container">
136
+ <div class="card shadow-lg p-4">
137
+ <h1 class="text-center mb-4">Resume Review Output</h1>
138
+ <div class="content">
139
+ <div class="info-section" style="display: flex; justify-content: space-between; align-items: flex-start; gap: 20px;">
140
+ <!-- Resume Score Section (Left) -->
141
+ <div class="info-item" style="flex: 1;">
142
+ <div class="section-header">
143
+ <i class="fas fa-star"></i>
144
+ <div class="info-title">Resume Score:</div>
145
+ </div>
146
+ <div class="info-content">
147
+ <!-- Display Resume Score -->
148
+ {{ parsed_resume['imarticus_score'] or 'No score available.' }}
149
+ </div>
150
+ <div class="info-content">
151
+ {% set max_score = 63 %}
152
+ {% set score = parsed_resume['imarticus_score'] %}
153
+ {% set percentage = (score / max_score) * 100 %}
154
+
155
+ {% if percentage == 0 %}
156
+ {% set rating = 'The resume is bad' %}
157
+ {% elif percentage <= 15 %}
158
+ {% set rating = 'Resume needs significant improvement' %}
159
+ {% elif percentage <= 35 %}
160
+ {% set rating = 'Resume needs improvement' %}
161
+ {% elif percentage <= 55 %}
162
+ {% set rating = 'Resume is average' %}
163
+ {% elif percentage <= 75 %}
164
+ {% set rating = 'Resume is good' %}
165
+ {% elif percentage <= 90 %}
166
+ {% set rating = 'Resume is very good' %}
167
+ {% else %}
168
+ {% set rating = 'Resume is excellent' %}
169
+ {% endif %}
170
+
171
+ <p>Resume Score: <strong>{{ score }} / {{ max_score }} ({{ percentage|round(2) }}%)</strong></p>
172
+ <p>Evaluation: <strong>{{ rating }}</strong></p>
173
+ </div>
174
+ </div>
175
+
176
+ <!-- Suggestions Section (Right) -->
177
+ <div class="suggestion-section" style="flex: 1;">
178
+ <p>
179
+ <strong>Tips & Hints:</strong>
180
+ <button class="btn-toggle" data-toggle="collapse" data-target="#basic-info-suggestions" aria-expanded="false" aria-controls="basic-info-suggestions">
181
+ <i class="fas fa-lightbulb"></i> Click here
182
+ </button>
183
+ </p>
184
+ <div class="collapse" id="basic-info-suggestions">
185
+ <ul>
186
+ <li>Incorporate job-specific keywords to match your desired role.</li>
187
+ <li>Quantify your achievements, such as "Reduced costs by 15%." </li>
188
+ <li>Keep formatting consistent, including fonts and alignment.</li>
189
+ <li>Add a concise professional summary highlighting key skills.</li>
190
+ <li>Proofread thoroughly to eliminate grammar or spelling mistakes.</li>
191
+ </ul>
192
+ </div>
193
+ </div>
194
+
195
+ <!-- Detailed Score Breakdown Section -->
196
+ <div class="info-item">
197
+ <div class="section-header">
198
+ <i class="fas fa-list"></i>
199
+ <div class="info-title">Detailed Score Breakdown:</div>
200
+ </div>
201
+ <div class="info-content">
202
+ <ul>
203
+ <li>Name: {{ parsed_resume['name_score'] }} / 3</li>
204
+ <li>Contact Number: {{ parsed_resume['contact_number_score'] }} / 3</li>
205
+ <li>Email: {{ parsed_resume['email_score'] }} / 3</li>
206
+ <li>LinkedIn URL: {{ parsed_resume['linkedin_url_score'] }} / 3</li>
207
+ <li>GitHub URL: {{ parsed_resume['github_url_score'] }} / 3</li>
208
+ <li>Missing Sections: {{ parsed_resume['missing_sections_score'] }} / 10</li>
209
+ <li>Common Projects: {{ parsed_resume['common_projects_score'] }} / 5</li>
210
+ <li>Section Order: {{ parsed_resume['section_order_score'] }} / 2</li>
211
+ <li>Projects: {{ parsed_resume['projects_score'] }} / 5</li>
212
+ <li>Certifications: {{ parsed_resume['certifications_score'] }} / 7</li>
213
+ <li>Relevant Experience: {{ parsed_resume['relevant_experience_score'] }} / 5</li>
214
+ <li>Data Science Skills: {{ parsed_resume['ds_skills_score'] }} / 5</li>
215
+ <li>Extra URLs Bonus: {{ parsed_resume['extra_urls_bonus'] }} / 5</li>
216
+ <li>Summary: {{ parsed_resume['summary_score'] }} / 5</li>
217
+ <li>Project Link: {{ parsed_resume['project_link_score'] }} / 2</li>
218
+ </ul>
219
+ </div>
220
+ </div>
221
+ </div>
222
+
223
+ <div class="info-section" style="display: flex; justify-content: space-between; align-items: flex-start; gap: 20px;">
224
+ <!-- Basic Information Section (Left) -->
225
+ <div class="info-item" style="flex: 1;">
226
+ <div class="section-header">
227
+ <i class="fas fa-user"></i>
228
+ <div class="info-title">Basic Information Section:</div>
229
+ </div>
230
+ <div class="info-content">{{ parsed_resume['basic_information_section'] }}</div>
231
+ </div>
232
+
233
+ <!-- Suggestions Section (Right) -->
234
+ <div class="suggestion-section" style="flex: 1;">
235
+ <p>
236
+ <strong>Tips & Hints:</strong>
237
+ <button class="btn-toggle" data-toggle="collapse" data-target="#basic-info-suggestions" aria-expanded="false" aria-controls="basic-info-suggestions">
238
+ <i class="fas fa-lightbulb"></i> Click here
239
+ </button>
240
+ </p>
241
+ <div class="collapse" id="basic-info-suggestions">
242
+ <ul>
243
+ <li>Ensure your contact information is up-to-date and professional (e.g., email address).</li>
244
+ <li>Make sure the profile summary highlights your core skills and career goals.</li>
245
+ <li>If applicable, add relevant certifications, degrees, and professional training to enhance credibility.</li>
246
+ <li>Review and update any outdated or irrelevant personal information (e.g., hobbies, languages, etc.).</li>
247
+ <li>Ensure that your professional experience is listed in chronological order, with key achievements highlighted.</li>
248
+ </ul>
249
+ </div>
250
+ </div>
251
+ </div>
252
+
253
+ <!-- Name Section -->
254
+ <div class="info-item">
255
+ <div class="section-header">
256
+ <i class="fas fa-id-badge"></i>
257
+ <div class="info-title">Name:</div>
258
+ </div>
259
+ <div class="info-content">{{ parsed_resume['name'] }}</div>
260
+ </div>
261
+
262
+ <!-- Contact Number Section -->
263
+ <div class="info-item">
264
+ <div class="section-header">
265
+ <i class="fas fa-phone"></i>
266
+ <div class="info-title">Contact Number:</div>
267
+ </div>
268
+ <div class="info-content">{{ parsed_resume['contact_number'] }}</div>
269
+ </div>
270
+
271
+ <!-- Email Section -->
272
+ <div class="info-item">
273
+ <div class="section-header">
274
+ <i class="fas fa-envelope"></i>
275
+ <div class="info-title">Email:</div>
276
+ </div>
277
+ <div class="info-content">{{ parsed_resume['email'] }}</div>
278
+ </div>
279
+
280
+ <!-- LinkedIn URL Section -->
281
+ <div class="info-item">
282
+ <div class="section-header">
283
+ <i class="fab fa-linkedin"></i>
284
+ <div class="info-title">LinkedIn:</div>
285
+ </div>
286
+ <div class="info-content"><a href="{{ parsed_resume['linkedin_urls'] }}">{{ parsed_resume['linkedin_urls'] }}</a></div>
287
+ </div>
288
+
289
+ <!-- GitHub URL Section -->
290
+ <div class="info-item">
291
+ <div class="section-header">
292
+ <i class="fab fa-github"></i>
293
+ <div class="info-title">GitHub:</div>
294
+ </div>
295
+ <div class="info-content"><a href="{{ parsed_resume['github_urls'] }}">{{ parsed_resume['github_urls'] }}</a></div>
296
+ </div>
297
+
298
+ <div class="info-section" style="display: flex; flex-wrap: wrap; justify-content: space-between; gap: 20px;">
299
+ <!-- Extra URLs Section (Left) -->
300
+ <div class="info-item" style="flex: 1;">
301
+ <div class="section-header">
302
+ <i class="fas fa-link"></i>
303
+ <div class="info-title">Additional URLs:</div>
304
+ </div>
305
+ <div class="info-content">
306
+ <ul>
307
+ {% if parsed_resume['extra_urls'] %}
308
+ {% for url in parsed_resume['extra_urls'] %}
309
+ <li><a href="{{ url }}">{{ url }}</a></li>
310
+ {% endfor %}
311
+ {% else %}
312
+ <p class="no-data">No additional URLs found.</p>
313
+ {% endif %}
314
+ </ul>
315
+ </div>
316
+ </div>
317
+
318
+ <!-- Suggestions Section (Right) -->
319
+ <div class="suggestion-section" style="flex: 1;">
320
+ <p>
321
+ <strong>Tips & Hints:</strong>
322
+ <button class="btn-toggle" data-toggle="collapse" data-target="#other-urls-suggestions" aria-expanded="false" aria-controls="other-urls-suggestions">
323
+ <i class="fas fa-lightbulb"></i> Click here
324
+ </button>
325
+ </p>
326
+ <div class="collapse" id="other-urls-suggestions">
327
+ <ul>
328
+ <li>Ensure all URLs are up-to-date and working. Remove any broken or outdated links.</li>
329
+ <li>If you have a portfolio, blog, or personal website, include the URL to showcase your work.</li>
330
+ <li>Ensure that your LinkedIn, GitHub, and other professional links are included to make it easy for employers to find more about you.</li>
331
+ <li>If applicable, provide links to any published work or notable projects relevant to the job you're applying for.</li>
332
+ <li>Ensure that any social media links provided are professional (e.g., avoid personal or non-professional accounts).</li>
333
+ </ul>
334
+ </div>
335
+ </div>
336
+ </div>
337
+
338
+ <!-- Found Skills Section -->
339
+ <div class="info-section" style="display: flex; flex-wrap: wrap; justify-content: space-between; gap: 20px;">
340
+ <div class="info-item" style="flex: 1;">
341
+ <p><strong>Found Skills:</strong>
342
+ <button class="btn-toggle" data-toggle="collapse" data-target="#found-keywords" aria-expanded="false" aria-controls="found-keywords">
343
+ <i class="fas fa-plus-circle"></i> Click here
344
+ </button>
345
+ </p>
346
+ <div class="collapse" id="found-keywords">
347
+ <ul>
348
+ {% if parsed_resume['found_keywords'] %}
349
+ {% for keyword in parsed_resume['found_keywords'] %}
350
+ <li>{{ keyword }}</li>
351
+ {% endfor %}
352
+ {% else %}
353
+ <p class="no-data">No skills found.</p>
354
+ {% endif %}
355
+ </ul>
356
+ </div>
357
+ </div>
358
+ <div class="suggestion-section" style="flex: 1;">
359
+ <p>
360
+ <strong>Tips & Hints:</strong>
361
+ <button class="btn-toggle" data-toggle="collapse" data-target="#found-skills-suggestions" aria-expanded="false" aria-controls="found-skills-suggestions">
362
+ <i class="fas fa-lightbulb"></i> Click here
363
+ </button>
364
+ </p>
365
+ <div class="collapse" id="found-skills-suggestions">
366
+ <ul>
367
+ <li>Ensure the listed skills match the requirements of the job you're applying for.</li>
368
+ <li>Highlight skills with measurable outcomes or certifications to demonstrate proficiency.</li>
369
+ <li>Ensure that key skills from the job description are included in your resume to improve your chances.</li>
370
+ <li>If possible, categorize skills into technical, soft skills, and language proficiency for clarity.</li>
371
+ <li>Consider adding any relevant new skills acquired recently, such as software or tools.</li>
372
+ </ul>
373
+ </div>
374
+ </div>
375
+ </div>
376
+
377
+ <!-- Missing Skills Section -->
378
+ <div class="info-section" style="display: flex; flex-wrap: wrap; justify-content: space-between; gap: 20px;">
379
+ <div class="info-item" style="flex: 1;">
380
+ <p><strong>Missing Skills:</strong>
381
+ <button class="btn-toggle" data-toggle="collapse" data-target="#missing-skills" aria-expanded="false" aria-controls="missing-skills">
382
+ <i class="fas fa-minus-circle"></i> Click here
383
+ </button>
384
+ </p>
385
+ <div class="collapse" id="missing-skills">
386
+ <ul>
387
+ {% if parsed_resume['missing_skills'] %}
388
+ {% for skill in parsed_resume['missing_skills'] %}
389
+ <li>{{ skill }}</li>
390
+ {% endfor %}
391
+ {% else %}
392
+ <p class="no-data">No missing skills found.</p>
393
+ {% endif %}
394
+ </ul>
395
+ </div>
396
+ </div>
397
+ <div class="suggestion-section" style="flex: 1;">
398
+ <p>
399
+ <strong>Tips & Hints:</strong>
400
+ <button class="btn-toggle" data-toggle="collapse" data-target="#missing-skills-suggestions" aria-expanded="false" aria-controls="missing-skills-suggestions">
401
+ <i class="fas fa-lightbulb"></i> Click here
402
+ </button>
403
+ </p>
404
+ <div class="collapse" id="missing-skills-suggestions">
405
+ <ul>
406
+ <li>Consider acquiring and adding any critical skills relevant to the job you are applying for.</li>
407
+ <li>Look for online courses, certifications, or workshops to enhance your skillset.</li>
408
+ <li>Update your resume to reflect the new skills as you acquire them.</li>
409
+ </ul>
410
+ </div>
411
+ </div>
412
+ </div>
413
+
414
+
415
+ <div class="info-container">
416
+ <!-- Left Section: Grammar & Spelling Issues -->
417
+ <div class="info-item left-section">
418
+ <div class="section-header">
419
+ <i class="fas fa-spell-check"></i>
420
+ <div class="info-title">Grammar & Spelling Issues in Career Objective and Profile Summary:</div>
421
+ </div>
422
+ <div class="info-content">
423
+ <button class="btn-toggle" data-toggle="collapse" data-target="#grammar-issues" aria-expanded="false" aria-controls="grammar-issues">
424
+ <i class="fas fa-plus-circle"></i> Click here
425
+ </button>
426
+ <div class="collapse" id="grammar-issues">
427
+ {% if parsed_resume['section_grammar_check_issues'] %}
428
+ {% for section, issues in parsed_resume['section_grammar_check_issues'].items() %}
429
+ <div class="info-subitem">
430
+ <div class="subsection-header">{{ section }} Grammar & Spelling Issues:</div>
431
+ <ul>
432
+ {% for issue in issues["grammar_issues"] %}
433
+ <li>
434
+ <strong>Context:</strong> {{ issue["context"] }} <br>
435
+ <strong>Error:</strong> {{ issue["error"] }} <br>
436
+ <strong>Suggestion:</strong> {{ issue["suggested_correction"] | join(", ") }}
437
+ </li>
438
+ {% endfor %}
439
+ {% for issue in issues["spelling_errors"] %}
440
+ <li>
441
+ <strong>Context:</strong> {{ issue["context"] }} <br>
442
+ <strong>Spelling Mistake:</strong> {{ issue["error"] }} <br>
443
+ <strong>Suggestion:</strong> {{ issue["suggested_correction"] | join(", ") }}
444
+ </li>
445
+ {% endfor %}
446
+ </ul>
447
+ </div>
448
+ {% endfor %}
449
+ {% else %}
450
+ <p class="no-data">No grammar or spelling issues found.</p>
451
+ {% endif %}
452
+ </div>
453
+ </div>
454
+ </div>
455
+
456
+ <!-- Right Section: Suggestions for Grammar Issues -->
457
+ <div class="suggestion-section right-section">
458
+ <div class="section-header">
459
+ <i class="fas fa-lightbulb"></i>
460
+ <div class="info-title">Tips & Hints:</div>
461
+ </div>
462
+ <button class="btn-toggle" data-toggle="collapse" data-target="#grammar-issues-suggestions" aria-expanded="false" aria-controls="grammar-issues-suggestions">
463
+ <i class="fas fa-lightbulb"></i> Click here
464
+ </button>
465
+ <div class="collapse" id="grammar-issues-suggestions">
466
+ <ul>
467
+ <li>Proofread your career objective and profile summary for any grammatical errors.</li>
468
+ <li>Use grammar-check tools like Grammarly to catch errors.</li>
469
+ <li>Ensure sentence structure is clear and professional.</li>
470
+ </ul>
471
+ </div>
472
+ </div>
473
+ </div>
474
+
475
+
476
+ <div class="container">
477
+ <div class="row">
478
+ <!-- Left Column: Parsed Resume Data -->
479
+ <div class="col-md-6">
480
+ <div class="info-item">
481
+ <div class="section-header">
482
+ <i class="fas fa-sort-amount-up"></i>
483
+ <div class="info-title">Experience Order:</div>
484
+ </div>
485
+ <div class="info-content">{{ parsed_resume['experience_order_suggestion'] or 'No suggestion available.' }}</div>
486
+ </div>
487
+
488
+ <div class="info-item">
489
+ <div class="section-header">
490
+ <i class="fas fa-briefcase"></i>
491
+ <div class="info-title">Work Experience Check:</div>
492
+ </div>
493
+ <div class="info-content">{{ parsed_resume['work_experience_check'] or 'No issues found.' }}</div>
494
+ </div>
495
+
496
+ <div class="info-item">
497
+ <div class="section-header">
498
+ <i class="fas fa-clock"></i>
499
+ <div class="info-title">Project Length:</div>
500
+ </div>
501
+ <div class="info-content">{{ parsed_resume['project_length_suggestion'] or 'No suggestion available.' }}</div>
502
+ </div>
503
+
504
+ <div class="info-item">
505
+ <div class="section-header">
506
+ <i class="fas fa-certificate"></i>
507
+ <div class="info-title">Certifications:</div>
508
+ </div>
509
+ <div class="info-content">
510
+ {% if parsed_resume['certifications']['found'] %}
511
+ <span style="color: green;">✔ {{ parsed_resume['certifications']['message'] }}</span>
512
+ <br>
513
+ <strong>Extracted Text:</strong> {{ parsed_resume['certifications']['text'] }}
514
+ {% else %}
515
+ <span style="color: red;">✖ No certification found.</span>
516
+ {% endif %}
517
+ </div>
518
+ </div>
519
+
520
+ <div class="info-item">
521
+ <div class="section-header">
522
+ <i class="fas fa-graduation-cap"></i>
523
+ <div class="info-title">Education Order:</div>
524
+ </div>
525
+ <div class="info-content">{{ parsed_resume['education_order_suggestion'] or 'No suggestion available.' }}</div>
526
+ </div>
527
+ </div>
528
+
529
+ <!-- Right Column: Collapsible Suggestions -->
530
+ <div class="col-md-6">
531
+ <div class="suggestion-section">
532
+ <p>
533
+ <strong>Tips & Hints:</strong>
534
+ <button class="btn-toggle" data-toggle="collapse" data-target="#experience-suggestions">
535
+ <i class="fas fa-lightbulb"></i> Click here
536
+ </button>
537
+ </p>
538
+ <div class="collapse" id="experience-suggestions">
539
+ <ul>
540
+ <li>Ensure that your most recent experience appears at the top.</li>
541
+ <li>Group related job experiences together.</li>
542
+ </ul>
543
+ </div>
544
+ </div>
545
+
546
+ <div class="suggestion-section">
547
+ <p>
548
+ <strong>Tips & Hints:</strong>
549
+ <button class="btn-toggle" data-toggle="collapse" data-target="#work-experience-suggestions">
550
+ <i class="fas fa-lightbulb"></i> Click here
551
+ </button>
552
+ </p>
553
+ <div class="collapse" id="work-experience-suggestions">
554
+ <ul>
555
+ <li>List your work experience in reverse chronological order.</li>
556
+ <li>Fill employment gaps with freelance or consulting roles.</li>
557
+ <li>Highlight achievements, not just responsibilities.</li>
558
+ </ul>
559
+ </div>
560
+ </div>
561
+
562
+ <div class="suggestion-section">
563
+ <p>
564
+ <strong>Tips & Hints:</strong>
565
+ <button class="btn-toggle" data-toggle="collapse" data-target="#project-length-suggestions">
566
+ <i class="fas fa-lightbulb"></i> Click here
567
+ </button>
568
+ </p>
569
+ <div class="collapse" id="project-length-suggestions">
570
+ <ul>
571
+ <li>Long-term projects (6+ months) show commitment.</li>
572
+ <li>Use metrics to highlight project impact.</li>
573
+ <li>Include short-term projects to demonstrate versatility.</li>
574
+ </ul>
575
+ </div>
576
+ </div>
577
+
578
+ <div class="suggestion-section">
579
+ <p>
580
+ <strong>Tips & Hints:</strong>
581
+ <button class="btn-toggle" data-toggle="collapse" data-target="#certifications-suggestions">
582
+ <i class="fas fa-lightbulb"></i> Click here
583
+ </button>
584
+ </p>
585
+ <div class="collapse" id="certifications-suggestions">
586
+ <ul>
587
+ <li>Add relevant industry certifications.</li>
588
+ <li>Include well-known certifications from Coursera, Udemy, etc.</li>
589
+ <li>Ensure your certifications are up to date.</li>
590
+ </ul>
591
+ </div>
592
+ </div>
593
+
594
+ <div class="suggestion-section">
595
+ <p>
596
+ <strong>Tips & Hints:</strong>
597
+ <button class="btn-toggle" data-toggle="collapse" data-target="#education-suggestions">
598
+ <i class="fas fa-lightbulb"></i> Click here
599
+ </button>
600
+ </p>
601
+ <div class="collapse" id="education-suggestions">
602
+ <ul>
603
+ <li>List your most recent education at the top.</li>
604
+ </ul>
605
+ </div>
606
+ </div>
607
+ </div>
608
+ </div>
609
+ </div>
610
+
611
+ <div class="container">
612
+ <div class="row">
613
+ <!-- Left Column: Parsed Resume Data -->
614
+ <div class="col-md-6">
615
+ <div class="info-item">
616
+ <div class="section-header">
617
+ <i class="fas fa-link"></i>
618
+ <div class="info-title">Recommended Blogs:</div>
619
+ </div>
620
+ <div class="info-content">
621
+ {% if parsed_resume['recommended_blogs'] %}
622
+ <ul>
623
+ {% for blog in parsed_resume['recommended_blogs'] %}
624
+ <li><a href="{{ blog }}" target="_blank">{{ blog }}</a></li>
625
+ {% endfor %}
626
+ </ul>
627
+ {% else %}
628
+ No recommended blogs found.
629
+ {% endif %}
630
+ </div>
631
+ </div>
632
+
633
+ <div class="info-item">
634
+ <div class="section-header">
635
+ <i class="fas fa-youtube"></i>
636
+ <div class="info-title">Recommended YouTube Links:</div>
637
+ </div>
638
+ <div class="info-content">
639
+ {% if parsed_resume['recommended_youtube_links'] %}
640
+ <ul>
641
+ {% for youtube_link in parsed_resume['recommended_youtube_links'] %}
642
+ <li><a href="{{ youtube_link }}" target="_blank">{{ youtube_link }}</a></li>
643
+ {% endfor %}
644
+ </ul>
645
+ {% else %}
646
+ No recommended YouTube links found.
647
+ {% endif %}
648
+ </div>
649
+ </div>
650
+ </div>
651
+
652
+ <!-- Right Column: Collapsible Suggestions -->
653
+ <div class="col-md-6">
654
+ <div class="suggestion-section">
655
+ <p>
656
+ <strong>Tips & Hints:</strong>
657
+ <button class="btn-toggle" data-toggle="collapse" data-target="#blogs-suggestions">
658
+ <i class="fas fa-lightbulb"></i> Click here
659
+ </button>
660
+ </p>
661
+ <div class="collapse" id="blogs-suggestions">
662
+ <ul>
663
+ <li>Read blogs related to your field to stay updated with trends.</li>
664
+ <li>Follow blogs from industry leaders for valuable insights.</li>
665
+ <li>Engage by commenting or sharing key takeaways.</li>
666
+ <li>Consider writing your own blog to showcase expertise.</li>
667
+ </ul>
668
+ </div>
669
+ </div>
670
+
671
+ <div class="suggestion-section">
672
+ <p>
673
+ <strong>Tips & Hints:</strong>
674
+ <button class="btn-toggle" data-toggle="collapse" data-target="#youtube-suggestions">
675
+ <i class="fas fa-lightbulb"></i> Click here
676
+ </button>
677
+ </p>
678
+ <div class="collapse" id="youtube-suggestions">
679
+ <ul>
680
+ <li>Watch videos related to your industry or career growth.</li>
681
+ <li>Take notes and apply key learnings to your resume or projects.</li>
682
+ <li>Follow reputable channels for consistent learning.</li>
683
+ <li>Use subtitles or playback speed to enhance comprehension.</li>
684
+ </ul>
685
+ </div>
686
+ </div>
687
+ </div>
688
+ </div>
689
+ </div>
690
+
691
+
692
+ </div>
693
+ </div>
694
+ </div>
695
+ </div>
696
+
697
+ <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
698
+ <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.1/dist/umd/popper.min.js"></script>
699
+ <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
700
+ </body>
701
+
702
+ </html>
templates/upload_resume.html ADDED
@@ -0,0 +1,134 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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>Upload Resume</title>
7
+ <style>
8
+ body {
9
+ background-color: #121212; /* Dark background color for a modern look */
10
+ font-family: 'Arial', sans-serif;
11
+ color: #e0e0e0; /* Light gray text for better contrast */
12
+ margin: 0;
13
+ padding: 0;
14
+ display: flex;
15
+ align-items: center;
16
+ justify-content: center;
17
+ height: 100vh;
18
+ }
19
+ .container {
20
+ max-width: 600px;
21
+ padding: 30px;
22
+ background-color: #1e1e1e; /* Dark gray background */
23
+ border-radius: 15px;
24
+ box-shadow: 0 4px 25px rgba(0, 0, 0, 0.7); /* Enhanced shadow effect */
25
+ text-align: center;
26
+ transform: perspective(1200px) rotateY(5deg); /* Subtle 3D rotation */
27
+ transition: transform 0.4s ease-in-out; /* Smooth transform transition */
28
+ }
29
+ .container:hover {
30
+ transform: perspective(1200px) rotateY(0); /* Remove rotation on hover */
31
+ }
32
+ h1 {
33
+ color: #4CAF50; /* Green heading color */
34
+ text-shadow: 0 4px 8px rgba(0, 0, 0, 0.8); /* Enhanced text shadow */
35
+ margin-bottom: 20px;
36
+ font-size: 24px; /* Slightly larger heading */
37
+ }
38
+ @keyframes glow {
39
+ 0%, 100% { text-shadow: 0 0 15px #4CAF50, 0 0 25px #4CAF50, 0 0 35px #4CAF50, 0 0 45px #4CAF50, 0 0 55px #4CAF50; }
40
+ 50% { text-shadow: 0 0 25px #4CAF50, 0 0 35px #4CAF50, 0 0 45px #4CAF50, 0 0 55px #4CAF50, 0 0 65px #4CAF50; }
41
+ }
42
+ .upload-form {
43
+ margin-top: 20px;
44
+ }
45
+ .upload-form label {
46
+ display: block;
47
+ margin-bottom: 10px;
48
+ font-size: 18px; /* Larger font size for labels */
49
+ font-weight: bold; /* Bold label text */
50
+ color: #e0e0e0; /* Light gray text color */
51
+ }
52
+ .upload-form input[type=file] {
53
+ padding: 10px;
54
+ margin-top: 10px;
55
+ border: 2px solid #333; /* Dark gray border */
56
+ background-color: #222; /* Slightly darker background for the file input */
57
+ border-radius: 5px;
58
+ color: #f0f0f0; /* Light gray text */
59
+ box-shadow: inset 0 0 5px rgba(255, 255, 255, 0.2); /* Inner shadow */
60
+ transition: background-color 0.3s, border-color 0.3s; /* Smooth transitions */
61
+ width: 100%; /* Full-width input */
62
+ }
63
+ .upload-form input[type=file]:hover {
64
+ background-color: #333; /* Darker gray on hover */
65
+ border-color: #4CAF50; /* Green border on hover */
66
+ }
67
+ .upload-form input[type=submit] {
68
+ padding: 12px 24px;
69
+ margin-top: 20px;
70
+ background-color: #4CAF50; /* Green button background color */
71
+ color: white; /* White button text color */
72
+ border: none;
73
+ border-radius: 8px; /* Slightly larger rounded corners */
74
+ cursor: pointer;
75
+ font-size: 16px; /* Larger font size */
76
+ transition: background-color 0.3s, transform 0.3s, box-shadow 0.3s; /* Smooth transitions */
77
+ }
78
+ .upload-form input[type=submit]:hover {
79
+ background-color: #45a049; /* Darker green on hover */
80
+ transform: scale(1.05); /* Slight scale effect on hover */
81
+ box-shadow: 0 8px 15px rgba(0, 0, 0, 0.4); /* Enhanced shadow on hover */
82
+ }
83
+ .upload-form input[type=submit]:active {
84
+ transform: scale(1); /* Scale down on click */
85
+ box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3); /* Reduced shadow on click */
86
+ }
87
+ .error-message {
88
+ color: #f44336; /* Red color for error messages */
89
+ margin-top: 10px;
90
+ font-size: 16px; /* Slightly larger font size for error messages */
91
+ font-weight: bold; /* Bold error messages */
92
+ }
93
+ @media (max-width: 600px) {
94
+ .container {
95
+ margin: 20px;
96
+ padding: 15px;
97
+ box-shadow: none; /* Remove shadow on smaller screens */
98
+ }
99
+ .upload-form input[type=file], .upload-form input[type=submit] {
100
+ width: 100%; /* Full-width inputs on smaller screens */
101
+ }
102
+ }
103
+ </style>
104
+ </head>
105
+ <body>
106
+ <div class="container">
107
+ <h1>Upload Your Resume</h1>
108
+ <form class="upload-form" action="/v1/resumes/" method="post" enctype="multipart/form-data" onsubmit="return validateFile()">
109
+ <label for="file-upload">Select your resume file:</label>
110
+ <input type="file" id="file-upload" name="file" required>
111
+ <div class="error-message" id="error-message"></div>
112
+ <input type="submit" value="Upload">
113
+ </form>
114
+ </div>
115
+
116
+ <script>
117
+ function validateFile() {
118
+ const fileInput = document.getElementById('file-upload');
119
+ const errorMessage = document.getElementById('error-message');
120
+ const file = fileInput.files[0];
121
+
122
+ if (file) {
123
+ const fileType = file.type;
124
+ if (fileType !== 'application/pdf') {
125
+ errorMessage.textContent = 'Please upload a PDF file.';
126
+ return false; // Prevent form submission
127
+ }
128
+ errorMessage.textContent = ''; // Clear any previous error message
129
+ }
130
+ return true; // Allow form submission
131
+ }
132
+ </script>
133
+ </body>
134
+ </html>