Hugging Face's logo

Spaces:
WebashalarForML
/
ResumeExtractor2
Sleeping

App Files Community
WebashalarForML commited on
Commit
6f0913d
·
verified ·
1 Parent(s): a1097e1

Upload 6 files

Browse files
Files changed (6) hide show
  1. templates/404.html +55 -0
  2. templates/500.html +55 -0
  3. templates/error.html +55 -0
  4. templates/index.html +259 -0
  5. templates/loading.html +57 -0
  6. templates/result.html +365 -0
templates/404.html ADDED
@@ -0,0 +1,55 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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">
6
+ <title>404 Not Found</title>
7
+ <style>
8
+ body {
9
+ background-color: #1c1c1e;
10
+ font-family: "Poppins", sans-serif;
11
+ color: #f5f5f7;
12
+ }
13
+ h1 {
14
+ color: #e5e5e7;
15
+ text-align: center;
16
+ margin-bottom: 20px;
17
+ }
18
+ .container {
19
+ background-color: #2c2c2e;
20
+ padding: 30px;
21
+ border-radius: 15px;
22
+ box-shadow: 0 8px 16px rgba(0, 0, 0, 0.5);
23
+ max-width: 600px;
24
+ margin: 50px auto;
25
+ }
26
+ .section-title {
27
+ color: #ff9f0a;
28
+ font-size: 1.5rem;
29
+ font-weight: bold;
30
+ margin-top: 20px;
31
+ border-bottom: 2px solid #ff9f0a;
32
+ padding-bottom: 10px;
33
+ }
34
+ .btn-reset {
35
+ background-color: #ff453a;
36
+ color: white;
37
+ border: none;
38
+ padding: 10px 20px;
39
+ border-radius: 5px;
40
+ transition: background-color 0.3s ease;
41
+ text-decoration: none;
42
+ }
43
+ .btn-reset:hover {
44
+ background-color: #e03a2f;
45
+ }
46
+ </style>
47
+ </head>
48
+ <body>
49
+ <div class="container">
50
+ <h1 class="section-title">404 Not Found</h1>
51
+ <p>The page you're looking for does not exist.</p>
52
+ <a href="/" class="btn-reset">Go Back to Home</a>
53
+ </div>
54
+ </body>
55
+ </html>
templates/500.html ADDED
@@ -0,0 +1,55 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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">
6
+ <title>500 Internal Server Error</title>
7
+ <style>
8
+ body {
9
+ background-color: #1c1c1e;
10
+ font-family: "Poppins", sans-serif;
11
+ color: #f5f5f7;
12
+ }
13
+ h1 {
14
+ color: #e5e5e7;
15
+ text-align: center;
16
+ margin-bottom: 20px;
17
+ }
18
+ .container {
19
+ background-color: #2c2c2e;
20
+ padding: 30px;
21
+ border-radius: 15px;
22
+ box-shadow: 0 8px 16px rgba(0, 0, 0, 0.5);
23
+ max-width: 600px;
24
+ margin: 50px auto;
25
+ }
26
+ .section-title {
27
+ color: #ff9f0a;
28
+ font-size: 1.5rem;
29
+ font-weight: bold;
30
+ margin-top: 20px;
31
+ border-bottom: 2px solid #ff9f0a;
32
+ padding-bottom: 10px;
33
+ }
34
+ .btn-reset {
35
+ background-color: #ff453a;
36
+ color: white;
37
+ border: none;
38
+ padding: 10px 20px;
39
+ border-radius: 5px;
40
+ transition: background-color 0.3s ease;
41
+ text-decoration: none;
42
+ }
43
+ .btn-reset:hover {
44
+ background-color: #e03a2f;
45
+ }
46
+ </style>
47
+ </head>
48
+ <body>
49
+ <div class="container">
50
+ <h1 class="section-title">500 Internal Server Error</h1>
51
+ <p>Oops! Something went wrong on our end.</p>
52
+ <a href="/" class="btn-reset">Go Back to Home</a>
53
+ </div>
54
+ </body>
55
+ </html>
templates/error.html ADDED
@@ -0,0 +1,55 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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">
6
+ <title>Error</title>
7
+ <style>
8
+ body {
9
+ background-color: #1c1c1e;
10
+ font-family: "Poppins", sans-serif;
11
+ color: #f5f5f7;
12
+ }
13
+ h1 {
14
+ color: #e5e5e7;
15
+ text-align: center;
16
+ margin-bottom: 20px;
17
+ }
18
+ .container {
19
+ background-color: #2c2c2e;
20
+ padding: 30px;
21
+ border-radius: 15px;
22
+ box-shadow: 0 8px 16px rgba(0, 0, 0, 0.5);
23
+ max-width: 600px;
24
+ margin: 50px auto;
25
+ }
26
+ .section-title {
27
+ color: #ff9f0a;
28
+ font-size: 1.5rem;
29
+ font-weight: bold;
30
+ margin-top: 20px;
31
+ border-bottom: 2px solid #ff9f0a;
32
+ padding-bottom: 10px;
33
+ }
34
+ .btn-reset {
35
+ background-color: #ff453a;
36
+ color: white;
37
+ border: none;
38
+ padding: 10px 20px;
39
+ border-radius: 5px;
40
+ transition: background-color 0.3s ease;
41
+ text-decoration: none;
42
+ }
43
+ .btn-reset:hover {
44
+ background-color: #e03a2f;
45
+ }
46
+ </style>
47
+ </head>
48
+ <body>
49
+ <div class="container">
50
+ <h1 class="section-title">Error</h1>
51
+ <p>{{ message }}</p>
52
+ <a href="/" class="btn-reset">Go Back to Home</a>
53
+ </div>
54
+ </body>
55
+ </html>
templates/index.html ADDED
@@ -0,0 +1,259 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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>File Uploader</title>
7
+ <link
8
+ href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
9
+ rel="stylesheet"
10
+ />
11
+ <style>
12
+ body {
13
+ background-color: #1c1c1e;
14
+ font-family: "Poppins", sans-serif;
15
+ color: #f5f5f7;
16
+ }
17
+ h1 {
18
+ color: #e5e5e7;
19
+ text-align: center;
20
+ margin-bottom: 20px;
21
+ }
22
+ .container {
23
+ margin-top: 50px;
24
+ }
25
+ .file-upload-section {
26
+ background-color: #2c2c2e;
27
+ padding: 30px;
28
+ border-radius: 15px;
29
+ box-shadow: 0 8px 16px rgba(0, 0, 0, 0.5);
30
+ text-align: center;
31
+ }
32
+ .file-upload-section input[type="file"] {
33
+ margin: 20px 0;
34
+ }
35
+ .file-upload-section input[type="submit"] {
36
+ background-color: #ff9f0a;
37
+ color: white;
38
+ border: none;
39
+ padding: 10px 20px;
40
+ border-radius: 5px;
41
+ transition: background-color 0.3s ease;
42
+ }
43
+ .file-upload-section input[type="submit"]:hover {
44
+ background-color: #e68a00;
45
+ }
46
+ .file-actions a {
47
+ margin: 0 10px;
48
+ text-decoration: none;
49
+ color: #ff9f0a;
50
+ }
51
+ .file-actions a:hover {
52
+ color: #e68a00;
53
+ }
54
+ .flash-message {
55
+ margin-bottom: 20px;
56
+ padding: 15px;
57
+ border-radius: 5px;
58
+ color: #333;
59
+ }
60
+ .alert {
61
+ text-align: center;
62
+ }
63
+ </style>
64
+ </head>
65
+ <body>
66
+ <div class="container">
67
+ <h1>Upload File</h1>
68
+
69
+ <div class="file-upload-section">
70
+ <form
71
+ action="{{ url_for('upload_and_process') }}"
72
+ method="POST"
73
+ enctype="multipart/form-data"
74
+ >
75
+ <input type="file" name="file" class="form-control" required />
76
+ <input type="submit" value="Upload" class="btn btn-outline-primary" />
77
+ </form>
78
+
79
+ {% if session.get('uploaded_file') %}
80
+ <p class="mt-4">
81
+ Uploaded:
82
+ <span class="text-danger">{{ session.get('uploaded_file') }}</span>
83
+ </p>
84
+ <div class="file-actions">
85
+ <form action="{{ url_for('remove_file') }}" method="post">
86
+ <button type="submit" class="btn btn-outline-danger">
87
+ <i class="bi bi-trash"></i> Remove Uploaded File
88
+ </button>
89
+ </form>
90
+ </div>
91
+ {% endif %}
92
+ </div>
93
+
94
+ {% with messages = get_flashed_messages() %} {% if messages %}
95
+ <div class="alert alert-success mt-4" id="flash-message">
96
+ {{ messages[0] }}
97
+ </div>
98
+ {% endif %} {% endwith %}
99
+ </div>
100
+
101
+ <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
102
+ <script>
103
+ setTimeout(function () {
104
+ let flashMessage = document.getElementById("flash-message");
105
+ if (flashMessage) {
106
+ flashMessage.style.transition = "opacity 1s ease";
107
+ flashMessage.style.opacity = 0;
108
+ setTimeout(() => flashMessage.remove(), 1000);
109
+ }
110
+ }, 3000);
111
+ </script>
112
+ </body>
113
+ </html> -->
114
+
115
+ <!DOCTYPE html>
116
+ <html lang="en">
117
+ <head>
118
+ <meta charset="UTF-8" />
119
+ <meta name="viewport" content="width=device-width, initial-scale=1.0" />
120
+ <title>File Uploader</title>
121
+ <link
122
+ href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
123
+ rel="stylesheet"
124
+ />
125
+ <style>
126
+ body {
127
+ background-color: #1c1c1e;
128
+ font-family: "Poppins", sans-serif;
129
+ color: #f5f5f7;
130
+ }
131
+ h1 {
132
+ color: #e5e5e7;
133
+ text-align: center;
134
+ margin-bottom: 20px;
135
+ }
136
+ .container {
137
+ margin-top: 50px;
138
+ }
139
+ .file-upload-section {
140
+ background-color: #2c2c2e;
141
+ padding: 30px;
142
+ border-radius: 15px;
143
+ box-shadow: 0 8px 16px rgba(0, 0, 0, 0.5);
144
+ text-align: center;
145
+ }
146
+ .file-upload-section input[type="file"] {
147
+ margin: 20px 0;
148
+ }
149
+ .file-upload-section input[type="submit"] {
150
+ background-color: #ff9f0a;
151
+ color: white;
152
+ border: none;
153
+ padding: 10px 20px;
154
+ border-radius: 5px;
155
+ transition: background-color 0.3s ease;
156
+ }
157
+ .file-upload-section input[type="submit"]:hover {
158
+ background-color: #e68a00;
159
+ }
160
+ .file-actions a {
161
+ margin: 0 10px;
162
+ text-decoration: none;
163
+ color: #ff9f0a;
164
+ }
165
+ .file-actions a:hover {
166
+ color: #e68a00;
167
+ }
168
+ .flash-message {
169
+ margin-bottom: 20px;
170
+ padding: 15px;
171
+ border-radius: 5px;
172
+ color: #333;
173
+ }
174
+ .alert {
175
+ text-align: center;
176
+ position: absolute;
177
+ top: 0;
178
+ right: 15%;
179
+ }
180
+ /* Loader styles */
181
+ .loader {
182
+ border: 8px solid #f3f3f3;
183
+ border-top: 8px solid #ff9f0a;
184
+ border-radius: 50%;
185
+ width: 60px;
186
+ height: 60px;
187
+ animation: spin 2s linear infinite;
188
+ margin: 20px auto;
189
+ display: none;
190
+ }
191
+ @keyframes spin {
192
+ 0% { transform: rotate(0deg); }
193
+ 100% { transform: rotate(360deg); }
194
+ }
195
+ </style>
196
+ </head>
197
+ <body>
198
+ <div class="container">
199
+ <h1>Upload File</h1>
200
+
201
+ <div class="file-upload-section">
202
+
203
+
204
+ <form
205
+ id="fileUploadForm"
206
+ action="{{ url_for('upload_and_process') }}"
207
+ method="POST"
208
+ enctype="multipart/form-data"
209
+ >
210
+ <input type="file" name="file" class="form-control" required />
211
+ <input type="submit" value="Upload" class="btn btn-outline-primary" />
212
+ </form>
213
+
214
+ {% if session.get('uploaded_file') %}
215
+ <p class="mt-4">
216
+ Uploaded:
217
+ <span class="text-danger">{{ session.get('uploaded_file') }}</span>
218
+ </p>
219
+ <div class="file-actions">
220
+ <form action="{{ url_for('remove_file') }}" method="post">
221
+ <button type="submit" class="btn btn-outline-danger">
222
+ <i class="bi bi-trash"></i> Remove Uploaded File
223
+ </button>
224
+ </form>
225
+ </div>
226
+ {% endif %}
227
+ </div>
228
+
229
+ <div class="container">
230
+ <!-- Loader -->
231
+ <div class="loader" id="loader"></div>
232
+ </div>
233
+
234
+ {% with messages = get_flashed_messages() %} {% if messages %}
235
+ <div class="alert alert-success mt-4" id="flash-message">
236
+ {{ messages[0] }}
237
+ </div>
238
+ {% endif %} {% endwith %}
239
+ </div>
240
+
241
+ <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
242
+ <script>
243
+ // Loader functionality
244
+ document.getElementById('fileUploadForm').onsubmit = function() {
245
+ document.getElementById('loader').style.display = 'block';
246
+ };
247
+
248
+ // Flash message auto-hide
249
+ setTimeout(function () {
250
+ let flashMessage = document.getElementById("flash-message");
251
+ if (flashMessage) {
252
+ flashMessage.style.transition = "opacity 1s ease";
253
+ flashMessage.style.opacity = 0;
254
+ setTimeout(() => flashMessage.remove(), 1000);
255
+ }
256
+ }, 3000);
257
+ </script>
258
+ </body>
259
+ </html>
templates/loading.html ADDED
@@ -0,0 +1,57 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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>Processing File</title>
7
+ <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
8
+ <style>
9
+ body {
10
+ background-color: #1c1c1e;
11
+ font-family: 'Poppins', sans-serif;
12
+ color: #f5f5f7;
13
+ display: flex;
14
+ justify-content: center;
15
+ align-items: center;
16
+ height: 100vh;
17
+ margin: 0;
18
+ }
19
+ .loader {
20
+ position: relative;
21
+ width: 80px;
22
+ height: 80px;
23
+ }
24
+ .loader div {
25
+ position: absolute;
26
+ width: 100%;
27
+ height: 100%;
28
+ border: 3px solid #fff;
29
+ border-radius: 50%;
30
+ border-top-color: transparent;
31
+ animation: spin 1s linear infinite;
32
+ }
33
+ .loader div:nth-child(2) {
34
+ animation-delay: -0.5s;
35
+ }
36
+ @keyframes spin {
37
+ 0% { transform: rotate(0deg); }
38
+ 100% { transform: rotate(360deg); }
39
+ }
40
+ h3 {
41
+ color: #f5f5f7;
42
+ margin-top: 20px;
43
+ font-size: 1.5rem;
44
+ }
45
+ </style>
46
+ </head>
47
+ <body>
48
+ <div class="text-center">
49
+ <div class="loader">
50
+ <div></div>
51
+ <div></div>
52
+ </div>
53
+ <h3>Processing your file...</h3>
54
+ </div>
55
+ <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
56
+ </body>
57
+ </html>
templates/result.html ADDED
@@ -0,0 +1,365 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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>Processed Results</title>
7
+ <link
8
+ href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
9
+ rel="stylesheet"
10
+ />
11
+ <style>
12
+ body {
13
+ background-color: #1c1c1e;
14
+ font-family: "Poppins", sans-serif;
15
+ color: #f5f5f7;
16
+ }
17
+ h1 {
18
+ color: #e5e5e7;
19
+ text-align: center;
20
+ /* margin-bottom: 20px; */
21
+ }
22
+ .cont {
23
+ background-color: #2c2c2e;
24
+ padding: 30px;
25
+ border-radius: 15px;
26
+ box-shadow: 0 8px 16px rgba(0, 0, 0, 0.5);
27
+ transition: 1s ease;
28
+ }
29
+ .section-title {
30
+ color: #ff9f0a;
31
+ font-size: 1.5rem;
32
+ font-weight: bold;
33
+ margin-top: 20px;
34
+ border-bottom: 2px solid #ff9f0a;
35
+ padding-bottom: 10px;
36
+ }
37
+ .card {
38
+ background-color: #3a3a3c;
39
+ color: #f5f5f7;
40
+ border-radius: 10px;
41
+ margin-bottom: 15px;
42
+ padding: 15px;
43
+ box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
44
+ transition: background-color 0.3s ease;
45
+ }
46
+ .card:hover {
47
+ background-color: #3a3a3c98;
48
+ }
49
+ .card-title {
50
+ color: #ff9f0a;
51
+ font-size: 1.2rem;
52
+ font-weight: bold;
53
+ }
54
+ .card-text {
55
+ color: #d1d1d6;
56
+ font-size: 1rem;
57
+ }
58
+ ul {
59
+ list-style-type: none;
60
+ padding-left: 0;
61
+ }
62
+ li::before {
63
+ content: "• ";
64
+ color: #ff9f0a;
65
+ }
66
+ .btn-reset {
67
+ background-color: #ff453a;
68
+ color: white;
69
+ border: none;
70
+ padding: 10px 20px;
71
+ border-radius: 5px;
72
+ transition: background-color 0.3s ease;
73
+ margin-bottom: 20px;
74
+ }
75
+ .btn-reset:hover {
76
+ background-color: #e03a2f;
77
+ }
78
+ .alert {
79
+ text-align: center;
80
+ position: absolute;
81
+ top: 0;
82
+ right: 15%;
83
+ /* right: 50%;
84
+ transform: translateX(-50%); */
85
+ }
86
+ </style>
87
+ </head>
88
+ <body>
89
+ <div class="container">
90
+ {% with messages = get_flashed_messages() %} {% if messages %}
91
+ <div class="alert alert-success mt-4 " id="flash-message">
92
+ {{ messages[0] }}
93
+ </div>
94
+ {% endif %} {% endwith %}
95
+
96
+ <!-- <div class="alert alert-success mt-4 " id="flash-message">
97
+ sfdsdaa asfcsd sdgsfr sdfgfd jhijunb hun hjujbuy hgbuuuu jjf
98
+ </div> -->
99
+ </div>
100
+ <div class="container cont mt-5">
101
+ <div class="d-flex align-items-center justify-content-between">
102
+ <h1>Processed Data</h1>
103
+ <!-- Reset Button -->
104
+ <div class="text-center mt-4">
105
+ <a href="{{ url_for('reset_upload') }}" class="btn btn-reset"
106
+ >Reset & Upload New File</a
107
+ >
108
+ </div>
109
+ </div>
110
+ {% if parsed_data %}
111
+ <!-- Personal Information Section -->
112
+ <section>
113
+ <h3 class="section-title">Personal Information</h3>
114
+ <div class="row">
115
+ <div class="col-md-12">
116
+ <div class="card">
117
+ <div class="card-body">
118
+ <div class="d-flex">
119
+ <h5 class="card-title">Name:</h5>
120
+ <p class="card-text">
121
+ &nbsp;{{ parsed_data.personal.name or 'Not Found' }}
122
+ </p>
123
+ </div>
124
+ <div class="d-flex">
125
+ <h5 class="card-title">Contact:</h5>
126
+ <p class="card-text">
127
+ &nbsp;{{ parsed_data.personal.contact or 'Not Found' }}
128
+ {% if parsed_data.personal.invalid_contact %}
129
+ &nbsp; - ({{ parsed_data.personal.invalid_contact }})
130
+ {% endif %}
131
+ </p>
132
+ </div>
133
+ <div class="d-flex">
134
+ <h5 class="card-title">Email:</h5>
135
+ <p class="card-text">
136
+ &nbsp;{{ parsed_data.personal.email or 'Not Found' }}
137
+ {% if parsed_data.personal.invalid_email %}
138
+ &nbsp; ({{ parsed_data.personal.invalid_email }})
139
+ {% endif %}
140
+ </p>
141
+ </div>
142
+ <div class="d-flex">
143
+ <h5 class="card-title">Location:</h5>
144
+ <p class="card-text">
145
+ &nbsp;{{ parsed_data.personal.location or 'Not Found' }}
146
+ </p>
147
+ </div>
148
+ <div class="d-fle">
149
+ <h5 class="card-title">LinkedIn:</h5>
150
+ <p class="card-text">
151
+ {% if parsed_data.personal.linkedin != 'Not found' %}
152
+ <ul>
153
+ {% for lnk in parsed_data.personal.linkedin %}
154
+ <li>&nbsp;<a href="{{ lnk }}" target="_blank">{{ lnk }}</a></li>
155
+ {% endfor %}
156
+ </ul>
157
+ {% else %}
158
+ Not Found
159
+ {% endif %}
160
+ </p>
161
+ </div>
162
+ <div class="d-fle">
163
+ <h5 class="card-title">GitHub:</h5>
164
+ <p class="card-text">
165
+ {% if parsed_data.personal.github != 'Not found' %}
166
+ <ul>
167
+ {% for git in parsed_data.personal.github %}
168
+ <li>&nbsp; <a href="{{ git }}" target="_blank">{{ git }}</a></li>
169
+ {% endfor %}
170
+ </ul>
171
+ {% else %}
172
+ Not Found
173
+ {% endif %}
174
+ </p>
175
+ </div>
176
+ <h5 class="card-title">Other Links:</h5>
177
+ {% if parsed_data.personal.other_links %}
178
+ <ul>
179
+ {% for link in parsed_data.personal.other_links %}
180
+ <li><a href="{{ link }}" target="_blank">{{ link }}</a></li>
181
+ {% endfor %}
182
+ </ul>
183
+ {% else %}
184
+ <p>Not Found</p>
185
+ {% endif %}
186
+ </div>
187
+ </div>
188
+ </div>
189
+ </div>
190
+ </section>
191
+
192
+
193
+ <!-- Professional Information Section -->
194
+ <section>
195
+ <h3 class="section-title">Professional Information</h3>
196
+ <div class="row">
197
+ <!-- Technical Skills -->
198
+ <div class="col-md-6 col-lg-4 mb-4">
199
+ <div class="card">
200
+ <div class="card-body">
201
+ <h5 class="card-title">Technical Skills:</h5>
202
+ {% if parsed_data.professional.technical_skills %}
203
+ <ul>
204
+ {% for skill in parsed_data.professional.technical_skills %}
205
+ <li>{{ skill }}</li>
206
+ {% endfor %}
207
+ </ul>
208
+ {% else %}
209
+ <p>No technical skills found</p>
210
+ {% endif %}
211
+ </div>
212
+ </div>
213
+ </div>
214
+ <!-- Tools -->
215
+ <div class="col-md-6 col-lg-4 mb-4">
216
+ <div class="card">
217
+ <div class="card-body">
218
+ <h5 class="card-title">Tools:</h5>
219
+ {% if parsed_data.professional.tools %}
220
+ <ul>
221
+ {% for tool in parsed_data.professional.tools %}
222
+ <li>{{ tool }}</li>
223
+ {% endfor %}
224
+ </ul>
225
+ {% else %}
226
+ <p>No tools found</p>
227
+ {% endif %}
228
+ </div>
229
+ </div>
230
+ </div>
231
+ <!-- Soft Skills -->
232
+ <div class="col-md-6 col-lg-4 mb-4">
233
+ <div class="card">
234
+ <div class="card-body">
235
+ <h5 class="card-title">Soft Skills:</h5>
236
+ {% if parsed_data.professional.non_technical_skills %}
237
+ <ul>
238
+ {% for skill in parsed_data.professional.non_technical_skills
239
+ %}
240
+ <li>{{ skill }}</li>
241
+ {% endfor %}
242
+ </ul>
243
+ {% else %}
244
+ <p>No soft skills found</p>
245
+ {% endif %}
246
+ </div>
247
+ </div>
248
+ </div>
249
+ </div>
250
+ </section>
251
+
252
+ <!-- Experience Section -->
253
+ <section>
254
+ <h3 class="card-title p-3">Experience:</h3>
255
+ <div class="row">
256
+ <div class="col-md-12">
257
+ <div class="card">
258
+ <div class="card-body">
259
+ <div class="d-flex">
260
+ <h5 class="card-title">Company:</h5>
261
+ <p class="card-text">
262
+ &nbsp;{{ parsed_data.professional.experience[0].company or
263
+ 'Not Found' }}
264
+ </p>
265
+ </div>
266
+ <div class="d-flex">
267
+ <h5 class="card-title">Projects:</h5>
268
+ <p class="card-text">
269
+ &nbsp;{{ parsed_data.professional.experience[0].projects or
270
+ 'Not Found' }}
271
+ </p>
272
+ </div>
273
+ <div class="d-flex">
274
+ <h5 class="card-title">Role:</h5>
275
+ <p class="card-text">
276
+ &nbsp;{{ parsed_data.professional.experience[0].role or 'Not
277
+ Found' }}
278
+ </p>
279
+ </div>
280
+ <div class="d-flex">
281
+ <h5 class="card-title">Years of Experience:</h5>
282
+ <p class="card-text">
283
+ &nbsp;{{ parsed_data.professional.experience[0].years or
284
+ 'Not Found' }}
285
+ </p>
286
+ </div>
287
+ <h5 class="card-title">Project Experience:</h5>
288
+ {% if parsed_data.professional.experience[0].project_experience
289
+ %}
290
+ <ul>
291
+ {% for project in
292
+ parsed_data.professional.experience[0].project_experience %}
293
+ <li>{{ project }}</li>
294
+ {% endfor %}
295
+ </ul>
296
+ {% else %}
297
+ <p>Not Found</p>
298
+ {% endif %}
299
+ </div>
300
+ </div>
301
+ </div>
302
+ </div>
303
+ </section>
304
+
305
+ <!-- Education Section -->
306
+ <section>
307
+ <h3 class="card-title p-3">Education:</h3>
308
+ <div class="row">
309
+ <div class="col-md-12">
310
+ <div class="card">
311
+ <div class="card-body">
312
+ <div class="d-flex">
313
+ <h5 class="card-title">Qualification:</h5>
314
+ <p class="card-text">
315
+ &nbsp;{{ parsed_data.professional.education[0].qualification
316
+ }}
317
+ </p>
318
+ </div>
319
+ <div class="d-flex">
320
+ <h5 class="card-title">University:</h5>
321
+ <p class="card-text">
322
+ &nbsp;{{ parsed_data.professional.education[0].university or
323
+ 'Not Found' }}
324
+ </p>
325
+ </div>
326
+ <div class="d-flex">
327
+ <h5 class="card-title">Course:</h5>
328
+ <p class="card-text">
329
+ &nbsp;{{ parsed_data.professional.education[0].course or
330
+ 'Not Found' }}
331
+ </p>
332
+ </div>
333
+ <div class="d-flex">
334
+ <h5 class="card-title">Certificate:</h5>
335
+ <p class="card-text">
336
+ &nbsp;{{ parsed_data.professional.education[0].certificate
337
+ or 'Not Found' }}
338
+ </p>
339
+ </div>
340
+ </div>
341
+ </div>
342
+ </div>
343
+ </div>
344
+ </section>
345
+
346
+
347
+
348
+ {% else %}
349
+ <p>No data available. Please process a file.</p>
350
+ {% endif %}
351
+ </div>
352
+
353
+ <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
354
+ <script>
355
+ setTimeout(function () {
356
+ let flashMessage = document.getElementById("flash-message");
357
+ if (flashMessage) {
358
+ flashMessage.style.transition = "opacity 1s ease";
359
+ flashMessage.style.opacity = 0;
360
+ setTimeout(() => flashMessage.remove(), 1000);
361
+ }
362
+ }, 3000);
363
+ </script>
364
+ </body>
365
+ </html>