Hugging Face's logo

Spaces:
Imarticuslearning
/
resume_parser
Runtime error

App Files Community
Imarticuslearning commited on
Commit
6017878
·
verified ·
1 Parent(s): 74ce92e

Upload 3 files

Browse files
Files changed (3) hide show
  1. templates/home_page.html +185 -0
  2. templates/review_output.html +817 -0
  3. templates/upload_resume.html +134 -0
templates/home_page.html ADDED
@@ -0,0 +1,185 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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>CV Guru - Resume Parser</title>
7
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"/>
8
+ <style>
9
+ body {
10
+ font-family: 'Arial', sans-serif;
11
+ margin: 0;
12
+ padding: 0;
13
+ background: linear-gradient(135deg, #a0c4ff, #b9fbc0);
14
+ }
15
+
16
+ header {
17
+ background: white;
18
+ display: flex;
19
+ justify-content: space-between;
20
+ align-items: center;
21
+ padding: 20px 40px;
22
+ box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
23
+ }
24
+
25
+ .logo {
26
+ display: flex;
27
+ align-items: center;
28
+ gap: 10px;
29
+ }
30
+
31
+ .logo i {
32
+ font-size: 36px;
33
+ color: #4caf50;
34
+ }
35
+
36
+ .logo span {
37
+ font-size: 30px;
38
+ font-weight: bold;
39
+ color: #333;
40
+ }
41
+
42
+ .contact {
43
+ display: flex;
44
+ gap: 30px;
45
+ font-size: 14px;
46
+ color: #444;
47
+ }
48
+
49
+ .contact i {
50
+ color: #4caf50;
51
+ margin-right: 6px;
52
+ }
53
+
54
+ .hero {
55
+ display: flex;
56
+ flex-wrap: wrap;
57
+ align-items: center;
58
+ justify-content: space-between;
59
+ padding: 60px 40px;
60
+ background: white;
61
+ }
62
+
63
+ .hero-text {
64
+ max-width: 50%;
65
+ }
66
+
67
+ .hero-text h1 {
68
+ font-size: 44px;
69
+ color: #333;
70
+ line-height: 1.4;
71
+ }
72
+
73
+ .hero-text h1 span {
74
+ color: #4caf50;
75
+ }
76
+
77
+ .hero-text p {
78
+ font-size: 16px;
79
+ color: #555;
80
+ margin: 20px 0;
81
+ }
82
+
83
+ .search-bar {
84
+ display: flex;
85
+ gap: 10px;
86
+ flex-wrap: wrap;
87
+ margin-top: 25px;
88
+ }
89
+
90
+ .search-bar input,
91
+ .search-bar select {
92
+ padding: 12px;
93
+ font-size: 14px;
94
+ border: 1px solid #ccc;
95
+ border-radius: 6px;
96
+ min-width: 150px;
97
+ }
98
+
99
+ .company-logo img {
100
+ width: 150px; /* Adjust the logo width here */
101
+ height: auto;
102
+ }
103
+
104
+ .search-bar button {
105
+ background: #4caf50;
106
+ color: white;
107
+ border: none;
108
+ padding: 12px 20px;
109
+ border-radius: 6px;
110
+ cursor: pointer;
111
+ transition: 0.3s ease;
112
+ }
113
+
114
+ .search-bar button:hover {
115
+ background: #45a049;
116
+ }
117
+
118
+ .hero-image {
119
+ max-width: 45%;
120
+ text-align: center;
121
+ }
122
+
123
+ .hero-image img {
124
+ width: 90%;
125
+ max-width: 350px;
126
+ border-radius: 12px;
127
+ }
128
+
129
+ @media (max-width: 768px) {
130
+ .hero {
131
+ flex-direction: column;
132
+ text-align: center;
133
+ }
134
+ .hero-text, .hero-image {
135
+ max-width: 100%;
136
+ }
137
+ .search-bar {
138
+ flex-direction: column;
139
+ }
140
+ }
141
+ </style>
142
+ </head>
143
+ <body>
144
+
145
+ <header>
146
+ <div class="company-logo">
147
+ <img src="static\logo.png" alt="Imarticus Logo">
148
+ </div>
149
+
150
+ <div class="logo">
151
+ <i class="fas fa-briefcase"></i>
152
+ <span>CV Guru</span>
153
+ </div>
154
+ <div class="contact">
155
+ <div><i class="fas fa-envelope"></i> support@cvguru.com</div>
156
+ </div>
157
+ </header>
158
+
159
+
160
+ <section class="hero">
161
+ <div class="hero-text">
162
+ <h1>One Platform for <span>Resume Reviews</span><br> and Career Growth</h1>
163
+ <p>Analyze your resume in seconds. Get instant insights, suggestions, and make your job applications stand out.</p>
164
+
165
+ <div class="search-bar">
166
+ <input type="text" placeholder="Enter your name" />
167
+ <select>
168
+ <option>Choose Role</option>
169
+ <option>Data Scientist</option>
170
+ <option>Software Engineer</option>
171
+ <option>Product Manager</option>
172
+ </select>
173
+ <button onclick="window.location.href='/v1/resumes/'">
174
+ <i class="fas fa-upload"></i> Get Started
175
+ </button>
176
+ </div>
177
+ </div>
178
+
179
+ <div class="hero-image">
180
+ <img src="static\resume.gif" alt="Learners Animation">!
181
+ </div>
182
+ </section>
183
+
184
+ </body>
185
+ </html>
templates/review_output.html ADDED
@@ -0,0 +1,817 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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
+ .tips-box {
127
+ opacity: 0;
128
+ visibility: hidden;
129
+ transition: opacity 0.4s ease, visibility 0.4s ease;
130
+ background: #f8f9fa;
131
+ padding: 15px;
132
+ border-radius: 10px;
133
+ box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
134
+ max-width: 300px;
135
+ }
136
+
137
+ .hover-container:hover .tips-box {
138
+ opacity: 1;
139
+ visibility: visible;
140
+ }
141
+
142
+ .no-data {
143
+ color: #e74c3c;
144
+ font-style: italic;
145
+ font-size: 1rem;
146
+ }
147
+
148
+ /* Circular Progress Bar */
149
+ .circle-container {
150
+ display: flex;
151
+ justify-content: center;
152
+ align-items: center;
153
+ margin-top: 20px;
154
+ }
155
+
156
+ .progress-circle {
157
+ width: 150px;
158
+ height: 150px;
159
+ background: #e6e6e6;
160
+ border-radius: 50%;
161
+ position: relative;
162
+ overflow: hidden;
163
+ }
164
+
165
+ .circle {
166
+ width: 100%;
167
+ height: 100%;
168
+ border-radius: 50%;
169
+ background: #3b6ff3;
170
+ clip-path: circle(50% at 50% 50%);
171
+ position: relative;
172
+ overflow: hidden;
173
+ }
174
+
175
+ .mask, .fill {
176
+ width: 100%;
177
+ height: 100%;
178
+ position: absolute;
179
+ border-radius: 50%;
180
+ }
181
+
182
+ .mask.full {
183
+ clip: rect(0px, 150px, 150px, 75px);
184
+ background-color: #3b6ff3;
185
+ transform: rotate(180deg);
186
+ }
187
+
188
+
189
+ .mask.half {
190
+ clip-path: polygon(50% 50%, 0% 100%, 0% 0%);
191
+ transform: rotate(calc(3.6deg * 75)); /* 75 is the percentage */
192
+ transform-origin: center left;
193
+ }
194
+
195
+ .inside-circle {
196
+ width: 100%;
197
+ height: 100%;
198
+ position: absolute;
199
+ top: 0;
200
+ left: 0;
201
+ display: flex;
202
+ justify-content: center;
203
+ align-items: center;
204
+ font-size: 24px;
205
+ font-weight: bold;
206
+ color: #3b6ff3;
207
+ background: white;
208
+ border-radius: 50%;
209
+ width: 110px;
210
+ height: 110px;
211
+ margin: auto;
212
+ top: 20px;
213
+ left: 20px;
214
+ }
215
+
216
+ /* Right Sidebar Styling */
217
+ #rightSidebar {
218
+ position: fixed;
219
+ top: 70px; /* below navbar or header if any, adjust as needed */
220
+ right: 20px;
221
+ width: 320px;
222
+ max-height: 80vh;
223
+ background: rgba(255, 255, 255, 0.95);
224
+ border-radius: 15px;
225
+ box-shadow: 0 4px 15px rgba(0,0,0,0.1);
226
+ padding: 20px;
227
+ overflow-y: auto;
228
+ z-index: 1050;
229
+ font-family: 'Roboto', sans-serif;
230
+ color: #2c3e50;
231
+ }
232
+
233
+ #rightSidebar h4 {
234
+ font-weight: 700;
235
+ color: #2980b9;
236
+ margin-bottom: 10px;
237
+ border-bottom: 2px solid #2980b9;
238
+ padding-bottom: 5px;
239
+ }
240
+
241
+ #rightSidebar .section {
242
+ margin-bottom: 20px;
243
+ }
244
+
245
+ #rightSidebar .section ul {
246
+ padding-left: 20px;
247
+ margin-top: 10px;
248
+ }
249
+
250
+ #rightSidebar .no-data {
251
+ font-style: italic;
252
+ color: #e74c3c;
253
+ font-size: 0.9rem;
254
+ }
255
+
256
+ /* Collapse toggles for sidebar */
257
+ #rightSidebar .btn-toggle {
258
+ background-color: #2980b9;
259
+ color: white;
260
+ font-size: 0.95rem;
261
+ padding: 5px 10px;
262
+ border-radius: 5px;
263
+ border: none;
264
+ width: 100%;
265
+ text-align: left;
266
+ margin-top: 5px;
267
+ display: flex;
268
+ justify-content: space-between;
269
+ align-items: center;
270
+ cursor: pointer;
271
+ user-select: none;
272
+ }
273
+
274
+ #rightSidebar .btn-toggle:hover {
275
+ background-color: #216b9c;
276
+ }
277
+
278
+ #rightSidebar .btn-toggle i {
279
+ transition: transform 0.3s ease;
280
+ }
281
+
282
+ #rightSidebar .btn-toggle[aria-expanded="true"] i {
283
+ transform: rotate(180deg);
284
+ }
285
+
286
+ .skill-tag {
287
+ display: inline-block;
288
+ background-color: #e0f7fa;
289
+ color: #00796b;
290
+ padding: 4px 8px;
291
+ border-radius: 12px;
292
+ font-size: 14px;
293
+ border: 1px solid #b2ebf2;
294
+ margin: 3px;
295
+ }
296
+
297
+ .skills-container {
298
+ display: flex;
299
+ flex-wrap: wrap;
300
+ gap: 6px;
301
+ }
302
+ .gemini-suggestion-box {
303
+ margin-top: 30px;
304
+ padding: 20px;
305
+ border: 1px solid #ccc;
306
+ border-radius: 12px;
307
+ background-color: #f9f9f9;
308
+ max-width: 600px;
309
+ }
310
+
311
+ .gemini-suggestion-box textarea {
312
+ width: 100%;
313
+ height: 120px;
314
+ padding: 10px;
315
+ border-radius: 8px;
316
+ font-size: 14px;
317
+ resize: vertical;
318
+ margin-bottom: 10px;
319
+ }
320
+
321
+ .gemini-suggestion-box button {
322
+ background-color: #5a2a91;
323
+ color: white;
324
+ border: none;
325
+ padding: 10px 16px;
326
+ border-radius: 6px;
327
+ cursor: pointer;
328
+ }
329
+
330
+ .gemini-suggestion-box pre {
331
+ margin-top: 15px;
332
+ background-color: #efefef;
333
+ padding: 12px;
334
+ border-radius: 8px;
335
+ white-space: pre-wrap;
336
+ }
337
+ .score-badge {
338
+ background: #3498db;
339
+ color: white;
340
+ padding: 3px 8px;
341
+ border-radius: 12px;
342
+ font-size: 0.85rem;
343
+ margin-left: 10px;
344
+ }
345
+
346
+ </style>
347
+ </head>
348
+
349
+ <body>
350
+ <div class="container">
351
+ <div class="card shadow-lg p-4">
352
+ <h3 class="text-center mb-4">Resume Review Output</h3>
353
+ <div class="content">
354
+ <div class="info-section">
355
+ <!-- Hover Section -->
356
+ <div class="info-item hover-container">
357
+
358
+ <!-- Resume Score -->
359
+ <div>
360
+ <div class="section-header d-flex align-items-center mb-2">
361
+ <i class="fas fa-star me-2"></i>
362
+ <div class="info-title">Resume Score:</div>
363
+ </div>
364
+
365
+ <div class="info-content">
366
+ <!-- {{ parsed_resume['imarticus_score'] or 'No score available.' }} -->
367
+ </div>
368
+
369
+ </div>
370
+
371
+ <div class="info-content">
372
+ {% set max_score = 52 %}
373
+ {% set score = parsed_resume['imarticus_score'] %}
374
+ {% set percentage = (score / max_score) * 100 %}
375
+
376
+ {% if percentage == 0 %}
377
+ {% set rating = 'The resume is bad' %}
378
+ {% elif percentage <= 15 %}
379
+ {% set rating = 'Resume needs significant improvement' %}
380
+ {% elif percentage <= 35 %}
381
+ {% set rating = 'Resume needs improvement' %}
382
+ {% elif percentage <= 55 %}
383
+ {% set rating = 'Resume is average' %}
384
+ {% elif percentage <= 75 %}
385
+ {% set rating = 'Resume is good' %}
386
+ {% elif percentage <= 90 %}
387
+ {% set rating = 'Resume is very good' %}
388
+ {% else %}
389
+ {% set rating = 'Resume is excellent' %}
390
+ {% endif %}
391
+
392
+ <!--<p>Resume Score: <strong>{{ percentage|round(2) }}% </strong></p>-->
393
+ <!-- Circular Progress Bar Section -->
394
+ <!--
395
+ <div class="progress-circle">
396
+
397
+ <div class="mask full">
398
+ <div class="fill" style="transform: rotate(180deg);"></div>
399
+ </div>
400
+
401
+ <div class="mask half">
402
+ <div class="fill" style="transform: rotate(90deg);"></div>
403
+ <div class="inside-circle">{{ percentage|round(2) }}%</div>
404
+
405
+ </div>
406
+ -->
407
+ <p>Evaluation: <strong>{{ rating }}</strong></p>
408
+ </div>
409
+
410
+ <!--
411
+ <div class="tips-box">
412
+ <p class="fw-bold mb-2"><i class="fas fa-lightbulb me-2"></i>Tips & Hints</p>
413
+ <ul class="mb-0">
414
+ <li>Incorporate job-specific keywords to match your desired role.</li>
415
+ <li>Quantify your achievements, such as "Reduced costs by 15%."</li>
416
+ <li>Keep formatting consistent, including fonts and alignment.</li>
417
+ <li>Add a concise professional summary highlighting key skills.</li>
418
+ <li>Proofread thoroughly to eliminate grammar or spelling mistakes.</li>
419
+ </ul>
420
+ </div>
421
+ -->
422
+
423
+ </div>
424
+
425
+
426
+ <!-- Basic Information Section -->
427
+ <div class="info-item">
428
+ <div class="section-header">
429
+ <i class="fas fa-user"></i>
430
+ <div class="info-title">Basic Information Section:</div>
431
+ </div>
432
+ <div class="info-content">{{ parsed_resume['basic_information_section'] }}</div>
433
+ </div>
434
+ <div class="info-item">
435
+ <div class="section-header">
436
+ <i class="fas fa-id-badge"></i>
437
+ <div class="info-title">Name:</div>
438
+ <span class="score-badge">{{ parsed_resume['name_score'] }} / 3</span>
439
+ </div>
440
+ <div class="info-content">{{ parsed_resume['name'] }}</div>
441
+
442
+ </div>
443
+ <div class="info-item">
444
+ <div class="section-header">
445
+ <i class="fas fa-phone"></i>
446
+ <div class="info-title">Contact Number:</div>
447
+ <span class="score-badge">{{ parsed_resume['contact_score'] }} / 3</span>
448
+ </div>
449
+ <div class="info-content">{{ parsed_resume['contact_number'] }}</div>
450
+ </div>
451
+
452
+ <div class="info-item">
453
+ <div class="section-header">
454
+ <i class="fas fa-envelope"></i>
455
+ <div class="info-title">Email:</div>
456
+ <span class="score-badge">{{ parsed_resume['email_score'] }} / 3</span>
457
+ </div>
458
+ <div class="info-content">{{ parsed_resume['email'] }}</div>
459
+ </div>
460
+
461
+ <div class="info-item">
462
+ <div class="section-header">
463
+ <i class="fab fa-linkedin"></i>
464
+ <div class="info-title">LinkedIn:</div>
465
+ <span class="score-badge">{{ parsed_resume['linkedin_url_score'] }} / 3</span>
466
+ </div>
467
+ <div class="info-content"><a href="{{ parsed_resume['linkedin_urls'] }}">{{ parsed_resume['linkedin_urls'] }}</a></div>
468
+ </div>
469
+
470
+ <div class="info-item">
471
+ <div class="section-header">
472
+ <i class="fab fa-github"></i>
473
+ <div class="info-title">GitHub:</div>
474
+ <span class="score-badge">{{ parsed_resume['github_url_score'] }} / 3</span>
475
+ </div>
476
+ <div class="info-content"><a href="{{ parsed_resume['github_urls'] }}">{{ parsed_resume['github_urls'] }}</a></div>
477
+ </div>
478
+
479
+ <!-- Extra URLs Section -->
480
+ <div class="info-item">
481
+ <div class="section-header">
482
+ <i class="fas fa-link"></i>
483
+ <div class="info-title">Additional URLs:</div>
484
+
485
+ </div>
486
+ <div class="info-content">
487
+ <ul>
488
+ {% if parsed_resume['extra_urls'] %}
489
+ {% for platform, urls in parsed_resume['extra_urls'].items() %}
490
+ {% for url in urls %}
491
+ <li><strong>{{ platform|capitalize }}:</strong> <a href="{{ url }}" target="_blank">{{ url }}</a></li>
492
+ {% endfor %}
493
+ {% endfor %}
494
+ {% else %}
495
+ <p class="no-data">No additional URLs found.</p>
496
+ {% endif %}
497
+ </ul>
498
+ </div>
499
+ </div>
500
+
501
+ <p><strong>Found Skills:</strong></p>
502
+ <div class="skills-container" id="found-keywords">
503
+ <ul>
504
+ {% if parsed_resume['found_keywords'] %}
505
+ {% for keyword in parsed_resume['found_keywords'] %}
506
+ <span class="skill-tag">{{ keyword }}</span>
507
+ {% endfor %}
508
+ {% else %}
509
+ <span style="color: #888;">No skills found.</span>
510
+ {% endif %}
511
+ </ul>
512
+ </div>
513
+ <!--
514
+ <p><strong>Missing Skills:</strong>
515
+ <button class="btn-toggle" data-toggle="collapse" data-target="#missing-skills" aria-expanded="false" aria-controls="missing-skills">
516
+ <i class="fas fa-minus-circle"></i> Click here
517
+ </button>
518
+ </p>
519
+ <div class="collapse" id="missing-skills">
520
+ <ul>
521
+ {% if parsed_resume['missing_skills'] %}
522
+ {% for skill in parsed_resume['missing_skills'] %}
523
+ <li>{{ skill }}</li>
524
+ {% endfor %}
525
+ {% else %}
526
+ <p class="no-data">No missing skills found.</p>
527
+ {% endif %}
528
+ </ul>
529
+ </div>
530
+
531
+ <p><strong>Missing Sections:</strong>
532
+ <button class="btn-toggle" data-toggle="collapse" data-target="#missing-sections" aria-expanded="false" aria-controls="missing-sections">
533
+ <i class="fas fa-minus-circle"></i> Click here
534
+ </button>
535
+ </p>
536
+ <div class="collapse" id="missing-sections">
537
+ <ul>
538
+ {% if parsed_resume['missing_sections'] %}
539
+ {% for section in parsed_resume['missing_sections'] %}
540
+ <li>{{ section }}</li>
541
+ {% endfor %}
542
+ {% else %}
543
+ <p class="no-data">No missing sections found.</p>
544
+ {% endif %}
545
+ </ul>
546
+ </div>
547
+ -->
548
+ <p><strong>Grammar Issues in Career Objective and Profile Summary:</strong>
549
+
550
+ </p>
551
+
552
+ <div class="skills-container" id="grammar-issues">
553
+ <ul>
554
+ {% if parsed_resume['grammar_issues'] %}
555
+ {% for issue in parsed_resume['grammar_issues'] %}
556
+ <li>{{ issue }}</li>
557
+ {% endfor %}
558
+ {% else %}
559
+ <span style="color: #888;">No grammar issues found.</span>
560
+ {% endif %}
561
+ </ul>
562
+ </div>
563
+
564
+
565
+
566
+
567
+
568
+ <p><strong>Spelling Errors:</strong>
569
+
570
+ </p>
571
+ <div class="skills-container" id="spelling-errors">
572
+ <ul>
573
+ {% if parsed_resume['spelling_errors'] %}
574
+ {% for error in parsed_resume['spelling_errors'] %}
575
+ <li>{{ error }}</li>
576
+ {% endfor %}
577
+ {% else %}
578
+ <span style="color: #888;">No spelling errors found.</span>
579
+ {% endif %}
580
+ </ul>
581
+ </div>
582
+
583
+ <!-- Experience and Other Sections -->
584
+ <div class="info-item">
585
+ <div class="section-header">
586
+ <i class="fas fa-sort-amount-up"></i>
587
+ <div class="info-title">Experience Order Suggestion:</div>
588
+ </div>
589
+ <div class="info-content">{{ parsed_resume['experience_order_suggestion'] or 'No suggestion available.' }}</div>
590
+ </div>
591
+
592
+ <div class="info-item">
593
+ <div class="section-header">
594
+ <i class="fas fa-briefcase"></i>
595
+ <div class="info-title">Work Experience Check:</div>
596
+ </div>
597
+ <div class="info-content">{{ parsed_resume['work_experience_check'] or 'No issues found.' }}</div>
598
+ </div>
599
+
600
+
601
+ <div class="info-item">
602
+ <div class="section-header">
603
+ <i class="fas fa-clock"></i>
604
+ <div class="info-title">Project Length Suggestion:</div>
605
+ </div>
606
+ <div class="info-content">{{ parsed_resume['project_length_suggestion'] or 'No suggestion available.' }}</div>
607
+ </div>
608
+
609
+ <div class="info-item">
610
+ <div class="section-header">
611
+ <i class="fas fa-project-diagram"></i>
612
+ <div class="info-title">Common Projects:</div>
613
+ </div>
614
+ <div class="info-content">{{ parsed_resume['common_projects'] or 'No projects found.' }}</div>
615
+ </div>
616
+
617
+ <div class="info-item">
618
+ <div class="section-header">
619
+ <i class="fas fa-certificate"></i>
620
+ <div class="info-title">Certifications & Academic Endeavours:</div>
621
+ </div>
622
+ <div class="info-content">
623
+ {% if parsed_resume['certifications']['found'] %}
624
+ <span style="color: green;">✔ {{ parsed_resume['certifications']['message'] }}</span>
625
+ <br>
626
+ <strong>Extracted Text:</strong> {{ parsed_resume['certifications']['text'] }}
627
+ {% else %}
628
+ <span style="color: red;">✖ No Imarticus certification found.</span>
629
+ {% endif %}
630
+ </div>
631
+ </div>
632
+
633
+
634
+ <div class="info-item">
635
+ <div class="section-header">
636
+ <i class="fas fa-graduation-cap"></i>
637
+ <div class="info-title">Education Order Suggestion:</div>
638
+ </div>
639
+ <div class="info-content">{{ parsed_resume['education_order_suggestion'] or 'No suggestion available.' }}</div>
640
+ </div>
641
+
642
+ <div class="info-item">
643
+ <div class="section-header">
644
+ <i class="fas fa-link"></i>
645
+ <div class="info-title">Recommended Blogs:</div>
646
+ </div>
647
+ <div class="info-content">
648
+ {% if parsed_resume['recommended_blogs'] %}
649
+ <ul>
650
+ {% for blog in parsed_resume['recommended_blogs'] %}
651
+ <li><a href="{{ blog }}" target="_blank">{{ blog }}</a></li>
652
+ {% endfor %}
653
+ </ul>
654
+ {% else %}
655
+ No recommended blogs found.
656
+ {% endif %}
657
+ </div>
658
+ </div>
659
+
660
+
661
+ <div class="info-item">
662
+ <div class="section-header">
663
+ <i class="fas fa-youtube"></i>
664
+ <div class="info-title">Recommended YouTube Links:</div>
665
+ </div>
666
+ <div class="info-content">
667
+ {% if parsed_resume['recommended_youtube_links'] %}
668
+ <ul>
669
+ {% for youtube_link in parsed_resume['recommended_youtube_links'] %}
670
+ <li><a href="{{ youtube_link }}" target="_blank">{{ youtube_link }}</a></li>
671
+ {% endfor %}
672
+ </ul>
673
+ {% else %}
674
+ No recommended YouTube links found.
675
+ {% endif %}
676
+ </div>
677
+ </div>
678
+
679
+ </div>
680
+ </div>
681
+ </div>
682
+ </div>
683
+
684
+ <div id="rightSidebar" aria-label="Resume Suggestions Sidebar" role="complementary">
685
+ <p>Resume Score: <strong>{{ percentage|round(2) }}% </strong></p>
686
+ <div class="progress-circle">
687
+
688
+ <div class="mask full">
689
+ <div class="fill" style="transform: rotate(180deg);"></div> <!-- adjust angle for >50% -->
690
+ </div>
691
+
692
+ <div class="mask half">
693
+ <div class="fill" style="transform: rotate(90deg);"></div> <!-- adjust angle for actual percentage -->
694
+ </div>
695
+ <div class="inside-circle">{{ percentage|round(2) }}%</div>
696
+
697
+ </div>
698
+
699
+ <div class="section">
700
+ <h4><i class="fas fa-lightbulb"></i> Tips for Basic Information</h4>
701
+ <ul>
702
+ <li>Incorporate job-specific keywords to match your desired role.</li>
703
+ <li>Quantify your achievements, such as "Reduced costs by 15%."</li>
704
+ <li>Keep formatting consistent, including fonts and alignment.</li>
705
+ <li>Add a concise professional summary highlighting key skills.</li>
706
+ <li>Proofread thoroughly to eliminate grammar or spelling mistakes.</li>
707
+ </ul>
708
+ </div>
709
+
710
+ <div class="section">
711
+ <button class="btn-toggle" type="button" data-toggle="collapse" data-target="#missingSectionsCollapse" aria-expanded="false" aria-controls="missingSectionsCollapse">
712
+ <span>Show Missing Sections</span> <i class="fas fa-chevron-down"></i>
713
+ </button>
714
+ <div class="collapse" id="missingSectionsCollapse">
715
+ <ul>
716
+ {% if parsed_resume['missing_sections'] %}
717
+ {% for section in parsed_resume['missing_sections'] %}
718
+ <li>{{ section }}</li>
719
+ {% endfor %}
720
+ {% else %}
721
+ <li class="no-data">No missing sections found.</li>
722
+ {% endif %}
723
+ </ul>
724
+ </div>
725
+ </div>
726
+
727
+ <div class="section">
728
+ <button class="btn-toggle" type="button" data-toggle="collapse" data-target="#skillsToAddCollapse" aria-expanded="false" aria-controls="skillsToAddCollapse">
729
+ <span>Skills to be Added</span> <i class="fas fa-chevron-down"></i>
730
+ </button>
731
+ <div class="collapse" id="skillsToAddCollapse">
732
+ <ul>
733
+ {% if parsed_resume['missing_skills'] %}
734
+ {% for skill in parsed_resume['missing_skills'] %}
735
+ <li>{{ skill }}</li>
736
+ {% endfor %}
737
+ {% else %}
738
+ <li class="no-data">No missing skills found.</li>
739
+ {% endif %}
740
+ </ul>
741
+ </div>
742
+ </div>
743
+
744
+ <div class="section">
745
+ <button class="btn-toggle" type="button" data-toggle="collapse" data-target="#projectSuggestionsCollapse" aria-expanded="false" aria-controls="projectSuggestionsCollapse">
746
+ <span>Project Suggestions</span> <i class="fas fa-chevron-down"></i>
747
+ </button>
748
+ <div class="collapse" id="projectSuggestionsCollapse">
749
+ <ul>
750
+ {% if parsed_resume['common_projects'] %}
751
+ <li>{{ parsed_resume['common_projects'] }}</li>
752
+ {% else %}
753
+ <li class="no-data">No project suggestions available.</li>
754
+ {% endif %}
755
+ </ul>
756
+ </div>
757
+ </div>
758
+
759
+ <div class="section">
760
+ <button class="btn-toggle" type="button" data-toggle="collapse" data-target="#certificationSuggestionsCollapse" aria-expanded="false" aria-controls="certificationSuggestionsCollapse">
761
+ <span>Certifications Based Suggestions</span> <i class="fas fa-chevron-down"></i>
762
+ </button>
763
+ <div class="collapse" id="certificationSuggestionsCollapse">
764
+ <div>
765
+ {% if parsed_resume['certifications']['found'] %}
766
+ <p style="color: green;">✔ {{ parsed_resume['certifications']['message'] }}</p>
767
+ <p><strong>Extracted Text:</strong> {{ parsed_resume['certifications']['text'] }}</p>
768
+ {% else %}
769
+ <p class="no-data">✖ No Imarticus certification found.</p>
770
+ {% endif %}
771
+ </div>
772
+ </div>
773
+ </div>
774
+
775
+ <div class="section">
776
+ <button class="btn-toggle" type="button" data-toggle="collapse" data-target="#projectSuggestionsCollapse" aria-expanded="false" aria-controls="projectSuggestionsCollapse">
777
+ <span>Grammar Issues</span> <i class="fas fa-chevron-down"></i>
778
+ </button>
779
+ <div class="skills-container" id="grammar-issues">
780
+ <ul>
781
+ {% if parsed_resume['grammar_issues'] %}
782
+ {% for issue in parsed_resume['grammar_issues'] %}
783
+ <li>{{ issue }}</li>
784
+ {% endfor %}
785
+ {% else %}
786
+ <span style="color: #888;">No grammar issues found.</span>
787
+ {% endif %}
788
+ </ul>
789
+ </div>
790
+ </div>
791
+ </div>
792
+
793
+
794
+ <!-- Toast Container for Missing Section Alerts -->
795
+ <div aria-live="polite" aria-atomic="true"
796
+ style="position: fixed; top: 20px; right: 20px; z-index: 1060;">
797
+ <div id="missingInfoToast" class="toast" role="alert" aria-live="assertive"
798
+ aria-atomic="true" data-delay="7000">
799
+ <div class="toast-header bg-danger text-white">
800
+ <strong class="mr-auto">Missing Information Alert</strong>
801
+ <button type="button" class="ml-2 mb-1 close text-white" data-dismiss="toast" aria-label="Close">
802
+ <span aria-hidden="true">&times;</span>
803
+ </button>
804
+ </div>
805
+ <div class="toast-body">
806
+ <ul id="missingInfoList" style="margin:0; padding-left: 20px;"></ul>
807
+ </div>
808
+ </div>
809
+ </div>
810
+
811
+ <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
812
+ <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
813
+ <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.1/dist/umd/popper.min.js"></script>
814
+ <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
815
+ </body>
816
+
817
+ </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>