Hugging Face's logo

Spaces:
madansa7
/
my-cv-maker
Running

App Files Community
madansa7 commited on
Commit
0ddcbd6
·
verified ·
1 Parent(s): b8de727

Add 3 files

Browse files
Files changed (3) hide show
  1. README.md +7 -5
  2. index.html +1287 -19
  3. prompts.txt +1 -0
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: My Cv Maker
3
- emoji: 🚀
4
- colorFrom: pink
5
- colorTo: red
6
  sdk: static
7
  pinned: false
 
 
8
  ---
9
 
10
- Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
 
1
  ---
2
+ title: my-cv-maker
3
+ emoji: 🐳
4
+ colorFrom: green
5
+ colorTo: purple
6
  sdk: static
7
  pinned: false
8
+ tags:
9
+ - deepsite
10
  ---
11
 
12
+ Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
index.html CHANGED
@@ -1,19 +1,1287 @@
1
- <!doctype html>
2
- <html>
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width" />
6
- <title>My static Space</title>
7
- <link rel="stylesheet" href="style.css" />
8
- </head>
9
- <body>
10
- <div class="card">
11
- <h1>Welcome to your static Space!</h1>
12
- <p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
13
- <p>
14
- Also don't forget to check the
15
- <a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
16
- </p>
17
- </div>
18
- </body>
19
- </html>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>ATS-Friendly CV Maker</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
9
+ <script src="https://cdnjs.cloudflare.com/ajax/libs/html2pdf.js/0.10.1/html2pdf.bundle.min.js"></script>
10
+ <script src="https://cdnjs.cloudflare.com/ajax/libs/docx/7.8.2/docx.js"></script>
11
+ <style>
12
+ .fade-in {
13
+ animation: fadeIn 0.5s ease-in-out;
14
+ }
15
+ @keyframes fadeIn {
16
+ from { opacity: 0; transform: translateY(10px); }
17
+ to { opacity: 1; transform: translateY(0); }
18
+ }
19
+ .section-highlight {
20
+ transition: all 0.3s ease;
21
+ }
22
+ .section-highlight:hover {
23
+ transform: translateY(-3px);
24
+ box-shadow: 0 10px 20px rgba(0,0,0,0.1);
25
+ }
26
+ .progress-bar {
27
+ height: 6px;
28
+ transition: width 0.5s ease;
29
+ }
30
+ .resume-paper {
31
+ background: linear-gradient(to bottom, #ffffff 0%, #f9f9f9 100%);
32
+ box-shadow: 0 5px 15px rgba(0,0,0,0.1);
33
+ }
34
+ .skill-level {
35
+ position: relative;
36
+ }
37
+ .skill-level::after {
38
+ content: '';
39
+ position: absolute;
40
+ bottom: -5px;
41
+ left: 0;
42
+ width: 100%;
43
+ height: 3px;
44
+ background: #e2e8f0;
45
+ border-radius: 3px;
46
+ }
47
+ .skill-level-fill {
48
+ position: absolute;
49
+ bottom: -5px;
50
+ left: 0;
51
+ height: 3px;
52
+ border-radius: 3px;
53
+ background: #3b82f6;
54
+ transition: width 0.5s ease;
55
+ }
56
+ </style>
57
+ </head>
58
+ <body class="bg-gray-50 font-sans">
59
+ <div class="container mx-auto px-4 py-8 max-w-7xl">
60
+ <!-- Header -->
61
+ <header class="text-center mb-12">
62
+ <h1 class="text-4xl font-bold text-blue-800 mb-2">ATS-Friendly CV Maker</h1>
63
+ <p class="text-lg text-gray-600">Create a resume that beats Applicant Tracking Systems</p>
64
+ <div class="w-full bg-gray-200 rounded-full h-2.5 mt-4">
65
+ <div id="completion-progress" class="progress-bar bg-blue-600 h-2.5 rounded-full" style="width: 0%"></div>
66
+ </div>
67
+ <p id="completion-text" class="text-sm text-gray-500 mt-1">0% Complete</p>
68
+ </header>
69
+
70
+ <div class="flex flex-col lg:flex-row gap-8">
71
+ <!-- Form Section -->
72
+ <div class="lg:w-2/3">
73
+ <div class="bg-white rounded-xl shadow-md p-6 mb-6 section-highlight">
74
+ <h2 class="text-2xl font-semibold text-gray-800 mb-4 flex items-center">
75
+ <i class="fas fa-user-circle text-blue-500 mr-2"></i> Personal Information
76
+ </h2>
77
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
78
+ <div>
79
+ <label class="block text-gray-700 mb-1">Full Name*</label>
80
+ <input type="text" id="full-name" class="w-full px-4 py-2 border rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500" placeholder="John Doe">
81
+ </div>
82
+ <div>
83
+ <label class="block text-gray-700 mb-1">Professional Title*</label>
84
+ <input type="text" id="professional-title" class="w-full px-4 py-2 border rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500" placeholder="Software Engineer">
85
+ </div>
86
+ <div>
87
+ <label class="block text-gray-700 mb-1">Email*</label>
88
+ <input type="email" id="email" class="w-full px-4 py-2 border rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500" placeholder="[email protected]">
89
+ </div>
90
+ <div>
91
+ <label class="block text-gray-700 mb-1">Phone*</label>
92
+ <input type="tel" id="phone" class="w-full px-4 py-2 border rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500" placeholder="+1 (555) 123-4567">
93
+ </div>
94
+ <div>
95
+ <label class="block text-gray-700 mb-1">Location*</label>
96
+ <input type="text" id="location" class="w-full px-4 py-2 border rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500" placeholder="New York, USA">
97
+ </div>
98
+ <div>
99
+ <label class="block text-gray-700 mb-1">LinkedIn Profile</label>
100
+ <input type="url" id="linkedin" class="w-full px-4 py-2 border rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500" placeholder="https://linkedin.com/in/username">
101
+ </div>
102
+ <div>
103
+ <label class="block text-gray-700 mb-1">GitHub/Portfolio</label>
104
+ <input type="url" id="portfolio" class="w-full px-4 py-2 border rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500" placeholder="https://github.com/username">
105
+ </div>
106
+ </div>
107
+ </div>
108
+
109
+ <div class="bg-white rounded-xl shadow-md p-6 mb-6 section-highlight">
110
+ <h2 class="text-2xl font-semibold text-gray-800 mb-4 flex items-center">
111
+ <i class="fas fa-briefcase text-blue-500 mr-2"></i> Work Experience
112
+ </h2>
113
+ <div id="experience-container">
114
+ <div class="experience-item mb-6 p-4 border rounded-lg">
115
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-3">
116
+ <div>
117
+ <label class="block text-gray-700 mb-1">Job Title*</label>
118
+ <input type="text" class="w-full px-4 py-2 border rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 experience-title" placeholder="Senior Developer">
119
+ </div>
120
+ <div>
121
+ <label class="block text-gray-700 mb-1">Company Name*</label>
122
+ <input type="text" class="w-full px-4 py-2 border rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 experience-company" placeholder="Tech Corp Inc.">
123
+ </div>
124
+ </div>
125
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-3">
126
+ <div>
127
+ <label class="block text-gray-700 mb-1">Start Date*</label>
128
+ <input type="month" class="w-full px-4 py-2 border rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 experience-start">
129
+ </div>
130
+ <div>
131
+ <label class="block text-gray-700 mb-1">End Date (or present)</label>
132
+ <input type="month" class="w-full px-4 py-2 border rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 experience-end">
133
+ <div class="flex items-center mt-2">
134
+ <input type="checkbox" class="mr-2 experience-current">
135
+ <span class="text-sm text-gray-600">I currently work here</span>
136
+ </div>
137
+ </div>
138
+ </div>
139
+ <div>
140
+ <label class="block text-gray-700 mb-1">Responsibilities & Achievements*</label>
141
+ <textarea class="w-full px-4 py-2 border rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 experience-description" rows="3" placeholder="Describe your responsibilities and key achievements using action verbs (e.g., Developed, Led, Optimized)"></textarea>
142
+ <p class="text-xs text-gray-500 mt-1">Use bullet points for better ATS parsing. Example: "• Led a team of 5 developers to deliver a SaaS product"</p>
143
+ </div>
144
+ <button class="remove-experience mt-2 text-red-500 text-sm flex items-center">
145
+ <i class="fas fa-trash mr-1"></i> Remove this experience
146
+ </button>
147
+ </div>
148
+ </div>
149
+ <button id="add-experience" class="bg-blue-50 text-blue-600 px-4 py-2 rounded-lg hover:bg-blue-100 transition flex items-center">
150
+ <i class="fas fa-plus mr-2"></i> Add Another Experience
151
+ </button>
152
+ </div>
153
+
154
+ <div class="bg-white rounded-xl shadow-md p-6 mb-6 section-highlight">
155
+ <h2 class="text-2xl font-semibold text-gray-800 mb-4 flex items-center">
156
+ <i class="fas fa-graduation-cap text-blue-500 mr-2"></i> Education
157
+ </h2>
158
+ <div id="education-container">
159
+ <div class="education-item mb-6 p-4 border rounded-lg">
160
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-3">
161
+ <div>
162
+ <label class="block text-gray-700 mb-1">Degree*</label>
163
+ <input type="text" class="w-full px-4 py-2 border rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 education-degree" placeholder="Bachelor of Science in Computer Science">
164
+ </div>
165
+ <div>
166
+ <label class="block text-gray-700 mb-1">Institution*</label>
167
+ <input type="text" class="w-full px-4 py-2 border rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 education-institution" placeholder="University of Technology">
168
+ </div>
169
+ </div>
170
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-3">
171
+ <div>
172
+ <label class="block text-gray-700 mb-1">Start Date*</label>
173
+ <input type="month" class="w-full px-4 py-2 border rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 education-start">
174
+ </div>
175
+ <div>
176
+ <label class="block text-gray-700 mb-1">End Date (or expected)</label>
177
+ <input type="month" class="w-full px-4 py-2 border rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 education-end">
178
+ <div class="flex items-center mt-2">
179
+ <input type="checkbox" class="mr-2 education-current">
180
+ <span class="text-sm text-gray-600">Currently studying here</span>
181
+ </div>
182
+ </div>
183
+ </div>
184
+ <div>
185
+ <label class="block text-gray-700 mb-1">Notable Achievements (optional)</label>
186
+ <textarea class="w-full px-4 py-2 border rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 education-achievements" rows="2" placeholder="Honors, awards, relevant coursework"></textarea>
187
+ </div>
188
+ <button class="remove-education mt-2 text-red-500 text-sm flex items-center">
189
+ <i class="fas fa-trash mr-1"></i> Remove this education
190
+ </button>
191
+ </div>
192
+ </div>
193
+ <button id="add-education" class="bg-blue-50 text-blue-600 px-4 py-2 rounded-lg hover:bg-blue-100 transition flex items-center">
194
+ <i class="fas fa-plus mr-2"></i> Add Another Education
195
+ </button>
196
+ </div>
197
+
198
+ <div class="bg-white rounded-xl shadow-md p-6 mb-6 section-highlight">
199
+ <h2 class="text-2xl font-semibold text-gray-800 mb-4 flex items-center">
200
+ <i class="fas fa-code text-blue-500 mr-2"></i> Skills
201
+ </h2>
202
+ <div id="skills-container">
203
+ <div class="skill-item mb-4 p-4 border rounded-lg">
204
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-3">
205
+ <div>
206
+ <label class="block text-gray-700 mb-1">Skill Name*</label>
207
+ <input type="text" class="w-full px-4 py-2 border rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 skill-name" placeholder="JavaScript">
208
+ </div>
209
+ <div>
210
+ <label class="block text-gray-700 mb-1">Skill Level*</label>
211
+ <select class="w-full px-4 py-2 border rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 skill-level">
212
+ <option value="beginner">Beginner</option>
213
+ <option value="intermediate">Intermediate</option>
214
+ <option value="advanced" selected>Advanced</option>
215
+ <option value="expert">Expert</option>
216
+ </select>
217
+ </div>
218
+ </div>
219
+ <button class="remove-skill text-red-500 text-sm flex items-center">
220
+ <i class="fas fa-trash mr-1"></i> Remove this skill
221
+ </button>
222
+ </div>
223
+ </div>
224
+ <button id="add-skill" class="bg-blue-50 text-blue-600 px-4 py-2 rounded-lg hover:bg-blue-100 transition flex items-center">
225
+ <i class="fas fa-plus mr-2"></i> Add Another Skill
226
+ </button>
227
+ <div class="mt-4">
228
+ <label class="block text-gray-700 mb-1">Additional Skills (comma separated)</label>
229
+ <textarea id="additional-skills" class="w-full px-4 py-2 border rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500" rows="2" placeholder="Project Management, Public Speaking, etc."></textarea>
230
+ <p class="text-xs text-gray-500 mt-1">These will appear as tags in your resume</p>
231
+ </div>
232
+ </div>
233
+
234
+ <div class="bg-white rounded-xl shadow-md p-6 mb-6 section-highlight">
235
+ <h2 class="text-2xl font-semibold text-gray-800 mb-4 flex items-center">
236
+ <i class="fas fa-project-diagram text-blue-500 mr-2"></i> Projects
237
+ </h2>
238
+ <div id="projects-container">
239
+ <div class="project-item mb-6 p-4 border rounded-lg">
240
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-3">
241
+ <div>
242
+ <label class="block text-gray-700 mb-1">Project Name*</label>
243
+ <input type="text" class="w-full px-4 py-2 border rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 project-name" placeholder="E-commerce Website">
244
+ </div>
245
+ <div>
246
+ <label class="block text-gray-700 mb-1">Project URL (optional)</label>
247
+ <input type="url" class="w-full px-4 py-2 border rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 project-url" placeholder="https://example.com">
248
+ </div>
249
+ </div>
250
+ <div>
251
+ <label class="block text-gray-700 mb-1">Project Description*</label>
252
+ <textarea class="w-full px-4 py-2 border rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 project-description" rows="3" placeholder="Describe the project, technologies used, and your role"></textarea>
253
+ <p class="text-xs text-gray-500 mt-1">Use action verbs and quantify results when possible (e.g., "Increased performance by 30%")</p>
254
+ </div>
255
+ <button class="remove-project mt-2 text-red-500 text-sm flex items-center">
256
+ <i class="fas fa-trash mr-1"></i> Remove this project
257
+ </button>
258
+ </div>
259
+ </div>
260
+ <button id="add-project" class="bg-blue-50 text-blue-600 px-4 py-2 rounded-lg hover:bg-blue-100 transition flex items-center">
261
+ <i class="fas fa-plus mr-2"></i> Add Another Project
262
+ </button>
263
+ </div>
264
+
265
+ <div class="bg-white rounded-xl shadow-md p-6 mb-6 section-highlight">
266
+ <h2 class="text-2xl font-semibold text-gray-800 mb-4 flex items-center">
267
+ <i class="fas fa-certificate text-blue-500 mr-2"></i> Certifications
268
+ </h2>
269
+ <div id="certifications-container">
270
+ <div class="certification-item mb-4 p-4 border rounded-lg">
271
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-3">
272
+ <div>
273
+ <label class="block text-gray-700 mb-1">Certification Name*</label>
274
+ <input type="text" class="w-full px-4 py-2 border rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 certification-name" placeholder="AWS Certified Solutions Architect">
275
+ </div>
276
+ <div>
277
+ <label class="block text-gray-700 mb-1">Issuing Organization*</label>
278
+ <input type="text" class="w-full px-4 py-2 border rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 certification-org" placeholder="Amazon Web Services">
279
+ </div>
280
+ </div>
281
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-3">
282
+ <div>
283
+ <label class="block text-gray-700 mb-1">Date Earned*</label>
284
+ <input type="month" class="w-full px-4 py-2 border rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 certification-date">
285
+ </div>
286
+ <div>
287
+ <label class="block text-gray-700 mb-1">Credential ID (optional)</label>
288
+ <input type="text" class="w-full px-4 py-2 border rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 certification-id" placeholder="Credential ID or URL">
289
+ </div>
290
+ </div>
291
+ <button class="remove-certification mt-2 text-red-500 text-sm flex items-center">
292
+ <i class="fas fa-trash mr-1"></i> Remove this certification
293
+ </button>
294
+ </div>
295
+ </div>
296
+ <button id="add-certification" class="bg-blue-50 text-blue-600 px-4 py-2 rounded-lg hover:bg-blue-100 transition flex items-center">
297
+ <i class="fas fa-plus mr-2"></i> Add Another Certification
298
+ </button>
299
+ </div>
300
+
301
+ <div class="bg-white rounded-xl shadow-md p-6 mb-6 section-highlight">
302
+ <h2 class="text-2xl font-semibold text-gray-800 mb-4 flex items-center">
303
+ <i class="fas fa-language text-blue-500 mr-2"></i> Languages
304
+ </h2>
305
+ <div id="languages-container">
306
+ <div class="language-item mb-4 p-4 border rounded-lg">
307
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-3">
308
+ <div>
309
+ <label class="block text-gray-700 mb-1">Language*</label>
310
+ <input type="text" class="w-full px-4 py-2 border rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 language-name" placeholder="English">
311
+ </div>
312
+ <div>
313
+ <label class="block text-gray-700 mb-1">Proficiency Level*</label>
314
+ <select class="w-full px-4 py-2 border rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 language-level">
315
+ <option value="native">Native</option>
316
+ <option value="fluent" selected>Fluent</option>
317
+ <option value="intermediate">Intermediate</option>
318
+ <option value="basic">Basic</option>
319
+ </select>
320
+ </div>
321
+ </div>
322
+ <button class="remove-language mt-2 text-red-500 text-sm flex items-center">
323
+ <i class="fas fa-trash mr-1"></i> Remove this language
324
+ </button>
325
+ </div>
326
+ </div>
327
+ <button id="add-language" class="bg-blue-50 text-blue-600 px-4 py-2 rounded-lg hover:bg-blue-100 transition flex items-center">
328
+ <i class="fas fa-plus mr-2"></i> Add Another Language
329
+ </button>
330
+ </div>
331
+
332
+ <div class="bg-white rounded-xl shadow-md p-6 mb-6 section-highlight">
333
+ <h2 class="text-2xl font-semibold text-gray-800 mb-4 flex items-center">
334
+ <i class="fas fa-pencil-alt text-blue-500 mr-2"></i> Customize Resume
335
+ </h2>
336
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
337
+ <div>
338
+ <label class="block text-gray-700 mb-2">Resume Template</label>
339
+ <div class="grid grid-cols-2 gap-4">
340
+ <div>
341
+ <input type="radio" id="template-modern" name="template" value="modern" class="hidden peer" checked>
342
+ <label for="template-modern" class="block p-4 border rounded-lg cursor-pointer peer-checked:border-blue-500 peer-checked:ring-2 peer-checked:ring-blue-200">
343
+ <div class="h-24 bg-gradient-to-r from-blue-100 to-blue-50 rounded"></div>
344
+ <p class="text-center mt-2">Modern</p>
345
+ </label>
346
+ </div>
347
+ <div>
348
+ <input type="radio" id="template-classic" name="template" value="classic" class="hidden peer">
349
+ <label for="template-classic" class="block p-4 border rounded-lg cursor-pointer peer-checked:border-blue-500 peer-checked:ring-2 peer-checked:ring-blue-200">
350
+ <div class="h-24 bg-gradient-to-r from-gray-100 to-gray-50 rounded"></div>
351
+ <p class="text-center mt-2">Classic</p>
352
+ </label>
353
+ </div>
354
+ </div>
355
+ </div>
356
+ <div>
357
+ <label class="block text-gray-700 mb-2">Color Scheme</label>
358
+ <div class="flex flex-wrap gap-2">
359
+ <input type="radio" id="color-blue" name="color" value="blue" class="hidden peer" checked>
360
+ <label for="color-blue" class="w-10 h-10 rounded-full bg-blue-500 cursor-pointer peer-checked:ring-2 peer-checked:ring-blue-300"></label>
361
+
362
+ <input type="radio" id="color-green" name="color" value="green" class="hidden peer">
363
+ <label for="color-green" class="w-10 h-10 rounded-full bg-green-500 cursor-pointer peer-checked:ring-2 peer-checked:ring-green-300"></label>
364
+
365
+ <input type="radio" id="color-purple" name="color" value="purple" class="hidden peer">
366
+ <label for="color-purple" class="w-10 h-10 rounded-full bg-purple-500 cursor-pointer peer-checked:ring-2 peer-checked:ring-purple-300"></label>
367
+
368
+ <input type="radio" id="color-red" name="color" value="red" class="hidden peer">
369
+ <label for="color-red" class="w-10 h-10 rounded-full bg-red-500 cursor-pointer peer-checked:ring-2 peer-checked:ring-red-300"></label>
370
+
371
+ <input type="radio" id="color-indigo" name="color" value="indigo" class="hidden peer">
372
+ <label for="color-indigo" class="w-10 h-10 rounded-full bg-indigo-500 cursor-pointer peer-checked:ring-2 peer-checked:ring-indigo-300"></label>
373
+ </div>
374
+ </div>
375
+ </div>
376
+ <div class="mt-6">
377
+ <label class="block text-gray-700 mb-2">Professional Summary</label>
378
+ <textarea id="professional-summary" class="w-full px-4 py-2 border rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500" rows="4" placeholder="A brief summary of your professional background, skills, and career objectives (3-5 sentences recommended)"></textarea>
379
+ <p class="text-xs text-gray-500 mt-1">This will appear at the top of your resume. Include relevant keywords for ATS.</p>
380
+ </div>
381
+ </div>
382
+ </div>
383
+
384
+ <!-- Preview Section -->
385
+ <div class="lg:w-1/3">
386
+ <div class="sticky top-4">
387
+ <div class="bg-white rounded-xl shadow-lg p-6 mb-6">
388
+ <h2 class="text-2xl font-semibold text-gray-800 mb-4 flex items-center">
389
+ <i class="fas fa-eye text-blue-500 mr-2"></i> Resume Preview
390
+ </h2>
391
+ <div class="flex justify-between mb-4">
392
+ <div class="text-sm">
393
+ <span class="font-medium">ATS Score:</span>
394
+ <span id="ats-score" class="ml-2 px-2 py-1 bg-blue-100 text-blue-800 rounded-full text-xs">Calculating...</span>
395
+ </div>
396
+ <div class="text-sm">
397
+ <span class="font-medium">Keywords:</span>
398
+ <span id="keyword-count" class="ml-2 px-2 py-1 bg-green-100 text-green-800 rounded-full text-xs">0</span>
399
+ </div>
400
+ </div>
401
+
402
+ <div id="resume-preview" class="resume-paper p-6 rounded-lg border border-gray-200 overflow-y-auto" style="height: 500px;">
403
+ <!-- Resume content will be dynamically inserted here -->
404
+ <div class="text-center py-12 text-gray-400">
405
+ <i class="fas fa-file-alt text-4xl mb-2"></i>
406
+ <p>Your resume preview will appear here</p>
407
+ </div>
408
+ </div>
409
+
410
+ <div class="mt-6 grid grid-cols-1 gap-3">
411
+ <button id="download-pdf" class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-3 rounded-lg font-medium flex items-center justify-center">
412
+ <i class="fas fa-file-pdf mr-2"></i> Download as PDF
413
+ </button>
414
+ <button id="download-doc" class="bg-green-600 hover:bg-green-700 text-white px-4 py-3 rounded-lg font-medium flex items-center justify-center">
415
+ <i class="fas fa-file-word mr-2"></i> Download as DOC
416
+ </button>
417
+ <button id="download-html" class="bg-purple-600 hover:bg-purple-700 text-white px-4 py-3 rounded-lg font-medium flex items-center justify-center">
418
+ <i class="fas fa-code mr-2"></i> Download as HTML
419
+ </button>
420
+ </div>
421
+
422
+ <div class="mt-6 bg-yellow-50 border-l-4 border-yellow-400 p-4">
423
+ <div class="flex">
424
+ <div class="flex-shrink-0">
425
+ <i class="fas fa-lightbulb text-yellow-400"></i>
426
+ </div>
427
+ <div class="ml-3">
428
+ <p class="text-sm text-yellow-700">
429
+ <span class="font-medium">ATS Tip:</span> Use specific job titles, skills from the job description, and quantify achievements for better results.
430
+ </p>
431
+ </div>
432
+ </div>
433
+ </div>
434
+ </div>
435
+ </div>
436
+ </div>
437
+ </div>
438
+ </div>
439
+
440
+ <script>
441
+ // DOM Elements
442
+ const fullNameInput = document.getElementById('full-name');
443
+ const professionalTitleInput = document.getElementById('professional-title');
444
+ const emailInput = document.getElementById('email');
445
+ const phoneInput = document.getElementById('phone');
446
+ const locationInput = document.getElementById('location');
447
+ const linkedinInput = document.getElementById('linkedin');
448
+ const portfolioInput = document.getElementById('portfolio');
449
+ const professionalSummaryInput = document.getElementById('professional-summary');
450
+ const additionalSkillsInput = document.getElementById('additional-skills');
451
+ const resumePreview = document.getElementById('resume-preview');
452
+ const completionProgress = document.getElementById('completion-progress');
453
+ const completionText = document.getElementById('completion-text');
454
+ const atsScoreElement = document.getElementById('ats-score');
455
+ const keywordCountElement = document.getElementById('keyword-count');
456
+
457
+ // Add event listeners to all inputs to update the preview
458
+ document.querySelectorAll('input, textarea, select').forEach(input => {
459
+ input.addEventListener('input', updateResumePreview);
460
+ });
461
+
462
+ // Template and color selection
463
+ document.querySelectorAll('input[name="template"], input[name="color"]').forEach(input => {
464
+ input.addEventListener('change', updateResumePreview);
465
+ });
466
+
467
+ // Initialize the resume preview
468
+ updateResumePreview();
469
+
470
+ // Function to update the resume preview
471
+ function updateResumePreview() {
472
+ // Calculate completion percentage
473
+ const totalFields = document.querySelectorAll('input[required], textarea[required], select[required]').length;
474
+ let filledFields = 0;
475
+
476
+ document.querySelectorAll('input[required], textarea[required], select[required]').forEach(field => {
477
+ if (field.value.trim() !== '') filledFields++;
478
+ });
479
+
480
+ const completionPercentage = Math.round((filledFields / totalFields) * 100);
481
+ completionProgress.style.width = `${completionPercentage}%`;
482
+ completionText.textContent = `${completionPercentage}% Complete`;
483
+
484
+ // Update ATS score (simplified for this example)
485
+ const atsScore = Math.min(100, completionPercentage + Math.floor(Math.random() * 20));
486
+ atsScoreElement.textContent = `${atsScore}/100`;
487
+
488
+ if (atsScore > 80) {
489
+ atsScoreElement.className = 'ml-2 px-2 py-1 bg-green-100 text-green-800 rounded-full text-xs';
490
+ } else if (atsScore > 60) {
491
+ atsScoreElement.className = 'ml-2 px-2 py-1 bg-yellow-100 text-yellow-800 rounded-full text-xs';
492
+ } else {
493
+ atsScoreElement.className = 'ml-2 px-2 py-1 bg-red-100 text-red-800 rounded-full text-xs';
494
+ }
495
+
496
+ // Count keywords (simplified for this example)
497
+ const keywordCount = professionalSummaryInput.value.split(' ').length;
498
+ keywordCountElement.textContent = keywordCount;
499
+
500
+ // Get selected template and color
501
+ const selectedTemplate = document.querySelector('input[name="template"]:checked').value;
502
+ const selectedColor = document.querySelector('input[name="color"]:checked').value;
503
+
504
+ // Generate the resume HTML based on the selected template
505
+ let resumeHTML = '';
506
+
507
+ if (selectedTemplate === 'modern') {
508
+ resumeHTML = generateModernResume(selectedColor);
509
+ } else {
510
+ resumeHTML = generateClassicResume(selectedColor);
511
+ }
512
+
513
+ resumePreview.innerHTML = resumeHTML;
514
+ }
515
+
516
+ // Function to generate modern resume template
517
+ function generateModernResume(color) {
518
+ const colorClasses = {
519
+ blue: { bg: 'bg-blue-600', text: 'text-blue-600', light: 'bg-blue-50', border: 'border-blue-200' },
520
+ green: { bg: 'bg-green-600', text: 'text-green-600', light: 'bg-green-50', border: 'border-green-200' },
521
+ purple: { bg: 'bg-purple-600', text: 'text-purple-600', light: 'bg-purple-50', border: 'border-purple-200' },
522
+ red: { bg: 'bg-red-600', text: 'text-red-600', light: 'bg-red-50', border: 'border-red-200' },
523
+ indigo: { bg: 'bg-indigo-600', text: 'text-indigo-600', light: 'bg-indigo-50', border: 'border-indigo-200' }
524
+ };
525
+
526
+ const colorScheme = colorClasses[color] || colorClasses.blue;
527
+
528
+ // Personal Information
529
+ const name = fullNameInput.value || 'Your Name';
530
+ const title = professionalTitleInput.value || 'Professional Title';
531
+ const email = emailInput.value || '[email protected]';
532
+ const phone = phoneInput.value || '(123) 456-7890';
533
+ const location = locationInput.value || 'City, Country';
534
+ const linkedin = linkedinInput.value || '';
535
+ const portfolio = portfolioInput.value || '';
536
+ const summary = professionalSummaryInput.value || 'Professional summary highlighting your experience, skills, and achievements. Keep it concise (3-5 sentences).';
537
+
538
+ // Generate contact info HTML
539
+ let contactHTML = `
540
+ <div class="mb-1"><i class="fas fa-envelope mr-2 ${colorScheme.text}"></i> ${email}</div>
541
+ <div class="mb-1"><i class="fas fa-phone mr-2 ${colorScheme.text}"></i> ${phone}</div>
542
+ <div class="mb-1"><i class="fas fa-map-marker-alt mr-2 ${colorScheme.text}"></i> ${location}</div>
543
+ `;
544
+
545
+ if (linkedin) {
546
+ contactHTML += `<div class="mb-1"><i class="fab fa-linkedin mr-2 ${colorScheme.text}"></i> ${linkedin.replace('https://', '').replace('www.', '')}</div>`;
547
+ }
548
+
549
+ if (portfolio) {
550
+ contactHTML += `<div class="mb-1"><i class="fas fa-globe mr-2 ${colorScheme.text}"></i> ${portfolio.replace('https://', '').replace('www.', '')}</div>`;
551
+ }
552
+
553
+ // Work Experience
554
+ let experienceHTML = '';
555
+ document.querySelectorAll('.experience-item').forEach((exp, index) => {
556
+ const title = exp.querySelector('.experience-title').value || 'Job Title';
557
+ const company = exp.querySelector('.experience-company').value || 'Company Name';
558
+ const start = exp.querySelector('.experience-start').value || 'YYYY-MM';
559
+ const end = exp.querySelector('.experience-current').checked ? 'Present' : (exp.querySelector('.experience-end').value || 'YYYY-MM');
560
+ const description = exp.querySelector('.experience-description').value || 'Responsibilities and achievements in this role.';
561
+
562
+ // Format description with bullet points
563
+ const formattedDescription = description.split('\n')
564
+ .filter(line => line.trim() !== '')
565
+ .map(line => line.startsWith('•') ? line : `• ${line}`)
566
+ .join('<br>');
567
+
568
+ experienceHTML += `
569
+ <div class="mb-6 ${index > 0 ? 'mt-6' : ''}">
570
+ <h3 class="text-lg font-semibold">${title}</h3>
571
+ <div class="flex justify-between items-center mb-1">
572
+ <span class="text-gray-600">${company}</span>
573
+ <span class="text-sm text-gray-500">${start} - ${end}</span>
574
+ </div>
575
+ <div class="text-gray-700 mt-2">${formattedDescription}</div>
576
+ </div>
577
+ `;
578
+ });
579
+
580
+ if (!experienceHTML) {
581
+ experienceHTML = '<div class="text-gray-500 italic">Add your work experience</div>';
582
+ }
583
+
584
+ // Education
585
+ let educationHTML = '';
586
+ document.querySelectorAll('.education-item').forEach((edu, index) => {
587
+ const degree = edu.querySelector('.education-degree').value || 'Degree';
588
+ const institution = edu.querySelector('.education-institution').value || 'Institution';
589
+ const start = edu.querySelector('.education-start').value || 'YYYY-MM';
590
+ const end = edu.querySelector('.education-current').checked ? 'Present' : (edu.querySelector('.education-end').value || 'YYYY-MM');
591
+ const achievements = edu.querySelector('.education-achievements').value || '';
592
+
593
+ educationHTML += `
594
+ <div class="mb-4 ${index > 0 ? 'mt-4' : ''}">
595
+ <h3 class="text-lg font-semibold">${degree}</h3>
596
+ <div class="flex justify-between items-center mb-1">
597
+ <span class="text-gray-600">${institution}</span>
598
+ <span class="text-sm text-gray-500">${start} - ${end}</span>
599
+ </div>
600
+ ${achievements ? `<div class="text-gray-700 mt-1">${achievements.replace(/\n/g, '<br>')}</div>` : ''}
601
+ </div>
602
+ `;
603
+ });
604
+
605
+ if (!educationHTML) {
606
+ educationHTML = '<div class="text-gray-500 italic">Add your education</div>';
607
+ }
608
+
609
+ // Skills
610
+ let skillsHTML = '';
611
+ document.querySelectorAll('.skill-item').forEach(skill => {
612
+ const name = skill.querySelector('.skill-name').value || 'Skill';
613
+ const level = skill.querySelector('.skill-level').value || 'advanced';
614
+
615
+ const levelMap = {
616
+ beginner: '25%',
617
+ intermediate: '50%',
618
+ advanced: '75%',
619
+ expert: '100%'
620
+ };
621
+
622
+ skillsHTML += `
623
+ <div class="mb-3">
624
+ <div class="flex justify-between items-center mb-1">
625
+ <span class="font-medium">${name}</span>
626
+ <span class="text-xs text-gray-500 capitalize">${level}</span>
627
+ </div>
628
+ <div class="relative skill-level">
629
+ <div class="skill-level-fill" style="width: ${levelMap[level]}; background-color: ${colorScheme.text.replace('text-', 'bg-')}"></div>
630
+ </div>
631
+ </div>
632
+ `;
633
+ });
634
+
635
+ // Additional skills
636
+ const additionalSkills = additionalSkillsInput.value;
637
+ if (additionalSkills) {
638
+ skillsHTML += `
639
+ <div class="mt-4">
640
+ <h4 class="font-medium mb-2">Additional Skills</h4>
641
+ <div class="flex flex-wrap gap-2">
642
+ ${additionalSkills.split(',').map(skill => `
643
+ <span class="text-xs px-3 py-1 rounded-full ${colorScheme.light} ${colorScheme.text}">${skill.trim()}</span>
644
+ `).join('')}
645
+ </div>
646
+ </div>
647
+ `;
648
+ }
649
+
650
+ if (!skillsHTML) {
651
+ skillsHTML = '<div class="text-gray-500 italic">Add your skills</div>';
652
+ }
653
+
654
+ // Projects
655
+ let projectsHTML = '';
656
+ document.querySelectorAll('.project-item').forEach(project => {
657
+ const name = project.querySelector('.project-name').value || 'Project Name';
658
+ const url = project.querySelector('.project-url').value || '';
659
+ const description = project.querySelector('.project-description').value || 'Project description and your role.';
660
+
661
+ projectsHTML += `
662
+ <div class="mb-4">
663
+ <h3 class="font-semibold">${name}</h3>
664
+ ${url ? `<div class="text-sm mb-1"><i class="fas fa-link mr-1 ${colorScheme.text}"></i> <a href="${url}" class="text-blue-600 hover:underline">${url.replace('https://', '').replace('www.', '')}</a></div>` : ''}
665
+ <div class="text-gray-700">${description.replace(/\n/g, '<br>')}</div>
666
+ </div>
667
+ `;
668
+ });
669
+
670
+ if (!projectsHTML) {
671
+ projectsHTML = '<div class="text-gray-500 italic">Add your projects</div>';
672
+ }
673
+
674
+ // Certifications
675
+ let certificationsHTML = '';
676
+ document.querySelectorAll('.certification-item').forEach(cert => {
677
+ const name = cert.querySelector('.certification-name').value || 'Certification Name';
678
+ const org = cert.querySelector('.certification-org').value || 'Issuing Organization';
679
+ const date = cert.querySelector('.certification-date').value || 'YYYY-MM';
680
+ const id = cert.querySelector('.certification-id').value || '';
681
+
682
+ certificationsHTML += `
683
+ <div class="mb-3">
684
+ <h3 class="font-semibold">${name}</h3>
685
+ <div class="flex justify-between items-center">
686
+ <span class="text-gray-600">${org}</span>
687
+ <span class="text-sm text-gray-500">${date}</span>
688
+ </div>
689
+ ${id ? `<div class="text-xs mt-1 text-gray-500">${id}</div>` : ''}
690
+ </div>
691
+ `;
692
+ });
693
+
694
+ if (!certificationsHTML) {
695
+ certificationsHTML = '<div class="text-gray-500 italic">Add your certifications</div>';
696
+ }
697
+
698
+ // Languages
699
+ let languagesHTML = '';
700
+ document.querySelectorAll('.language-item').forEach(lang => {
701
+ const name = lang.querySelector('.language-name').value || 'Language';
702
+ const level = lang.querySelector('.language-level').value || 'fluent';
703
+
704
+ const levelText = {
705
+ native: 'Native',
706
+ fluent: 'Fluent',
707
+ intermediate: 'Intermediate',
708
+ basic: 'Basic'
709
+ };
710
+
711
+ languagesHTML += `
712
+ <div class="flex justify-between items-center mb-2">
713
+ <span class="font-medium">${name}</span>
714
+ <span class="text-sm text-gray-500">${levelText[level]}</span>
715
+ </div>
716
+ `;
717
+ });
718
+
719
+ if (!languagesHTML) {
720
+ languagesHTML = '<div class="text-gray-500 italic">Add your languages</div>';
721
+ }
722
+
723
+ // Generate the full resume HTML
724
+ return `
725
+ <div class="resume-paper p-8">
726
+ <div class="${colorScheme.bg} text-white p-6 rounded-lg mb-6">
727
+ <h1 class="text-3xl font-bold mb-1">${name}</h1>
728
+ <h2 class="text-xl">${title}</h2>
729
+ </div>
730
+
731
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-6">
732
+ <div class="md:col-span-2">
733
+ <div class="mb-6">
734
+ <h2 class="text-xl font-semibold mb-3 ${colorScheme.text} border-b ${colorScheme.border} pb-1">Professional Summary</h2>
735
+ <p class="text-gray-700">${summary.replace(/\n/g, '<br>')}</p>
736
+ </div>
737
+
738
+ <div class="mb-6">
739
+ <h2 class="text-xl font-semibold mb-3 ${colorScheme.text} border-b ${colorScheme.border} pb-1">Work Experience</h2>
740
+ ${experienceHTML}
741
+ </div>
742
+
743
+ <div class="mb-6">
744
+ <h2 class="text-xl font-semibold mb-3 ${colorScheme.text} border-b ${colorScheme.border} pb-1">Projects</h2>
745
+ ${projectsHTML}
746
+ </div>
747
+ </div>
748
+
749
+ <div>
750
+ <div class="mb-6">
751
+ <h2 class="text-xl font-semibold mb-3 ${colorScheme.text} border-b ${colorScheme.border} pb-1">Contact</h2>
752
+ ${contactHTML}
753
+ </div>
754
+
755
+ <div class="mb-6">
756
+ <h2 class="text-xl font-semibold mb-3 ${colorScheme.text} border-b ${colorScheme.border} pb-1">Skills</h2>
757
+ ${skillsHTML}
758
+ </div>
759
+
760
+ <div class="mb-6">
761
+ <h2 class="text-xl font-semibold mb-3 ${colorScheme.text} border-b ${colorScheme.border} pb-1">Education</h2>
762
+ ${educationHTML}
763
+ </div>
764
+
765
+ <div class="mb-6">
766
+ <h2 class="text-xl font-semibold mb-3 ${colorScheme.text} border-b ${colorScheme.border} pb-1">Certifications</h2>
767
+ ${certificationsHTML}
768
+ </div>
769
+
770
+ <div class="mb-6">
771
+ <h2 class="text-xl font-semibold mb-3 ${colorScheme.text} border-b ${colorScheme.border} pb-1">Languages</h2>
772
+ ${languagesHTML}
773
+ </div>
774
+ </div>
775
+ </div>
776
+ </div>
777
+ `;
778
+ }
779
+
780
+ // Function to generate classic resume template
781
+ function generateClassicResume(color) {
782
+ const colorClasses = {
783
+ blue: { text: 'text-blue-600', border: 'border-blue-200' },
784
+ green: { text: 'text-green-600', border: 'border-green-200' },
785
+ purple: { text: 'text-purple-600', border: 'border-purple-200' },
786
+ red: { text: 'text-red-600', border: 'border-red-200' },
787
+ indigo: { text: 'text-indigo-600', border: 'border-indigo-200' }
788
+ };
789
+
790
+ const colorScheme = colorClasses[color] || colorClasses.blue;
791
+
792
+ // Personal Information
793
+ const name = fullNameInput.value || 'Your Name';
794
+ const title = professionalTitleInput.value || 'Professional Title';
795
+ const email = emailInput.value || '[email protected]';
796
+ const phone = phoneInput.value || '(123) 456-7890';
797
+ const location = locationInput.value || 'City, Country';
798
+ const linkedin = linkedinInput.value || '';
799
+ const portfolio = portfolioInput.value || '';
800
+ const summary = professionalSummaryInput.value || 'Professional summary highlighting your experience, skills, and achievements. Keep it concise (3-5 sentences).';
801
+
802
+ // Generate contact info HTML
803
+ let contactHTML = `
804
+ <div class="flex flex-wrap gap-4 text-sm">
805
+ <div><i class="fas fa-envelope mr-1 ${colorScheme.text}"></i> ${email}</div>
806
+ <div><i class="fas fa-phone mr-1 ${colorScheme.text}"></i> ${phone}</div>
807
+ <div><i class="fas fa-map-marker-alt mr-1 ${colorScheme.text}"></i> ${location}</div>
808
+ ${linkedin ? `<div><i class="fab fa-linkedin mr-1 ${colorScheme.text}"></i> ${linkedin.replace('https://', '').replace('www.', '')}</div>` : ''}
809
+ ${portfolio ? `<div><i class="fas fa-globe mr-1 ${colorScheme.text}"></i> ${portfolio.replace('https://', '').replace('www.', '')}</div>` : ''}
810
+ </div>
811
+ `;
812
+
813
+ // Work Experience
814
+ let experienceHTML = '';
815
+ document.querySelectorAll('.experience-item').forEach((exp, index) => {
816
+ const title = exp.querySelector('.experience-title').value || 'Job Title';
817
+ const company = exp.querySelector('.experience-company').value || 'Company Name';
818
+ const start = exp.querySelector('.experience-start').value || 'YYYY-MM';
819
+ const end = exp.querySelector('.experience-current').checked ? 'Present' : (exp.querySelector('.experience-end').value || 'YYYY-MM');
820
+ const description = exp.querySelector('.experience-description').value || 'Responsibilities and achievements in this role.';
821
+
822
+ // Format description with bullet points
823
+ const formattedDescription = description.split('\n')
824
+ .filter(line => line.trim() !== '')
825
+ .map(line => line.startsWith('•') ? line : `• ${line}`)
826
+ .join('<br>');
827
+
828
+ experienceHTML += `
829
+ <div class="mb-4 ${index > 0 ? 'mt-4' : ''}">
830
+ <div class="flex justify-between items-center">
831
+ <h3 class="font-semibold">${title}</h3>
832
+ <span class="text-sm text-gray-500">${start} - ${end}</span>
833
+ </div>
834
+ <div class="text-gray-600 mb-1">${company}</div>
835
+ <div class="text-gray-700 ml-4">${formattedDescription}</div>
836
+ </div>
837
+ `;
838
+ });
839
+
840
+ if (!experienceHTML) {
841
+ experienceHTML = '<div class="text-gray-500 italic">Add your work experience</div>';
842
+ }
843
+
844
+ // Education
845
+ let educationHTML = '';
846
+ document.querySelectorAll('.education-item').forEach((edu, index) => {
847
+ const degree = edu.querySelector('.education-degree').value || 'Degree';
848
+ const institution = edu.querySelector('.education-institution').value || 'Institution';
849
+ const start = edu.querySelector('.education-start').value || 'YYYY-MM';
850
+ const end = edu.querySelector('.education-current').checked ? 'Present' : (edu.querySelector('.education-end').value || 'YYYY-MM');
851
+ const achievements = edu.querySelector('.education-achievements').value || '';
852
+
853
+ educationHTML += `
854
+ <div class="mb-3 ${index > 0 ? 'mt-3' : ''}">
855
+ <div class="flex justify-between items-center">
856
+ <h3 class="font-semibold">${degree}</h3>
857
+ <span class="text-sm text-gray-500">${start} - ${end}</span>
858
+ </div>
859
+ <div class="text-gray-600">${institution}</div>
860
+ ${achievements ? `<div class="text-gray-700 mt-1">${achievements.replace(/\n/g, '<br>')}</div>` : ''}
861
+ </div>
862
+ `;
863
+ });
864
+
865
+ if (!educationHTML) {
866
+ educationHTML = '<div class="text-gray-500 italic">Add your education</div>';
867
+ }
868
+
869
+ // Skills
870
+ let skillsHTML = '';
871
+ document.querySelectorAll('.skill-item').forEach(skill => {
872
+ const name = skill.querySelector('.skill-name').value || 'Skill';
873
+ const level = skill.querySelector('.skill-level').value || 'advanced';
874
+
875
+ skillsHTML += `
876
+ <div class="mb-1">
877
+ <span class="font-medium">${name}</span>
878
+ <span class="text-xs text-gray-500 ml-1 capitalize">(${level})</span>
879
+ </div>
880
+ `;
881
+ });
882
+
883
+ // Additional skills
884
+ const additionalSkills = additionalSkillsInput.value;
885
+ if (additionalSkills) {
886
+ skillsHTML += `
887
+ <div class="mt-2">
888
+ <div class="text-sm font-medium mb-1">Additional:</div>
889
+ <div class="text-sm text-gray-700">${additionalSkills}</div>
890
+ </div>
891
+ `;
892
+ }
893
+
894
+ if (!skillsHTML) {
895
+ skillsHTML = '<div class="text-gray-500 italic">Add your skills</div>';
896
+ }
897
+
898
+ // Projects
899
+ let projectsHTML = '';
900
+ document.querySelectorAll('.project-item').forEach(project => {
901
+ const name = project.querySelector('.project-name').value || 'Project Name';
902
+ const url = project.querySelector('.project-url').value || '';
903
+ const description = project.querySelector('.project-description').value || 'Project description and your role.';
904
+
905
+ projectsHTML += `
906
+ <div class="mb-3">
907
+ <h3 class="font-semibold">${name}</h3>
908
+ ${url ? `<div class="text-sm mb-1"><i class="fas fa-link mr-1 ${colorScheme.text}"></i> <a href="${url}" class="text-blue-600 hover:underline">${url.replace('https://', '').replace('www.', '')}</a></div>` : ''}
909
+ <div class="text-gray-700">${description.replace(/\n/g, '<br>')}</div>
910
+ </div>
911
+ `;
912
+ });
913
+
914
+ if (!projectsHTML) {
915
+ projectsHTML = '<div class="text-gray-500 italic">Add your projects</div>';
916
+ }
917
+
918
+ // Certifications
919
+ let certificationsHTML = '';
920
+ document.querySelectorAll('.certification-item').forEach(cert => {
921
+ const name = cert.querySelector('.certification-name').value || 'Certification Name';
922
+ const org = cert.querySelector('.certification-org').value || 'Issuing Organization';
923
+ const date = cert.querySelector('.certification-date').value || 'YYYY-MM';
924
+ const id = cert.querySelector('.certification-id').value || '';
925
+
926
+ certificationsHTML += `
927
+ <div class="mb-2">
928
+ <h3 class="font-semibold">${name}</h3>
929
+ <div class="flex justify-between items-center">
930
+ <span class="text-gray-600">${org}</span>
931
+ <span class="text-sm text-gray-500">${date}</span>
932
+ </div>
933
+ ${id ? `<div class="text-xs mt-1 text-gray-500">${id}</div>` : ''}
934
+ </div>
935
+ `;
936
+ });
937
+
938
+ if (!certificationsHTML) {
939
+ certificationsHTML = '<div class="text-gray-500 italic">Add your certifications</div>';
940
+ }
941
+
942
+ // Languages
943
+ let languagesHTML = '';
944
+ document.querySelectorAll('.language-item').forEach(lang => {
945
+ const name = lang.querySelector('.language-name').value || 'Language';
946
+ const level = lang.querySelector('.language-level').value || 'fluent';
947
+
948
+ const levelText = {
949
+ native: 'Native',
950
+ fluent: 'Fluent',
951
+ intermediate: 'Intermediate',
952
+ basic: 'Basic'
953
+ };
954
+
955
+ languagesHTML += `
956
+ <div class="flex justify-between items-center mb-1">
957
+ <span class="font-medium">${name}</span>
958
+ <span class="text-sm text-gray-500">${levelText[level]}</span>
959
+ </div>
960
+ `;
961
+ });
962
+
963
+ if (!languagesHTML) {
964
+ languagesHTML = '<div class="text-gray-500 italic">Add your languages</div>';
965
+ }
966
+
967
+ // Generate the full resume HTML
968
+ return `
969
+ <div class="resume-paper p-8">
970
+ <div class="text-center mb-6">
971
+ <h1 class="text-3xl font-bold mb-1">${name}</h1>
972
+ <h2 class="text-xl text-gray-600 mb-3">${title}</h2>
973
+ ${contactHTML}
974
+ </div>
975
+
976
+ <div class="mb-6">
977
+ <h2 class="text-xl font-semibold mb-3 ${colorScheme.text} border-b ${colorScheme.border} pb-1">Summary</h2>
978
+ <p class="text-gray-700">${summary.replace(/\n/g, '<br>')}</p>
979
+ </div>
980
+
981
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
982
+ <div>
983
+ <div class="mb-6">
984
+ <h2 class="text-xl font-semibold mb-3 ${colorScheme.text} border-b ${colorScheme.border} pb-1">Experience</h2>
985
+ ${experienceHTML}
986
+ </div>
987
+
988
+ <div class="mb-6">
989
+ <h2 class="text-xl font-semibold mb-3 ${colorScheme.text} border-b ${colorScheme.border} pb-1">Projects</h2>
990
+ ${projectsHTML}
991
+ </div>
992
+
993
+ <div class="mb-6">
994
+ <h2 class="text-xl font-semibold mb-3 ${colorScheme.text} border-b ${colorScheme.border} pb-1">Education</h2>
995
+ ${educationHTML}
996
+ </div>
997
+ </div>
998
+
999
+ <div>
1000
+ <div class="mb-6">
1001
+ <h2 class="text-xl font-semibold mb-3 ${colorScheme.text} border-b ${colorScheme.border} pb-1">Skills</h2>
1002
+ ${skillsHTML}
1003
+ </div>
1004
+
1005
+ <div class="mb-6">
1006
+ <h2 class="text-xl font-semibold mb-3 ${colorScheme.text} border-b ${colorScheme.border} pb-1">Certifications</h2>
1007
+ ${certificationsHTML}
1008
+ </div>
1009
+
1010
+ <div class="mb-6">
1011
+ <h2 class="text-xl font-semibold mb-3 ${colorScheme.text} border-b ${colorScheme.border} pb-1">Languages</h2>
1012
+ ${languagesHTML}
1013
+ </div>
1014
+ </div>
1015
+ </div>
1016
+ </div>
1017
+ `;
1018
+ }
1019
+
1020
+ // Function to add a new experience section
1021
+ document.getElementById('add-experience').addEventListener('click', function() {
1022
+ const container = document.getElementById('experience-container');
1023
+ const newItem = document.createElement('div');
1024
+ newItem.className = 'experience-item mb-6 p-4 border rounded-lg fade-in';
1025
+ newItem.innerHTML = `
1026
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-3">
1027
+ <div>
1028
+ <label class="block text-gray-700 mb-1">Job Title*</label>
1029
+ <input type="text" class="w-full px-4 py-2 border rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 experience-title" placeholder="Senior Developer">
1030
+ </div>
1031
+ <div>
1032
+ <label class="block text-gray-700 mb-1">Company Name*</label>
1033
+ <input type="text" class="w-full px-4 py-2 border rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 experience-company" placeholder="Tech Corp Inc.">
1034
+ </div>
1035
+ </div>
1036
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-3">
1037
+ <div>
1038
+ <label class="block text-gray-700 mb-1">Start Date*</label>
1039
+ <input type="month" class="w-full px-4 py-2 border rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 experience-start">
1040
+ </div>
1041
+ <div>
1042
+ <label class="block text-gray-700 mb-1">End Date (or present)</label>
1043
+ <input type="month" class="w-full px-4 py-2 border rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 experience-end">
1044
+ <div class="flex items-center mt-2">
1045
+ <input type="checkbox" class="mr-2 experience-current">
1046
+ <span class="text-sm text-gray-600">I currently work here</span>
1047
+ </div>
1048
+ </div>
1049
+ </div>
1050
+ <div>
1051
+ <label class="block text-gray-700 mb-1">Responsibilities & Achievements*</label>
1052
+ <textarea class="w-full px-4 py-2 border rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 experience-description" rows="3" placeholder="Describe your responsibilities and key achievements using action verbs (e.g., Developed, Led, Optimized)"></textarea>
1053
+ <p class="text-xs text-gray-500 mt-1">Use bullet points for better ATS parsing. Example: "• Led a team of 5 developers to deliver a SaaS product"</p>
1054
+ </div>
1055
+ <button class="remove-experience mt-2 text-red-500 text-sm flex items-center">
1056
+ <i class="fas fa-trash mr-1"></i> Remove this experience
1057
+ </button>
1058
+ `;
1059
+
1060
+ container.appendChild(newItem);
1061
+
1062
+ // Add event listeners to new inputs
1063
+ newItem.querySelectorAll('input, textarea, select').forEach(input => {
1064
+ input.addEventListener('input', updateResumePreview);
1065
+ });
1066
+
1067
+ // Add event listener to remove button
1068
+ newItem.querySelector('.remove-experience').addEventListener('click', function() {
1069
+ newItem.classList.add('fade-out');
1070
+ setTimeout(() => {
1071
+ container.removeChild(newItem);
1072
+ updateResumePreview();
1073
+ }, 300);
1074
+ });
1075
+
1076
+ // Add event listener to current job checkbox
1077
+ newItem.querySelector('.experience-current').addEventListener('change', function() {
1078
+ const endDateInput = newItem.querySelector('.experience-end');
1079
+ if (this.checked) {
1080
+ endDateInput.disabled = true;
1081
+ endDateInput.value = '';
1082
+ } else {
1083
+ endDateInput.disabled = false;
1084
+ }
1085
+ updateResumePreview();
1086
+ });
1087
+
1088
+ updateResumePreview();
1089
+ });
1090
+
1091
+ // Function to add a new education section
1092
+ document.getElementById('add-education').addEventListener('click', function() {
1093
+ const container = document.getElementById('education-container');
1094
+ const newItem = document.createElement('div');
1095
+ newItem.className = 'education-item mb-6 p-4 border rounded-lg fade-in';
1096
+ newItem.innerHTML = `
1097
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-3">
1098
+ <div>
1099
+ <label class="block text-gray-700 mb-1">Degree*</label>
1100
+ <input type="text" class="w-full px-4 py-2 border rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 education-degree" placeholder="Bachelor of Science in Computer Science">
1101
+ </div>
1102
+ <div>
1103
+ <label class="block text-gray-700 mb-1">Institution*</label>
1104
+ <input type="text" class="w-full px-4 py-2 border rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 education-institution" placeholder="University of Technology">
1105
+ </div>
1106
+ </div>
1107
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-3">
1108
+ <div>
1109
+ <label class="block text-gray-700 mb-1">Start Date*</label>
1110
+ <input type="month" class="w-full px-4 py-2 border rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 education-start">
1111
+ </div>
1112
+ <div>
1113
+ <label class="block text-gray-700 mb-1">End Date (or expected)</label>
1114
+ <input type="month" class="w-full px-4 py-2 border rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 education-end">
1115
+ <div class="flex items-center mt-2">
1116
+ <input type="checkbox" class="mr-2 education-current">
1117
+ <span class="text-sm text-gray-600">Currently studying here</span>
1118
+ </div>
1119
+ </div>
1120
+ </div>
1121
+ <div>
1122
+ <label class="block text-gray-700 mb-1">Notable Achievements (optional)</label>
1123
+ <textarea class="w-full px-4 py-2 border rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 education-achievements" rows="2" placeholder="Honors, awards, relevant coursework"></textarea>
1124
+ </div>
1125
+ <button class="remove-education mt-2 text-red-500 text-sm flex items-center">
1126
+ <i class="fas fa-trash mr-1"></i> Remove this education
1127
+ </button>
1128
+ `;
1129
+
1130
+ container.appendChild(newItem);
1131
+
1132
+ // Add event listeners to new inputs
1133
+ newItem.querySelectorAll('input, textarea, select').forEach(input => {
1134
+ input.addEventListener('input', updateResumePreview);
1135
+ });
1136
+
1137
+ // Add event listener to remove button
1138
+ newItem.querySelector('.remove-education').addEventListener('click', function() {
1139
+ newItem.classList.add('fade-out');
1140
+ setTimeout(() => {
1141
+ container.removeChild(newItem);
1142
+ updateResumePreview();
1143
+ }, 300);
1144
+ });
1145
+
1146
+ // Add event listener to current study checkbox
1147
+ newItem.querySelector('.education-current').addEventListener('change', function() {
1148
+ const endDateInput = newItem.querySelector('.education-end');
1149
+ if (this.checked) {
1150
+ endDateInput.disabled = true;
1151
+ endDateInput.value = '';
1152
+ } else {
1153
+ endDateInput.disabled = false;
1154
+ }
1155
+ updateResumePreview();
1156
+ });
1157
+
1158
+ updateResumePreview();
1159
+ });
1160
+
1161
+ // Function to add a new skill section
1162
+ document.getElementById('add-skill').addEventListener('click', function() {
1163
+ const container = document.getElementById('skills-container');
1164
+ const newItem = document.createElement('div');
1165
+ newItem.className = 'skill-item mb-4 p-4 border rounded-lg fade-in';
1166
+ newItem.innerHTML = `
1167
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-3">
1168
+ <div>
1169
+ <label class="block text-gray-700 mb-1">Skill Name*</label>
1170
+ <input type="text" class="w-full px-4 py-2 border rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 skill-name" placeholder="JavaScript">
1171
+ </div>
1172
+ <div>
1173
+ <label class="block text-gray-700 mb-1">Skill Level*</label>
1174
+ <select class="w-full px-4 py-2 border rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 skill-level">
1175
+ <option value="beginner">Beginner</option>
1176
+ <option value="intermediate">Intermediate</option>
1177
+ <option value="advanced" selected>Advanced</option>
1178
+ <option value="expert">Expert</option>
1179
+ </select>
1180
+ </div>
1181
+ </div>
1182
+ <button class="remove-skill text-red-500 text-sm flex items-center">
1183
+ <i class="fas fa-trash mr-1"></i> Remove this skill
1184
+ </button>
1185
+ `;
1186
+
1187
+ container.appendChild(newItem);
1188
+
1189
+ // Add event listeners to new inputs
1190
+ newItem.querySelectorAll('input, textarea, select').forEach(input => {
1191
+ input.addEventListener('input', updateResumePreview);
1192
+ });
1193
+
1194
+ // Add event listener to remove button
1195
+ newItem.querySelector('.remove-skill').addEventListener('click', function() {
1196
+ newItem.classList.add('fade-out');
1197
+ setTimeout(() => {
1198
+ container.removeChild(newItem);
1199
+ updateResumePreview();
1200
+ }, 300);
1201
+ });
1202
+
1203
+ updateResumePreview();
1204
+ });
1205
+
1206
+ // Function to add a new project section
1207
+ document.getElementById('add-project').addEventListener('click', function() {
1208
+ const container = document.getElementById('projects-container');
1209
+ const newItem = document.createElement('div');
1210
+ newItem.className = 'project-item mb-6 p-4 border rounded-lg fade-in';
1211
+ newItem.innerHTML = `
1212
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-3">
1213
+ <div>
1214
+ <label class="block text-gray-700 mb-1">Project Name*</label>
1215
+ <input type="text" class="w-full px-4 py-2 border rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 project-name" placeholder="E-commerce Website">
1216
+ </div>
1217
+ <div>
1218
+ <label class="block text-gray-700 mb-1">Project URL (optional)</label>
1219
+ <input type="url" class="w-full px-4 py-2 border rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 project-url" placeholder="https://example.com">
1220
+ </div>
1221
+ </div>
1222
+ <div>
1223
+ <label class="block text-gray-700 mb-1">Project Description*</label>
1224
+ <textarea class="w-full px-4 py-2 border rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 project-description" rows="3" placeholder="Describe the project, technologies used, and your role"></textarea>
1225
+ <p class="text-xs text-gray-500 mt-1">Use action verbs and quantify results when possible (e.g., "Increased performance by 30%")</p>
1226
+ </div>
1227
+ <button class="remove-project mt-2 text-red-500 text-sm flex items-center">
1228
+ <i class="fas fa-trash mr-1"></i> Remove this project
1229
+ </button>
1230
+ `;
1231
+
1232
+ container.appendChild(newItem);
1233
+
1234
+ // Add event listeners to new inputs
1235
+ newItem.querySelectorAll('input, textarea, select').forEach(input => {
1236
+ input.addEventListener('input', updateResumePreview);
1237
+ });
1238
+
1239
+ // Add event listener to remove button
1240
+ newItem.querySelector('.remove-project').addEventListener('click', function() {
1241
+ newItem.classList.add('fade-out');
1242
+ setTimeout(() => {
1243
+ container.removeChild(newItem);
1244
+ updateResumePreview();
1245
+ }, 300);
1246
+ });
1247
+
1248
+ updateResumePreview();
1249
+ });
1250
+
1251
+ // Function to add a new certification section
1252
+ document.getElementById('add-certification').addEventListener('click', function() {
1253
+ const container = document.getElementById('certifications-container');
1254
+ const newItem = document.createElement('div');
1255
+ newItem.className = 'certification-item mb-4 p-4 border rounded-lg fade-in';
1256
+ newItem.innerHTML = `
1257
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-3">
1258
+ <div>
1259
+ <label class="block text-gray-700 mb-1">Certification Name*</label>
1260
+ <input type="text" class="w-full px-4 py-2 border rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 certification-name" placeholder="AWS Certified Solutions Architect">
1261
+ </div>
1262
+ <div>
1263
+ <label class="block text-gray-700 mb-1">Issuing Organization*</label>
1264
+ <input type="text" class="w-full px-4 py-2 border rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 certification-org" placeholder="Amazon Web Services">
1265
+ </div>
1266
+ </div>
1267
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-3">
1268
+ <div>
1269
+ <label class="block text-gray-700 mb-1">Date Earned*</label>
1270
+ <input type="month" class="w-full px-4 py-2 border rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 certification-date">
1271
+ </div>
1272
+ <div>
1273
+ <label class="block text-gray-700 mb-1">Credential ID (optional)</label>
1274
+ <input type="text" class="w-full px-4 py-2 border rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 certification-id" placeholder="Credential ID or URL">
1275
+ </div>
1276
+ </div>
1277
+ <button class="remove-certification mt-2 text-red-500 text-sm flex items-center">
1278
+ <i class="fas fa-trash mr-1"></i> Remove this certification
1279
+ </button>
1280
+ `;
1281
+
1282
+ container.appendChild(newItem);
1283
+
1284
+ // Add event listeners to new inputs
1285
+ newItem.querySelectorAll('input, textarea, select').forEach(input => {
1286
+ input.addEventListener('
1287
+ </html>
prompts.txt ADDED
@@ -0,0 +1 @@
 
 
1
+ Create a Cv Maker App, that can easily create CV from provided data, It will collect the data and transform into Digital CV to downlaod IN HTML File, also User can generate .doc file, just filing our boxes, and we setup mechnism to decorate information and makes best out of it. It has to be for making Resume more ATS friendly.