Grazing Resume Center – Create ATS Compliant Resumes<\/title>\n <script src=\"https:\/\/cdn.tailwindcss.com\"><\/script>\n <link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.4.0\/css\/all.min.css\">\n <script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/jspdf\/2.5.1\/jspdf.umd.min.js\"><\/script>\n <script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/html2canvas\/1.4.1\/html2canvas.min.js\"><\/script>\n <style>\n @import url('https:\/\/fonts.googleapis.com\/css2?family=Poppins:wght@300;400;500;600;700&display=swap');\n \n body {\n font-family: 'Poppins', sans-serif;\n background-color: #f8fafc;\n }\n \n .resume-paper {\n box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.1);\n transition: all 0.3s ease;\n }\n \n .resume-paper:hover {\n transform: translateY(-5px);\n box-shadow: 0 15px 35px -10px rgba(0, 0, 0, 0.15);\n }\n \n .template-option {\n transition: all 0.2s ease;\n }\n \n .template-option:hover {\n transform: scale(1.05);\n }\n \n .template-option.selected {\n border: 3px solid #3b82f6;\n transform: scale(1.05);\n }\n \n .progress-bar {\n height: 6px;\n transition: width 0.3s ease;\n }\n \n .section-toggle {\n transition: all 0.2s ease;\n }\n \n .section-toggle:hover {\n background-color: #f1f5f9;\n }\n \n .floating-label {\n transition: all 0.2s ease;\n transform-origin: left center;\n }\n \n .input-field:focus + .floating-label,\n .input-field:not(:placeholder-shown) + .floating-label {\n transform: translateY(-22px) scale(0.85);\n color: #3b82f6;\n }\n \n \/* Template specific styles *\/\n .template1 {\n --primary-color: #3b82f6;\n --secondary-color: #1e40af;\n --text-color: #1f2937;\n --light-bg: #f8fafc;\n }\n \n .template2 {\n --primary-color: #10b981;\n --secondary-color: #047857;\n --text-color: #1f2937;\n --light-bg: #f0fdf4;\n }\n \n .template3 {\n --primary-color: #8b5cf6;\n --secondary-color: #6d28d9;\n --text-color: #1f2937;\n --light-bg: #f5f3ff;\n }\n \n .template4 {\n --primary-color: #ec4899;\n --secondary-color: #be185d;\n --text-color: #1f2937;\n --light-bg: #fdf2f8;\n }\n \n \/* Resume template styles *\/\n .resume-template1 {\n background-color: white;\n color: var(--text-color);\n }\n \n .resume-template1 .header {\n background-color: var(--primary-color);\n color: white;\n }\n \n .resume-template1 .section-title {\n color: var(--secondary-color);\n border-bottom: 2px solid var(--primary-color);\n }\n \n .resume-template1 .contact-item i {\n color: var(--primary-color);\n }\n \n .resume-template2 {\n background-color: white;\n color: var(--text-color);\n border-left: 5px solid var(--primary-color);\n }\n \n .resume-template2 .header {\n background-color: var(--light-bg);\n border-bottom: 3px solid var(--primary-color);\n }\n \n .resume-template2 .section-title {\n color: var(--primary-color);\n }\n \n .resume-template2 .contact-item i {\n color: var(--secondary-color);\n }\n \n .resume-template3 {\n background-color: white;\n color: var(--text-color);\n }\n \n .resume-template3 .header {\n background-color: var(--secondary-color);\n color: white;\n }\n \n .resume-template3 .sidebar {\n background-color: var(--primary-color);\n color: white;\n }\n \n .resume-template3 .section-title {\n color: white;\n }\n \n .resume-template3 .main-content {\n background-color: white;\n }\n \n .resume-template4 {\n background-color: white;\n color: var(--text-color);\n }\n \n .resume-template4 .header {\n background-color: var(--primary-color);\n color: white;\n }\n \n .resume-template4 .section-title {\n background-color: var(--light-bg);\n color: var(--secondary-color);\n padding: 0.5rem 1rem;\n border-radius: 0.25rem;\n }\n <\/style>\n<\/head>\n<body class=\"min-h-screen bg-gray-50\">\n <div class=\"container mx-auto px-4 py-8\">\n \n <header class=\"text-center mb-8\">\n <h1 class=\"text-4xl font-bold text-blue-600 mb-2\">Grazing Resume Center<\/h1>\n <p class=\"text-lg text-gray-600\">Create professional, ATS-compliant resumes in minutes<\/p>\n <\/header>\n \n \n <div class=\"flex flex-col lg:flex-row gap-8\">\n \n <div class=\"lg:w-1\/2 bg-white rounded-xl shadow-md p-6\">\n <div class=\"flex justify-between items-center mb-6\">\n <h2 class=\"text-2xl font-semibold text-gray-800\">Resume Builder<\/h2>\n <div class=\"flex items-center\">\n <span class=\"text-sm text-gray-500 mr-2\">LinkedIn<\/span>\n <button id=\"fetchLinkedIn\" class=\"bg-blue-100 text-blue-600 px-3 py-1 rounded-full text-sm flex items-center\">\n <i class=\"fab fa-linkedin mr-1\"><\/i> Fetch\n <\/button>\n <\/div>\n <\/div>\n \n \n <div class=\"mb-6\">\n <div class=\"flex justify-between mb-1\">\n <span class=\"text-sm font-medium text-gray-700\">Progress<\/span>\n <span id=\"progressPercent\" class=\"text-sm font-medium text-gray-700\">0%<\/span>\n <\/div>\n <div class=\"w-full bg-gray-200 rounded-full h-2.5\">\n <div id=\"progressBar\" class=\"bg-blue-600 h-2.5 rounded-full\" style=\"width: 0%\"><\/div>\n <\/div>\n <\/div>\n \n \n <div class=\"mb-8\">\n <h3 class=\"text-lg font-medium text-gray-800 mb-3\">Choose a Template<\/h3>\n <div class=\"grid grid-cols-2 sm:grid-cols-4 gap-3\">\n <div class=\"template-option cursor-pointer\" data-template=\"template1\">\n <div class=\"h-32 bg-blue-500 rounded-lg\"><\/div>\n <p class=\"text-center mt-1 text-sm\">Professional<\/p>\n <\/div>\n <div class=\"template-option cursor-pointer\" data-template=\"template2\">\n <div class=\"h-32 bg-green-500 rounded-lg\"><\/div>\n <p class=\"text-center mt-1 text-sm\">Modern<\/p>\n <\/div>\n <div class=\"template-option cursor-pointer\" data-template=\"template3\">\n <div class=\"h-32 bg-purple-500 rounded-lg\"><\/div>\n <p class=\"text-center mt-1 text-sm\">Creative<\/p>\n <\/div>\n <div class=\"template-option cursor-pointer selected\" data-template=\"template4\">\n <div class=\"h-32 bg-pink-500 rounded-lg\"><\/div>\n <p class=\"text-center mt-1 text-sm\">Elegant<\/p>\n <\/div>\n <\/div>\n <\/div>\n \n \n <div id=\"linkedinModal\" class=\"fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden\">\n <div class=\"bg-white rounded-lg p-6 w-full max-w-md\">\n <div class=\"flex justify-between items-center mb-4\">\n <h3 class=\"text-xl font-semibold\">Fetch from LinkedIn<\/h3>\n <button id=\"closeModal\" class=\"text-gray-500 hover:text-gray-700\">\n <i class=\"fas fa-times\"><\/i>\n <\/button>\n <\/div>\n <div class=\"mb-4\">\n <p class=\"text-gray-600 mb-3\">Enter your LinkedIn profile URL to automatically import your information:<\/p>\n <div class=\"relative\">\n <input type=\"text\" id=\"linkedinUrl\" placeholder=\"https:\/\/www.linkedin.com\/in\/your-profile\" \n class=\"w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500\">\n <div class=\"absolute right-2 top-2\">\n <i class=\"fab fa-linkedin text-blue-500 text-xl\"><\/i>\n <\/div>\n <\/div>\n <\/div>\n <div class=\"flex justify-end\">\n <button id=\"fetchProfile\" class=\"bg-blue-600 text-white px-4 py-2 rounded-lg hover:bg-blue-700 transition\">\n Fetch Profile\n <\/button>\n <\/div>\n <\/div>\n <\/div>\n \n \n <div class=\"space-y-6\">\n \n <div class=\"section-group\">\n <div class=\"section-toggle flex justify-between items-center p-3 bg-gray-50 rounded-lg cursor-pointer\">\n <h3 class=\"font-medium text-gray-800\">\n <i class=\"fas fa-user mr-2 text-blue-500\"><\/i> Personal Information\n <\/h3>\n <i class=\"fas fa-chevron-down text-gray-500 transition-transform duration-200\"><\/i>\n <\/div>\n <div class=\"section-content mt-3 space-y-4\">\n <div class=\"grid grid-cols-1 md:grid-cols-2 gap-4\">\n <div class=\"relative\">\n <input type=\"text\" id=\"firstName\" placeholder=\" \" \n class=\"input-field w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500\">\n <label for=\"firstName\" class=\"floating-label absolute left-4 top-2 text-gray-500 pointer-events-none\">First Name<\/label>\n <\/div>\n <div class=\"relative\">\n <input type=\"text\" id=\"lastName\" placeholder=\" \" \n class=\"input-field w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500\">\n <label for=\"lastName\" class=\"floating-label absolute left-4 top-2 text-gray-500 pointer-events-none\">Last Name<\/label>\n <\/div>\n <\/div>\n <div class=\"relative\">\n <input type=\"text\" id=\"profession\" placeholder=\" \" \n class=\"input-field w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500\">\n <label for=\"profession\" class=\"floating-label absolute left-4 top-2 text-gray-500 pointer-events-none\">Profession<\/label>\n <\/div>\n <div class=\"relative\">\n <textarea id=\"summary\" placeholder=\" \" rows=\"3\"\n class=\"input-field w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500\"><\/textarea>\n <label for=\"summary\" class=\"floating-label absolute left-4 top-2 text-gray-500 pointer-events-none\">Professional Summary<\/label>\n <\/div>\n <\/div>\n <\/div>\n \n \n <div class=\"section-group\">\n <div class=\"section-toggle flex justify-between items-center p-3 bg-gray-50 rounded-lg cursor-pointer\">\n <h3 class=\"font-medium text-gray-800\">\n <i class=\"fas fa-address-book mr-2 text-blue-500\"><\/i> Contact Information\n <\/h3>\n <i class=\"fas fa-chevron-down text-gray-500 transition-transform duration-200\"><\/i>\n <\/div>\n <div class=\"section-content mt-3 space-y-4 hidden\">\n <div class=\"relative\">\n <input type=\"email\" id=\"email\" placeholder=\" \" \n class=\"input-field w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500\">\n <label for=\"email\" class=\"floating-label absolute left-4 top-2 text-gray-500 pointer-events-none\">Email Address<\/label>\n <\/div>\n <div class=\"relative\">\n <input type=\"tel\" id=\"phone\" placeholder=\" \" \n class=\"input-field w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500\">\n <label for=\"phone\" class=\"floating-label absolute left-4 top-2 text-gray-500 pointer-events-none\">Phone Number<\/label>\n <\/div>\n <div class=\"relative\">\n <input type=\"text\" id=\"address\" placeholder=\" \" \n class=\"input-field w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500\">\n <label for=\"address\" class=\"floating-label absolute left-4 top-2 text-gray-500 pointer-events-none\">Address<\/label>\n <\/div>\n <div class=\"relative\">\n <input type=\"text\" id=\"linkedin\" placeholder=\" \" \n class=\"input-field w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500\">\n <label for=\"linkedin\" class=\"floating-label absolute left-4 top-2 text-gray-500 pointer-events-none\">LinkedIn Profile<\/label>\n <\/div>\n <div class=\"relative\">\n <input type=\"text\" id=\"portfolio\" placeholder=\" \" \n class=\"input-field w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500\">\n <label for=\"portfolio\" class=\"floating-label absolute left-4 top-2 text-gray-500 pointer-events-none\">Portfolio\/Website<\/label>\n <\/div>\n <\/div>\n <\/div>\n \n \n <div class=\"section-group\">\n <div class=\"section-toggle flex justify-between items-center p-3 bg-gray-50 rounded-lg cursor-pointer\">\n <h3 class=\"font-medium text-gray-800\">\n <i class=\"fas fa-briefcase mr-2 text-blue-500\"><\/i> Work Experience\n <\/h3>\n <i class=\"fas fa-chevron-down text-gray-500 transition-transform duration-200\"><\/i>\n <\/div>\n <div class=\"section-content mt-3 space-y-4 hidden\">\n <div id=\"experienceFields\">\n \n <\/div>\n <button id=\"addExperience\" class=\"text-blue-600 hover:text-blue-800 flex items-center\">\n <i class=\"fas fa-plus-circle mr-1\"><\/i> Add Another Position\n <\/button>\n <\/div>\n <\/div>\n \n \n <div class=\"section-group\">\n <div class=\"section-toggle flex justify-between items-center p-3 bg-gray-50 rounded-lg cursor-pointer\">\n <h3 class=\"font-medium text-gray-800\">\n <i class=\"fas fa-graduation-cap mr-2 text-blue-500\"><\/i> Education\n <\/h3>\n <i class=\"fas fa-chevron-down text-gray-500 transition-transform duration-200\"><\/i>\n <\/div>\n <div class=\"section-content mt-3 space-y-4 hidden\">\n <div id=\"educationFields\">\n \n <\/div>\n <button id=\"addEducation\" class=\"text-blue-600 hover:text-blue-800 flex items-center\">\n <i class=\"fas fa-plus-circle mr-1\"><\/i> Add Another Education\n <\/button>\n <\/div>\n <\/div>\n \n \n <div class=\"section-group\">\n <div class=\"section-toggle flex justify-between items-center p-3 bg-gray-50 rounded-lg cursor-pointer\">\n <h3 class=\"font-medium text-gray-800\">\n <i class=\"fas fa-tools mr-2 text-blue-500\"><\/i> Skills\n <\/h3>\n <i class=\"fas fa-chevron-down text-gray-500 transition-transform duration-200\"><\/i>\n <\/div>\n <div class=\"section-content mt-3 space-y-4 hidden\">\n <div id=\"skillsContainer\">\n <div class=\"relative\">\n <input type=\"text\" id=\"skillsInput\" placeholder=\" \" \n class=\"input-field w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500\">\n <label for=\"skillsInput\" class=\"floating-label absolute left-4 top-2 text-gray-500 pointer-events-none\">Add skills (separate with commas)<\/label>\n <\/div>\n <div id=\"skillsTags\" class=\"flex flex-wrap gap-2 mt-2\">\n \n <\/div>\n <\/div>\n <\/div>\n <\/div>\n \n \n <div class=\"section-group\">\n <div class=\"section-toggle flex justify-between items-center p-3 bg-gray-50 rounded-lg cursor-pointer\">\n <h3 class=\"font-medium text-gray-800\">\n <i class=\"fas fa-project-diagram mr-2 text-blue-500\"><\/i> Projects\n <\/h3>\n <i class=\"fas fa-chevron-down text-gray-500 transition-transform duration-200\"><\/i>\n <\/div>\n <div class=\"section-content mt-3 space-y-4 hidden\">\n <div id=\"projectFields\">\n \n <\/div>\n <button id=\"addProject\" class=\"text-blue-600 hover:text-blue-800 flex items-center\">\n <i class=\"fas fa-plus-circle mr-1\"><\/i> Add Another Project\n <\/button>\n <\/div>\n <\/div>\n \n \n <div class=\"section-group\">\n <div class=\"section-toggle flex justify-between items-center p-3 bg-gray-50 rounded-lg cursor-pointer\">\n <h3 class=\"font-medium text-gray-800\">\n <i class=\"fas fa-certificate mr-2 text-blue-500\"><\/i> Certifications\n <\/h3>\n <i class=\"fas fa-chevron-down text-gray-500 transition-transform duration-200\"><\/i>\n <\/div>\n <div class=\"section-content mt-3 space-y-4 hidden\">\n <div id=\"certificationFields\">\n \n <\/div>\n <button id=\"addCertification\" class=\"text-blue-600 hover:text-blue-800 flex items-center\">\n <i class=\"fas fa-plus-circle mr-1\"><\/i> Add Another Certification\n <\/button>\n <\/div>\n <\/div>\n \n \n <div class=\"section-group\">\n <div class=\"section-toggle flex justify-between items-center p-3 bg-gray-50 rounded-lg cursor-pointer\">\n <h3 class=\"font-medium text-gray-800\">\n <i class=\"fas fa-language mr-2 text-blue-500\"><\/i> Languages\n <\/h3>\n <i class=\"fas fa-chevron-down text-gray-500 transition-transform duration-200\"><\/i>\n <\/div>\n <div class=\"section-content mt-3 space-y-4 hidden\">\n <div id=\"languageFields\">\n \n <\/div>\n <button id=\"addLanguage\" class=\"text-blue-600 hover:text-blue-800 flex items-center\">\n <i class=\"fas fa-plus-circle mr-1\"><\/i> Add Another Language\n <\/button>\n <\/div>\n <\/div>\n <\/div>\n \n \n <div class=\"mt-8 flex flex-col sm:flex-row justify-between gap-4\">\n <button id=\"resetForm\" class=\"px-6 py-2 border border-gray-300 rounded-lg text-gray-700 hover:bg-gray-100 transition\">\n <i class=\"fas fa-redo mr-2\"><\/i> Reset Form\n <\/button>\n <button id=\"generateResume\" class=\"px-6 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition flex items-center justify-center\">\n <i class=\"fas fa-file-pdf mr-2\"><\/i> Generate & Download PDF\n <\/button>\n <\/div>\n <\/div>\n \n \n <div class=\"lg:w-1\/2\">\n <div class=\"sticky top-4\">\n <div class=\"flex justify-between items-center mb-4\">\n <h2 class=\"text-2xl font-semibold text-gray-800\">Resume Preview<\/h2>\n <div class=\"flex items-center\">\n <span class=\"text-sm text-gray-500 mr-2\">ATS Score<\/span>\n <span class=\"bg-green-100 text-green-800 px-2 py-1 rounded-full text-xs font-medium\">85%<\/span>\n <\/div>\n <\/div>\n \n <div id=\"resumePreview\" class=\"resume-paper bg-white rounded-lg overflow-hidden template4\">\n \n <div class=\"resume-template4 h-full\">\n \n <div class=\"header px-6 py-4\">\n <h1 id=\"previewName\" class=\"text-3xl font-bold\">John Doe<\/h1>\n <p id=\"previewProfession\" class=\"text-lg opacity-90\">Software Engineer<\/p>\n <\/div>\n \n <div class=\"p-6\">\n \n <div class=\"grid grid-cols-1 md:grid-cols-2 gap-4 mb-6\">\n <div class=\"contact-item flex items-center\">\n <i class=\"fas fa-envelope mr-2\"><\/i>\n <span id=\"previewEmail\">john.doe@example.com<\/span>\n <\/div>\n <div class=\"contact-item flex items-center\">\n <i class=\"fas fa-phone mr-2\"><\/i>\n <span id=\"previewPhone\">(123) 456-7890<\/span>\n <\/div>\n <div class=\"contact-item flex items-center\">\n <i class=\"fas fa-map-marker-alt mr-2\"><\/i>\n <span id=\"previewAddress\">New York, USA<\/span>\n <\/div>\n <div class=\"contact-item flex items-center\">\n <i class=\"fab fa-linkedin mr-2\"><\/i>\n <span id=\"previewLinkedin\">linkedin.com\/in\/johndoe<\/span>\n <\/div>\n <\/div>\n \n \n <div class=\"mb-6\">\n <h2 class=\"section-title text-lg font-semibold mb-2\">PROFESSIONAL SUMMARY<\/h2>\n <p id=\"previewSummary\" class=\"text-gray-700\">\n Experienced software engineer with 5+ years of expertise in full-stack development. \n Passionate about creating efficient, scalable applications with clean code architecture. \n Strong problem-solving skills and team collaboration experience.\n <\/p>\n <\/div>\n \n \n <div class=\"mb-6\">\n <h2 class=\"section-title text-lg font-semibold mb-2\">WORK EXPERIENCE<\/h2>\n <div id=\"previewExperience\">\n <div class=\"mb-4\">\n <div class=\"flex justify-between\">\n <h3 class=\"font-medium\">Senior Software Engineer<\/h3>\n <span class=\"text-gray-600\">2020 – Present<\/span>\n <\/div>\n <p class=\"text-gray-600 mb-1\">Tech Solutions Inc.<\/p>\n <ul class=\"list-disc list-inside text-gray-700 pl-2\">\n <li>Led a team of 5 developers to build a scalable e-commerce platform<\/li>\n <li>Implemented CI\/CD pipeline reducing deployment time by 40%<\/li>\n <li>Optimized database queries improving application performance by 30%<\/li>\n <\/ul>\n <\/div>\n <div>\n <div class=\"flex justify-between\">\n <h3 class=\"font-medium\">Software Developer<\/h3>\n <span class=\"text-gray-600\">2018 – 2020<\/span>\n <\/div>\n <p class=\"text-gray-600 mb-1\">Digital Innovations LLC<\/p>\n <ul class=\"list-disc list-inside text-gray-700 pl-2\">\n <li>Developed RESTful APIs for mobile applications<\/li>\n <li>Collaborated with UX team to improve customer experience<\/li>\n <li>Reduced server costs by 25% through cloud optimization<\/li>\n <\/ul>\n <\/div>\n <\/div>\n <\/div>\n \n \n <div class=\"mb-6\">\n <h2 class=\"section-title text-lg font-semibold mb-2\">EDUCATION<\/h2>\n <div id=\"previewEducation\">\n <div class=\"flex justify-between mb-2\">\n <div>\n <h3 class=\"font-medium\">Master of Computer Science<\/h3>\n <p class=\"text-gray-600\">University of Technology<\/p>\n <\/div>\n <span class=\"text-gray-600\">2016 – 2018<\/span>\n <\/div>\n <div class=\"flex justify-between\">\n <div>\n <h3 class=\"font-medium\">Bachelor of Science in IT<\/h3>\n <p class=\"text-gray-600\">State University<\/p>\n <\/div>\n <span class=\"text-gray-600\">2012 – 2016<\/span>\n <\/div>\n <\/div>\n <\/div>\n \n \n <div class=\"mb-6\">\n <h2 class=\"section-title text-lg font-semibold mb-2\">SKILLS<\/h2>\n <div id=\"previewSkills\" class=\"flex flex-wrap gap-2\">\n <span class=\"bg-gray-100 px-3 py-1 rounded-full text-sm\">JavaScript<\/span>\n <span class=\"bg-gray-100 px-3 py-1 rounded-full text-sm\">React<\/span>\n <span class=\"bg-gray-100 px-3 py-1 rounded-full text-sm\">Node.js<\/span>\n <span class=\"bg-gray-100 px-3 py-1 rounded-full text-sm\">Python<\/span>\n <span class=\"bg-gray-100 px-3 py-1 rounded-full text-sm\">SQL<\/span>\n <span class=\"bg-gray-100 px-3 py-1 rounded-full text-sm\">AWS<\/span>\n <\/div>\n <\/div>\n \n \n <div class=\"mb-6\">\n <h2 class=\"section-title text-lg font-semibold mb-2\">PROJECTS<\/h2>\n <div id=\"previewProjects\">\n <div class=\"mb-3\">\n <h3 class=\"font-medium\">E-commerce Platform<\/h3>\n <p class=\"text-gray-700\">Built a full-featured e-commerce platform with React frontend and Node.js backend. Integrated payment gateways and inventory management.<\/p>\n <\/div>\n <div>\n <h3 class=\"font-medium\">Task Management App<\/h3>\n <p class=\"text-gray-700\">Developed a collaborative task management application with real-time updates using WebSockets.<\/p>\n <\/div>\n <\/div>\n <\/div>\n \n \n <div class=\"mb-6\">\n <h2 class=\"section-title text-lg font-semibold mb-2\">CERTIFICATIONS<\/h2>\n <div id=\"previewCertifications\">\n <div class=\"mb-2\">\n <h3 class=\"font-medium\">AWS Certified Solutions Architect<\/h3>\n <p class=\"text-gray-600\">Amazon Web Services – 2021<\/p>\n <\/div>\n <div>\n <h3 class=\"font-medium\">Google Cloud Professional Data Engineer<\/h3>\n <p class=\"text-gray-600\">Google Cloud – 2020<\/p>\n <\/div>\n <\/div>\n <\/div>\n \n \n <div>\n <h2 class=\"section-title text-lg font-semibold mb-2\">LANGUAGES<\/h2>\n <div id=\"previewLanguages\" class=\"flex flex-wrap gap-4\">\n <span>English (Fluent)<\/span>\n <span>Spanish (Intermediate)<\/span>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n \n \n <div class=\"mt-4 bg-white rounded-lg shadow-md p-4\">\n <h3 class=\"font-semibold text-gray-800 mb-2\">\n <i class=\"fas fa-lightbulb text-yellow-500 mr-2\"><\/i> ATS Optimization Tips\n <\/h3>\n <ul class=\"text-sm text-gray-600 space-y-1\">\n <li class=\"flex items-start\">\n <i class=\"fas fa-check-circle text-green-500 mt-1 mr-2\"><\/i>\n <span>Use standard section headings like “Work Experience” and “Education”<\/span>\n <\/li>\n <li class=\"flex items-start\">\n <i class=\"fas fa-check-circle text-green-500 mt-1 mr-2\"><\/i>\n <span>Include relevant keywords from the job description<\/span>\n <\/li>\n <li class=\"flex items-start\">\n <i class=\"fas fa-check-circle text-green-500 mt-1 mr-2\"><\/i>\n <span>Avoid graphics, tables, and unusual fonts<\/span>\n <\/li>\n <li class=\"flex items-start\">\n <i class=\"fas fa-check-circle text-green-500 mt-1 mr-2\"><\/i>\n <span>Keep your resume to 1-2 pages maximum<\/span>\n <\/li>\n <\/ul>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n \n \n <footer class=\"bg-gray-800 text-white py-6 mt-12\">\n <div class=\"container mx-auto px-4 text-center\">\n <p class=\"mb-2\">Powered by <span class=\"font-semibold\">Grazing Minds<\/span><\/p>\n <p class=\"text-gray-400 text-sm\">Copyright \u00a9 2025 Grazing Resume Center. All rights reserved.<\/p>\n <\/div>\n <\/footer>\n \n <script>\n \/\/ Wait for DOM to load\n document.addEventListener('DOMContentLoaded', function() {\n \/\/ Initialize variables\n let selectedTemplate = 'template4';\n const { jsPDF } = window.jspdf;\n \n \/\/ Template selection\n document.querySelectorAll('.template-option').forEach(option => {\n option.addEventListener('click', function() {\n \/\/ Remove selected class from all options\n document.querySelectorAll('.template-option').forEach(opt => {\n opt.classList.remove('selected');\n });\n \n \/\/ Add selected class to clicked option\n this.classList.add('selected');\n \n \/\/ Get template name\n selectedTemplate = this.getAttribute('data-template');\n \n \/\/ Update preview with selected template\n document.getElementById('resumePreview').className = `resume-paper bg-white rounded-lg overflow-hidden ${selectedTemplate}`;\n });\n });\n \n \/\/ Section toggles\n document.querySelectorAll('.section-toggle').forEach(toggle => {\n toggle.addEventListener('click', function() {\n const content = this.nextElementSibling;\n const icon = this.querySelector('.fa-chevron-down');\n \n if (content.classList.contains('hidden')) {\n content.classList.remove('hidden');\n icon.classList.add('rotate-180');\n } else {\n content.classList.add('hidden');\n icon.classList.remove('rotate-180');\n }\n });\n });\n \n \/\/ LinkedIn modal\n const fetchLinkedInBtn = document.getElementById('fetchLinkedIn');\n const linkedinModal = document.getElementById('linkedinModal');\n const closeModalBtn = document.getElementById('closeModal');\n const fetchProfileBtn = document.getElementById('fetchProfile');\n \n fetchLinkedInBtn.addEventListener('click', function() {\n linkedinModal.classList.remove('hidden');\n });\n \n closeModalBtn.addEventListener('click', function() {\n linkedinModal.classList.add('hidden');\n });\n \n fetchProfileBtn.addEventListener('click', function() {\n const linkedinUrl = document.getElementById('linkedinUrl').value;\n \n if (linkedinUrl) {\n \/\/ Simulate fetching data (in a real app, this would be an API call)\n setTimeout(() => {\n \/\/ Fill in sample data\n document.getElementById('firstName').value = 'John';\n document.getElementById('lastName').value = 'Doe';\n document.getElementById('profession').value = 'Software Engineer';\n document.getElementById('summary').value = 'Experienced software engineer with 5+ years of expertise in full-stack development. Passionate about creating efficient, scalable applications with clean code architecture. Strong problem-solving skills and team collaboration experience.';\n document.getElementById('email').value = 'john.doe@example.com';\n document.getElementById('phone').value = '(123) 456-7890';\n document.getElementById('address').value = 'New York, USA';\n document.getElementById('linkedin').value = linkedinUrl;\n \n \/\/ Update preview\n updatePreview();\n \n \/\/ Close modal\n linkedinModal.classList.add('hidden');\n \n \/\/ Show success message\n alert('Profile information fetched successfully!');\n }, 1500);\n } else {\n alert('Please enter a valid LinkedIn URL');\n }\n });\n \n \/\/ Form field event listeners\n const inputFields = [\n 'firstName', 'lastName', 'profession', 'summary', \n 'email', 'phone', 'address', 'linkedin', 'portfolio'\n ];\n \n inputFields.forEach(fieldId => {\n document.getElementById(fieldId).addEventListener('input', updatePreview);\n });\n \n \/\/ Update preview function\n function updatePreview() {\n \/\/ Personal Info\n const firstName = document.getElementById('firstName').value || 'John';\n const lastName = document.getElementById('lastName').value || 'Doe';\n document.getElementById('previewName').textContent = `${firstName} ${lastName}`;\n document.getElementById('previewProfession').textContent = document.getElementById('profession').value || 'Software Engineer';\n document.getElementById('previewSummary').textContent = document.getElementById('summary').value || 'Experienced software engineer with 5+ years of expertise in full-stack development. Passionate about creating efficient, scalable applications with clean code architecture. Strong problem-solving skills and team collaboration experience.';\n \n \/\/ Contact Info\n document.getElementById('previewEmail').textContent = document.getElementById('email').value || 'john.doe@example.com';\n document.getElementById('previewPhone').textContent = document.getElementById('phone').value || '(123) 456-7890';\n document.getElementById('previewAddress').textContent = document.getElementById('address').value || 'New York, USA';\n document.getElementById('previewLinkedin').textContent = document.getElementById('linkedin').value || 'linkedin.com\/in\/johndoe';\n \n \/\/ Calculate progress\n calculateProgress();\n }\n \n \/\/ Calculate form completion progress\n function calculateProgress() {\n let filledFields = 0;\n const totalFields = 9; \/\/ Adjust based on your form fields\n \n \/\/ Check required fields\n if (document.getElementById('firstName').value) filledFields++;\n if (document.getElementById('lastName').value) filledFields++;\n if (document.getElementById('profession').value) filledFields++;\n if (document.getElementById('summary').value) filledFields++;\n if (document.getElementById('email').value) filledFields++;\n if (document.getElementById('phone').value) filledFields++;\n if (document.getElementById('address').value) filledFields++;\n if (document.getElementById('linkedin').value) filledFields++;\n if (document.getElementById('portfolio').value) filledFields++;\n \n \/\/ Add checks for other sections if needed\n \n const progress = Math.round((filledFields \/ totalFields) * 100);\n document.getElementById('progressBar').style.width = `${progress}%`;\n document.getElementById('progressPercent').textContent = `${progress}%`;\n }\n \n \/\/ Add Experience\n document.getElementById('addExperience').addEventListener('click', function() {\n const experienceFields = document.getElementById('experienceFields');\n const experienceCount = experienceFields.children.length + 1;\n \n const experienceHTML = `\n <div class=\"experience-group border-b border-gray-200 pb-4 mb-4\">\n <div class=\"grid grid-cols-1 md:grid-cols-2 gap-4 mb-2\">\n <div class=\"relative\">\n <input type=\"text\" placeholder=\" \" \n class=\"input-field experience-title w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500\">\n <label class=\"floating-label absolute left-4 top-2 text-gray-500 pointer-events-none\">Job Title<\/label>\n <\/div>\n <div class=\"relative\">\n <input type=\"text\" placeholder=\" \" \n class=\"input-field experience-company w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500\">\n <label class=\"floating-label absolute left-4 top-2 text-gray-500 pointer-events-none\">Company<\/label>\n <\/div>\n <\/div>\n <div class=\"grid grid-cols-1 md:grid-cols-2 gap-4 mb-3\">\n <div class=\"relative\">\n <input type=\"text\" placeholder=\" \" \n class=\"input-field experience-start w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500\">\n <label class=\"floating-label absolute left-4 top-2 text-gray-500 pointer-events-none\">Start Date<\/label>\n <\/div>\n <div class=\"relative\">\n <input type=\"text\" placeholder=\" \" \n class=\"input-field experience-end w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500\">\n <label class=\"floating-label absolute left-4 top-2 text-gray-500 pointer-events-none\">End Date (or Present)<\/label>\n <\/div>\n <\/div>\n <div class=\"relative mb-2\">\n <textarea placeholder=\" \" rows=\"3\"\n class=\"input-field experience-description w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500\"><\/textarea>\n <label class=\"floating-label absolute left-4 top-2 text-gray-500 pointer-events-none\">Job Description (one per line)<\/label>\n <\/div>\n <button class=\"remove-experience text-red-600 hover:text-red-800 text-sm flex items-center\">\n <i class=\"fas fa-trash-alt mr-1\"><\/i> Remove Position\n <\/button>\n <\/div>\n `;\n \n experienceFields.insertAdjacentHTML('beforeend', experienceHTML);\n \n \/\/ Add event listener to the new remove button\n const removeButtons = document.querySelectorAll('.remove-experience');\n removeButtons[removeButtons.length - 1].addEventListener('click', function() {\n this.closest('.experience-group').remove();\n updatePreview();\n });\n \n \/\/ Add input event listeners to new fields\n const newInputs = experienceFields.lastElementChild.querySelectorAll('.input-field');\n newInputs.forEach(input => {\n input.addEventListener('input', updatePreview);\n });\n });\n \n \/\/ Add initial experience field\n document.getElementById('addExperience').click();\n \n \/\/ Add Education\n document.getElementById('addEducation').addEventListener('click', function() {\n const educationFields = document.getElementById('educationFields');\n const educationCount = educationFields.children.length + 1;\n \n const educationHTML = `\n <div class=\"education-group border-b border-gray-200 pb-4 mb-4\">\n <div class=\"grid grid-cols-1 md:grid-cols-2 gap-4 mb-2\">\n <div class=\"relative\">\n <input type=\"text\" placeholder=\" \" \n class=\"input-field education-degree w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500\">\n <label class=\"floating-label absolute left-4 top-2 text-gray-500 pointer-events-none\">Degree<\/label>\n <\/div>\n <div class=\"relative\">\n <input type=\"text\" placeholder=\" \" \n class=\"input-field education-school w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500\">\n <label class=\"floating-label absolute left-4 top-2 text-gray-500 pointer-events-none\">School\/University<\/label>\n <\/div>\n <\/div>\n <div class=\"grid grid-cols-1 md:grid-cols-2 gap-4 mb-3\">\n <div class=\"relative\">\n <input type=\"text\" placeholder=\" \" \n class=\"input-field education-start w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500\">\n <label class=\"floating-label absolute left-4 top-2 text-gray-500 pointer-events-none\">Start Date<\/label>\n <\/div>\n <div class=\"relative\">\n <input type=\"text\" placeholder=\" \" \n class=\"input-field education-end w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500\">\n <label class=\"floating-label absolute left-4 top-2 text-gray-500 pointer-events-none\">End Date<\/label>\n <\/div>\n <\/div>\n <button class=\"remove-education text-red-600 hover:text-red-800 text-sm flex items-center\">\n <i class=\"fas fa-trash-alt mr-1\"><\/i> Remove Education\n <\/button>\n <\/div>\n `;\n \n educationFields.insertAdjacentHTML('beforeend', educationHTML);\n \n \/\/ Add event listener to the new remove button\n const removeButtons = document.querySelectorAll('.remove-education');\n removeButtons[removeButtons.length - 1].addEventListener('click', function() {\n this.closest('.education-group').remove();\n updatePreview();\n });\n \n \/\/ Add input event listeners to new fields\n const newInputs = educationFields.lastElementChild.querySelectorAll('.input-field');\n newInputs.forEach(input => {\n input.addEventListener('input', updatePreview);\n });\n });\n \n \/\/ Add initial education field\n document.getElementById('addEducation').click();\n \n \/\/ Skills handling\n document.getElementById('skillsInput').addEventListener('keydown', function(e) {\n if (e.key === 'Enter' || e.key === ',') {\n e.preventDefault();\n addSkillTag();\n }\n });\n \n function addSkillTag() {\n const skillsInput = document.getElementById('skillsInput');\n const skillsTags = document.getElementById('skillsTags');\n \n if (skillsInput.value.trim()) {\n \/\/ Split by commas and trim each skill\n const newSkills = skillsInput.value.split(',').map(skill => skill.trim()).filter(skill => skill);\n \n newSkills.forEach(skill => {\n const skillTag = document.createElement('span');\n skillTag.className = 'bg-gray-100 px-3 py-1 rounded-full text-sm flex items-center';\n skillTag.innerHTML = `\n ${skill}\n <button class=\"ml-1 text-gray-500 hover:text-gray-700 remove-skill\">\n <i class=\"fas fa-times text-xs\"><\/i>\n <\/button>\n `;\n \n skillsTags.appendChild(skillTag);\n \n \/\/ Add event listener to remove button\n skillTag.querySelector('.remove-skill').addEventListener('click', function() {\n skillTag.remove();\n updatePreview();\n });\n });\n \n skillsInput.value = '';\n updatePreview();\n }\n }\n \n \/\/ Add Project\n document.getElementById('addProject').addEventListener('click', function() {\n const projectFields = document.getElementById('projectFields');\n const projectCount = projectFields.children.length + 1;\n \n const projectHTML = `\n <div class=\"project-group border-b border-gray-200 pb-4 mb-4\">\n <div class=\"relative mb-2\">\n <input type=\"text\" placeholder=\" \" \n class=\"input-field project-title w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500\">\n <label class=\"floating-label absolute left-4 top-2 text-gray-500 pointer-events-none\">Project Title<\/label>\n <\/div>\n <div class=\"relative mb-3\">\n <textarea placeholder=\" \" rows=\"2\"\n class=\"input-field project-description w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500\"><\/textarea>\n <label class=\"floating-label absolute left-4 top-2 text-gray-500 pointer-events-none\">Project Description<\/label>\n <\/div>\n <button class=\"remove-project text-red-600 hover:text-red-800 text-sm flex items-center\">\n <i class=\"fas fa-trash-alt mr-1\"><\/i> Remove Project\n <\/button>\n <\/div>\n `;\n \n projectFields.insertAdjacentHTML('beforeend', projectHTML);\n \n \/\/ Add event listener to the new remove button\n const removeButtons = document.querySelectorAll('.remove-project');\n removeButtons[removeButtons.length - 1].addEventListener('click', function() {\n this.closest('.project-group').remove();\n updatePreview();\n });\n \n \/\/ Add input event listeners to new fields\n const newInputs = projectFields.lastElementChild.querySelectorAll('.input-field');\n newInputs.forEach(input => {\n input.addEventListener('input', updatePreview);\n });\n });\n \n \/\/ Add initial project field\n document.getElementById('addProject').click();\n \n \/\/ Add Certification\n document.getElementById('addCertification').addEventListener('click', function() {\n const certificationFields = document.getElementById('certificationFields');\n const certificationCount = certificationFields.children.length + 1;\n \n const certificationHTML = `\n <div class=\"certification-group border-b border-gray-200 pb-4 mb-4\">\n <div class=\"grid grid-cols-1 md:grid-cols-2 gap-4 mb-2\">\n <div class=\"relative\">\n <input type=\"text\" placeholder=\" \" \n class=\"input-field certification-name w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500\">\n <label class=\"floating-label absolute left-4 top-2 text-gray-500 pointer-events-none\">Certification Name<\/label>\n <\/div>\n <div class=\"relative\">\n <input type=\"text\" placeholder=\" \" \n class=\"input-field certification-issuer w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500\">\n <label class=\"floating-label absolute left-4 top-2 text-gray-500 pointer-events-none\">Issuing Organization<\/label>\n <\/div>\n <\/div>\n <div class=\"relative mb-3\">\n <input type=\"text\" placeholder=\" \" \n class=\"input-field certification-date w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500\">\n <label class=\"floating-label absolute left-4 top-2 text-gray-500 pointer-events-none\">Date Earned<\/label>\n <\/div>\n <button class=\"remove-certification text-red-600 hover:text-red-800 text-sm flex items-center\">\n <i class=\"fas fa-trash-alt mr-1\"><\/i> Remove Certification\n <\/button>\n <\/div>\n `;\n \n certificationFields.insertAdjacentHTML('beforeend', certificationHTML);\n \n \/\/ Add event listener to the new remove button\n const removeButtons = document.querySelectorAll('.remove-certification');\n removeButtons[removeButtons.length - 1].addEventListener('click', function() {\n this.closest('.certification-group').remove();\n updatePreview();\n });\n \n \/\/ Add input event listeners to new fields\n const newInputs = certificationFields.lastElementChild.querySelectorAll('.input-field');\n newInputs.forEach(input => {\n input.addEventListener('input', updatePreview);\n });\n });\n \n \/\/ Add initial certification field\n document.getElementById('addCertification').click();\n \n \/\/ Add Language\n document.getElementById('addLanguage').addEventListener('click', function() {\n const languageFields = document.getElementById('languageFields');\n const languageCount = languageFields.children.length + 1;\n \n const languageHTML = `\n <div class=\"language-group border-b border-gray-200 pb-4 mb-4\">\n <div class=\"grid grid-cols-1 md:grid-cols-2 gap-4 mb-2\">\n <div class=\"relative\">\n <input type=\"text\" placeholder=\" \" \n class=\"input-field language-name w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500\">\n <label class=\"floating-label absolute left-4 top-2 text-gray-500 pointer-events-none\">Language<\/label>\n <\/div>\n <div class=\"relative\">\n <select class=\"input-field language-level w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500\">\n <option value=\"\">Select proficiency<\/option>\n <option value=\"Native\">Native<\/option>\n <option value=\"Fluent\">Fluent<\/option>\n <option value=\"Advanced\">Advanced<\/option>\n <option value=\"Intermediate\">Intermediate<\/option>\n <option value=\"Basic\">Basic<\/option>\n <\/select>\n <\/div>\n <\/div>\n <button class=\"remove-language text-red-600 hover:text-red-800 text-sm flex items-center\">\n <i class=\"fas fa-trash-alt mr-1\"><\/i> Remove Language\n <\/button>\n <\/div>\n `;\n \n languageFields.insertAdjacentHTML('beforeend', languageHTML);\n \n \/\/ Add event listener to the new remove button\n const removeButtons = document.querySelectorAll('.remove-language');\n removeButtons[removeButtons.length - 1].addEventListener('click', function() {\n this.closest('.language-group').remove();\n updatePreview();\n });\n \n \/\/ Add input event listeners to new fields\n const newInputs = languageFields.lastElementChild.querySelectorAll('.input-field');\n newInputs.forEach(input => {\n input.addEventListener('input', updatePreview);\n });\n });\n \n \/\/ Add initial language field\n document.getElementById('addLanguage').click();\n \n \/\/ Reset Form\n document.getElementById('resetForm').addEventListener('click', function() {\n if (confirm('Are you sure you want to reset the form? All your data will be lost.')) {\n \/\/ Clear all input fields\n document.querySelectorAll('input, textarea').forEach(field => {\n field.value = '';\n });\n \n \/\/ Clear skills tags\n document.getElementById('skillsTags').innerHTML = '';\n \n \/\/ Reset to one experience, education, project, certification, and language\n document.querySelectorAll('.experience-group:not(:first-child)').forEach(group => group.remove());\n document.querySelectorAll('.education-group:not(:first-child)').forEach(group => group.remove());\n document.querySelectorAll('.project-group:not(:first-child)').forEach(group => group.remove());\n document.querySelectorAll('.certification-group:not(:first-child)').forEach(group => group.remove());\n document.querySelectorAll('.language-group:not(:first-child)').forEach(group => group.remove());\n \n \/\/ Reset template selection\n document.querySelectorAll('.template-option').forEach(opt => {\n opt.classList.remove('selected');\n });\n document.querySelector('.template-option[data-template=\"template4\"]').classList.add('selected');\n selectedTemplate = 'template4';\n document.getElementById('resumePreview').className = `resume-paper bg-white rounded-lg overflow-hidden ${selectedTemplate}`;\n \n \/\/ Update preview\n updatePreview();\n }\n });\n \n \/\/ Generate PDF\n document.getElementById('generateResume').addEventListener('click', function() {\n \/\/ First, update the preview to ensure it's current\n updatePreview();\n \n \/\/ Show loading state\n const btn = this;\n const originalText = btn.innerHTML;\n btn.innerHTML = '<i class=\"fas fa-spinner fa-spin mr-2\"><\/i> Generating PDF...';\n btn.disabled = true;\n \n \/\/ Use html2canvas to capture the resume preview\n const element = document.getElementById('resumePreview');\n \n \/\/ Temporarily hide the ATS tips for a cleaner PDF\n const atsTips = document.querySelector('.mt-4.bg-white');\n const atsTipsDisplay = atsTips.style.display;\n atsTips.style.display = 'none';\n \n \/\/ Set a slight delay to ensure the ATS tips are hidden\n setTimeout(() => {\n html2canvas(element, {\n scale: 2, \/\/ Higher scale for better quality\n logging: false,\n useCORS: true,\n allowTaint: true\n }).then(canvas => {\n \/\/ Restore the ATS tips display\n atsTips.style.display = atsTipsDisplay;\n \n \/\/ Create PDF\n const imgData = canvas.toDataURL('image\/png');\n const pdf = new jsPDF({\n orientation: 'portrait',\n unit: 'mm'\n });\n \n \/\/ Calculate the PDF dimensions to maintain aspect ratio\n const imgWidth = 210; \/\/ A4 width in mm\n const imgHeight = canvas.height * imgWidth \/ canvas.width;\n \n \/\/ Add the image to the PDF\n pdf.addImage(imgData, 'PNG', 0, 0, imgWidth, imgHeight);\n \n \/\/ Download the PDF\n pdf.save(`${document.getElementById('firstName').value || 'John'}_${document.getElementById('lastName').value || 'Doe'}_Resume.pdf`);\n \n \/\/ Restore button state\n btn.innerHTML = originalText;\n btn.disabled = false;\n }).catch(error => {\n console.error('Error generating PDF:', error);\n alert('There was an error generating the PDF. Please try again.');\n \n \/\/ Restore button state\n btn.innerHTML = originalText;\n btn.disabled = false;\n \n \/\/ Restore the ATS tips display in case of error\n atsTips.style.display = atsTipsDisplay;\n });\n }, 100);\n });\n \n \/\/ Initialize with sample data\n updatePreview();\n });\n <\/script>\n<\/body>\n<\/html>\n","protected":false},"excerpt":{"rendered":"<p>Grazing Resume Center – Create ATS Compliant Resumes Grazing Resume Center Create professional, ATS-compliant resumes in minutes Resume Builder LinkedIn Fetch Progress 0% Choose a Template Professional Modern Creative Elegant Fetch from LinkedIn Enter your LinkedIn profile URL to automatically import your information: Fetch Profile Personal Information First Name Last Name Profession Professional Summary Contact […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"qubely_global_settings":"","qubely_interactions":"","footnotes":""},"class_list":["post-9388","page","type-page","status-publish","hentry"],"post_excerpt_skillate_core":"","skillate_core_image_urls":{"full":"","portrait":"","portraitab":"","thumbnail":""},"_links":{"self":[{"href":"https:\/\/grazingminds.co.in\/academy\/wp-json\/wp\/v2\/pages\/9388","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/grazingminds.co.in\/academy\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/grazingminds.co.in\/academy\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/grazingminds.co.in\/academy\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/grazingminds.co.in\/academy\/wp-json\/wp\/v2\/comments?post=9388"}],"version-history":[{"count":2,"href":"https:\/\/grazingminds.co.in\/academy\/wp-json\/wp\/v2\/pages\/9388\/revisions"}],"predecessor-version":[{"id":9390,"href":"https:\/\/grazingminds.co.in\/academy\/wp-json\/wp\/v2\/pages\/9388\/revisions\/9390"}],"wp:attachment":[{"href":"https:\/\/grazingminds.co.in\/academy\/wp-json\/wp\/v2\/media?parent=9388"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

{"id":9388,"date":"2025-04-06T17:47:08","date_gmt":"2025-04-06T12:17:08","guid":{"rendered":"https:\/\/grazingminds.co.in\/academy\/?page_id=9388"},"modified":"2025-04-06T17:47:12","modified_gmt":"2025-04-06T12:17:12","slug":"ats-resume-builder-free-gmrc","status":"publish","type":"page","link":"https:\/\/grazingminds.co.in\/academy\/ats-resume-builder-free-gmrc\/","title":{"rendered":"Grazing Resume Builder"},"content":{"rendered":"\n\n\n\n \n \n Grazing Resume Center – Create ATS Compliant Resumes<\/title>\n <script src=\"https:\/\/cdn.tailwindcss.com\"><\/script>\n <link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.4.0\/css\/all.min.css\">\n <script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/jspdf\/2.5.1\/jspdf.umd.min.js\"><\/script>\n <script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/html2canvas\/1.4.1\/html2canvas.min.js\"><\/script>\n <style>\n @import url('https:\/\/fonts.googleapis.com\/css2?family=Poppins:wght@300;400;500;600;700&display=swap');\n \n body {\n font-family: 'Poppins', sans-serif;\n background-color: #f8fafc;\n }\n \n .resume-paper {\n box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.1);\n transition: all 0.3s ease;\n }\n \n .resume-paper:hover {\n transform: translateY(-5px);\n box-shadow: 0 15px 35px -10px rgba(0, 0, 0, 0.15);\n }\n \n .template-option {\n transition: all 0.2s ease;\n }\n \n .template-option:hover {\n transform: scale(1.05);\n }\n \n .template-option.selected {\n border: 3px solid #3b82f6;\n transform: scale(1.05);\n }\n \n .progress-bar {\n height: 6px;\n transition: width 0.3s ease;\n }\n \n .section-toggle {\n transition: all 0.2s ease;\n }\n \n .section-toggle:hover {\n background-color: #f1f5f9;\n }\n \n .floating-label {\n transition: all 0.2s ease;\n transform-origin: left center;\n }\n \n .input-field:focus + .floating-label,\n .input-field:not(:placeholder-shown) + .floating-label {\n transform: translateY(-22px) scale(0.85);\n color: #3b82f6;\n }\n \n \/* Template specific styles *\/\n .template1 {\n --primary-color: #3b82f6;\n --secondary-color: #1e40af;\n --text-color: #1f2937;\n --light-bg: #f8fafc;\n }\n \n .template2 {\n --primary-color: #10b981;\n --secondary-color: #047857;\n --text-color: #1f2937;\n --light-bg: #f0fdf4;\n }\n \n .template3 {\n --primary-color: #8b5cf6;\n --secondary-color: #6d28d9;\n --text-color: #1f2937;\n --light-bg: #f5f3ff;\n }\n \n .template4 {\n --primary-color: #ec4899;\n --secondary-color: #be185d;\n --text-color: #1f2937;\n --light-bg: #fdf2f8;\n }\n \n \/* Resume template styles *\/\n .resume-template1 {\n background-color: white;\n color: var(--text-color);\n }\n \n .resume-template1 .header {\n background-color: var(--primary-color);\n color: white;\n }\n \n .resume-template1 .section-title {\n color: var(--secondary-color);\n border-bottom: 2px solid var(--primary-color);\n }\n \n .resume-template1 .contact-item i {\n color: var(--primary-color);\n }\n \n .resume-template2 {\n background-color: white;\n color: var(--text-color);\n border-left: 5px solid var(--primary-color);\n }\n \n .resume-template2 .header {\n background-color: var(--light-bg);\n border-bottom: 3px solid var(--primary-color);\n }\n \n .resume-template2 .section-title {\n color: var(--primary-color);\n }\n \n .resume-template2 .contact-item i {\n color: var(--secondary-color);\n }\n \n .resume-template3 {\n background-color: white;\n color: var(--text-color);\n }\n \n .resume-template3 .header {\n background-color: var(--secondary-color);\n color: white;\n }\n \n .resume-template3 .sidebar {\n background-color: var(--primary-color);\n color: white;\n }\n \n .resume-template3 .section-title {\n color: white;\n }\n \n .resume-template3 .main-content {\n background-color: white;\n }\n \n .resume-template4 {\n background-color: white;\n color: var(--text-color);\n }\n \n .resume-template4 .header {\n background-color: var(--primary-color);\n color: white;\n }\n \n .resume-template4 .section-title {\n background-color: var(--light-bg);\n color: var(--secondary-color);\n padding: 0.5rem 1rem;\n border-radius: 0.25rem;\n }\n <\/style>\n<\/head>\n<body class=\"min-h-screen bg-gray-50\">\n <div class=\"container mx-auto px-4 py-8\">\n \n <header class=\"text-center mb-8\">\n <h1 class=\"text-4xl font-bold text-blue-600 mb-2\">Grazing Resume Center<\/h1>\n <p class=\"text-lg text-gray-600\">Create professional, ATS-compliant resumes in minutes<\/p>\n <\/header>\n \n \n <div class=\"flex flex-col lg:flex-row gap-8\">\n \n <div class=\"lg:w-1\/2 bg-white rounded-xl shadow-md p-6\">\n <div class=\"flex justify-between items-center mb-6\">\n <h2 class=\"text-2xl font-semibold text-gray-800\">Resume Builder<\/h2>\n <div class=\"flex items-center\">\n <span class=\"text-sm text-gray-500 mr-2\">LinkedIn<\/span>\n <button id=\"fetchLinkedIn\" class=\"bg-blue-100 text-blue-600 px-3 py-1 rounded-full text-sm flex items-center\">\n <i class=\"fab fa-linkedin mr-1\"><\/i> Fetch\n <\/button>\n <\/div>\n <\/div>\n \n \n <div class=\"mb-6\">\n <div class=\"flex justify-between mb-1\">\n <span class=\"text-sm font-medium text-gray-700\">Progress<\/span>\n <span id=\"progressPercent\" class=\"text-sm font-medium text-gray-700\">0%<\/span>\n <\/div>\n <div class=\"w-full bg-gray-200 rounded-full h-2.5\">\n <div id=\"progressBar\" class=\"bg-blue-600 h-2.5 rounded-full\" style=\"width: 0%\"><\/div>\n <\/div>\n <\/div>\n \n \n <div class=\"mb-8\">\n <h3 class=\"text-lg font-medium text-gray-800 mb-3\">Choose a Template<\/h3>\n <div class=\"grid grid-cols-2 sm:grid-cols-4 gap-3\">\n <div class=\"template-option cursor-pointer\" data-template=\"template1\">\n <div class=\"h-32 bg-blue-500 rounded-lg\"><\/div>\n <p class=\"text-center mt-1 text-sm\">Professional<\/p>\n <\/div>\n <div class=\"template-option cursor-pointer\" data-template=\"template2\">\n <div class=\"h-32 bg-green-500 rounded-lg\"><\/div>\n <p class=\"text-center mt-1 text-sm\">Modern<\/p>\n <\/div>\n <div class=\"template-option cursor-pointer\" data-template=\"template3\">\n <div class=\"h-32 bg-purple-500 rounded-lg\"><\/div>\n <p class=\"text-center mt-1 text-sm\">Creative<\/p>\n <\/div>\n <div class=\"template-option cursor-pointer selected\" data-template=\"template4\">\n <div class=\"h-32 bg-pink-500 rounded-lg\"><\/div>\n <p class=\"text-center mt-1 text-sm\">Elegant<\/p>\n <\/div>\n <\/div>\n <\/div>\n \n \n <div id=\"linkedinModal\" class=\"fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden\">\n <div class=\"bg-white rounded-lg p-6 w-full max-w-md\">\n <div class=\"flex justify-between items-center mb-4\">\n <h3 class=\"text-xl font-semibold\">Fetch from LinkedIn<\/h3>\n <button id=\"closeModal\" class=\"text-gray-500 hover:text-gray-700\">\n <i class=\"fas fa-times\"><\/i>\n <\/button>\n <\/div>\n <div class=\"mb-4\">\n <p class=\"text-gray-600 mb-3\">Enter your LinkedIn profile URL to automatically import your information:<\/p>\n <div class=\"relative\">\n <input type=\"text\" id=\"linkedinUrl\" placeholder=\"https:\/\/www.linkedin.com\/in\/your-profile\" \n class=\"w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500\">\n <div class=\"absolute right-2 top-2\">\n <i class=\"fab fa-linkedin text-blue-500 text-xl\"><\/i>\n <\/div>\n <\/div>\n <\/div>\n <div class=\"flex justify-end\">\n <button id=\"fetchProfile\" class=\"bg-blue-600 text-white px-4 py-2 rounded-lg hover:bg-blue-700 transition\">\n Fetch Profile\n <\/button>\n <\/div>\n <\/div>\n <\/div>\n \n \n <div class=\"space-y-6\">\n \n <div class=\"section-group\">\n <div class=\"section-toggle flex justify-between items-center p-3 bg-gray-50 rounded-lg cursor-pointer\">\n <h3 class=\"font-medium text-gray-800\">\n <i class=\"fas fa-user mr-2 text-blue-500\"><\/i> Personal Information\n <\/h3>\n <i class=\"fas fa-chevron-down text-gray-500 transition-transform duration-200\"><\/i>\n <\/div>\n <div class=\"section-content mt-3 space-y-4\">\n <div class=\"grid grid-cols-1 md:grid-cols-2 gap-4\">\n <div class=\"relative\">\n <input type=\"text\" id=\"firstName\" placeholder=\" \" \n class=\"input-field w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500\">\n <label for=\"firstName\" class=\"floating-label absolute left-4 top-2 text-gray-500 pointer-events-none\">First Name<\/label>\n <\/div>\n <div class=\"relative\">\n <input type=\"text\" id=\"lastName\" placeholder=\" \" \n class=\"input-field w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500\">\n <label for=\"lastName\" class=\"floating-label absolute left-4 top-2 text-gray-500 pointer-events-none\">Last Name<\/label>\n <\/div>\n <\/div>\n <div class=\"relative\">\n <input type=\"text\" id=\"profession\" placeholder=\" \" \n class=\"input-field w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500\">\n <label for=\"profession\" class=\"floating-label absolute left-4 top-2 text-gray-500 pointer-events-none\">Profession<\/label>\n <\/div>\n <div class=\"relative\">\n <textarea id=\"summary\" placeholder=\" \" rows=\"3\"\n class=\"input-field w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500\"><\/textarea>\n <label for=\"summary\" class=\"floating-label absolute left-4 top-2 text-gray-500 pointer-events-none\">Professional Summary<\/label>\n <\/div>\n <\/div>\n <\/div>\n \n \n <div class=\"section-group\">\n <div class=\"section-toggle flex justify-between items-center p-3 bg-gray-50 rounded-lg cursor-pointer\">\n <h3 class=\"font-medium text-gray-800\">\n <i class=\"fas fa-address-book mr-2 text-blue-500\"><\/i> Contact Information\n <\/h3>\n <i class=\"fas fa-chevron-down text-gray-500 transition-transform duration-200\"><\/i>\n <\/div>\n <div class=\"section-content mt-3 space-y-4 hidden\">\n <div class=\"relative\">\n <input type=\"email\" id=\"email\" placeholder=\" \" \n class=\"input-field w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500\">\n <label for=\"email\" class=\"floating-label absolute left-4 top-2 text-gray-500 pointer-events-none\">Email Address<\/label>\n <\/div>\n <div class=\"relative\">\n <input type=\"tel\" id=\"phone\" placeholder=\" \" \n class=\"input-field w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500\">\n <label for=\"phone\" class=\"floating-label absolute left-4 top-2 text-gray-500 pointer-events-none\">Phone Number<\/label>\n <\/div>\n <div class=\"relative\">\n <input type=\"text\" id=\"address\" placeholder=\" \" \n class=\"input-field w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500\">\n <label for=\"address\" class=\"floating-label absolute left-4 top-2 text-gray-500 pointer-events-none\">Address<\/label>\n <\/div>\n <div class=\"relative\">\n <input type=\"text\" id=\"linkedin\" placeholder=\" \" \n class=\"input-field w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500\">\n <label for=\"linkedin\" class=\"floating-label absolute left-4 top-2 text-gray-500 pointer-events-none\">LinkedIn Profile<\/label>\n <\/div>\n <div class=\"relative\">\n <input type=\"text\" id=\"portfolio\" placeholder=\" \" \n class=\"input-field w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500\">\n <label for=\"portfolio\" class=\"floating-label absolute left-4 top-2 text-gray-500 pointer-events-none\">Portfolio\/Website<\/label>\n <\/div>\n <\/div>\n <\/div>\n \n \n <div class=\"section-group\">\n <div class=\"section-toggle flex justify-between items-center p-3 bg-gray-50 rounded-lg cursor-pointer\">\n <h3 class=\"font-medium text-gray-800\">\n <i class=\"fas fa-briefcase mr-2 text-blue-500\"><\/i> Work Experience\n <\/h3>\n <i class=\"fas fa-chevron-down text-gray-500 transition-transform duration-200\"><\/i>\n <\/div>\n <div class=\"section-content mt-3 space-y-4 hidden\">\n <div id=\"experienceFields\">\n \n <\/div>\n <button id=\"addExperience\" class=\"text-blue-600 hover:text-blue-800 flex items-center\">\n <i class=\"fas fa-plus-circle mr-1\"><\/i> Add Another Position\n <\/button>\n <\/div>\n <\/div>\n \n \n <div class=\"section-group\">\n <div class=\"section-toggle flex justify-between items-center p-3 bg-gray-50 rounded-lg cursor-pointer\">\n <h3 class=\"font-medium text-gray-800\">\n <i class=\"fas fa-graduation-cap mr-2 text-blue-500\"><\/i> Education\n <\/h3>\n <i class=\"fas fa-chevron-down text-gray-500 transition-transform duration-200\"><\/i>\n <\/div>\n <div class=\"section-content mt-3 space-y-4 hidden\">\n <div id=\"educationFields\">\n \n <\/div>\n <button id=\"addEducation\" class=\"text-blue-600 hover:text-blue-800 flex items-center\">\n <i class=\"fas fa-plus-circle mr-1\"><\/i> Add Another Education\n <\/button>\n <\/div>\n <\/div>\n \n \n <div class=\"section-group\">\n <div class=\"section-toggle flex justify-between items-center p-3 bg-gray-50 rounded-lg cursor-pointer\">\n <h3 class=\"font-medium text-gray-800\">\n <i class=\"fas fa-tools mr-2 text-blue-500\"><\/i> Skills\n <\/h3>\n <i class=\"fas fa-chevron-down text-gray-500 transition-transform duration-200\"><\/i>\n <\/div>\n <div class=\"section-content mt-3 space-y-4 hidden\">\n <div id=\"skillsContainer\">\n <div class=\"relative\">\n <input type=\"text\" id=\"skillsInput\" placeholder=\" \" \n class=\"input-field w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500\">\n <label for=\"skillsInput\" class=\"floating-label absolute left-4 top-2 text-gray-500 pointer-events-none\">Add skills (separate with commas)<\/label>\n <\/div>\n <div id=\"skillsTags\" class=\"flex flex-wrap gap-2 mt-2\">\n \n <\/div>\n <\/div>\n <\/div>\n <\/div>\n \n \n <div class=\"section-group\">\n <div class=\"section-toggle flex justify-between items-center p-3 bg-gray-50 rounded-lg cursor-pointer\">\n <h3 class=\"font-medium text-gray-800\">\n <i class=\"fas fa-project-diagram mr-2 text-blue-500\"><\/i> Projects\n <\/h3>\n <i class=\"fas fa-chevron-down text-gray-500 transition-transform duration-200\"><\/i>\n <\/div>\n <div class=\"section-content mt-3 space-y-4 hidden\">\n <div id=\"projectFields\">\n \n <\/div>\n <button id=\"addProject\" class=\"text-blue-600 hover:text-blue-800 flex items-center\">\n <i class=\"fas fa-plus-circle mr-1\"><\/i> Add Another Project\n <\/button>\n <\/div>\n <\/div>\n \n \n <div class=\"section-group\">\n <div class=\"section-toggle flex justify-between items-center p-3 bg-gray-50 rounded-lg cursor-pointer\">\n <h3 class=\"font-medium text-gray-800\">\n <i class=\"fas fa-certificate mr-2 text-blue-500\"><\/i> Certifications\n <\/h3>\n <i class=\"fas fa-chevron-down text-gray-500 transition-transform duration-200\"><\/i>\n <\/div>\n <div class=\"section-content mt-3 space-y-4 hidden\">\n <div id=\"certificationFields\">\n \n <\/div>\n <button id=\"addCertification\" class=\"text-blue-600 hover:text-blue-800 flex items-center\">\n <i class=\"fas fa-plus-circle mr-1\"><\/i> Add Another Certification\n <\/button>\n <\/div>\n <\/div>\n \n \n <div class=\"section-group\">\n <div class=\"section-toggle flex justify-between items-center p-3 bg-gray-50 rounded-lg cursor-pointer\">\n <h3 class=\"font-medium text-gray-800\">\n <i class=\"fas fa-language mr-2 text-blue-500\"><\/i> Languages\n <\/h3>\n <i class=\"fas fa-chevron-down text-gray-500 transition-transform duration-200\"><\/i>\n <\/div>\n <div class=\"section-content mt-3 space-y-4 hidden\">\n <div id=\"languageFields\">\n \n <\/div>\n <button id=\"addLanguage\" class=\"text-blue-600 hover:text-blue-800 flex items-center\">\n <i class=\"fas fa-plus-circle mr-1\"><\/i> Add Another Language\n <\/button>\n <\/div>\n <\/div>\n <\/div>\n \n \n <div class=\"mt-8 flex flex-col sm:flex-row justify-between gap-4\">\n <button id=\"resetForm\" class=\"px-6 py-2 border border-gray-300 rounded-lg text-gray-700 hover:bg-gray-100 transition\">\n <i class=\"fas fa-redo mr-2\"><\/i> Reset Form\n <\/button>\n <button id=\"generateResume\" class=\"px-6 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition flex items-center justify-center\">\n <i class=\"fas fa-file-pdf mr-2\"><\/i> Generate & Download PDF\n <\/button>\n <\/div>\n <\/div>\n \n \n <div class=\"lg:w-1\/2\">\n <div class=\"sticky top-4\">\n <div class=\"flex justify-between items-center mb-4\">\n <h2 class=\"text-2xl font-semibold text-gray-800\">Resume Preview<\/h2>\n <div class=\"flex items-center\">\n <span class=\"text-sm text-gray-500 mr-2\">ATS Score<\/span>\n <span class=\"bg-green-100 text-green-800 px-2 py-1 rounded-full text-xs font-medium\">85%<\/span>\n <\/div>\n <\/div>\n \n <div id=\"resumePreview\" class=\"resume-paper bg-white rounded-lg overflow-hidden template4\">\n \n <div class=\"resume-template4 h-full\">\n \n <div class=\"header px-6 py-4\">\n <h1 id=\"previewName\" class=\"text-3xl font-bold\">John Doe<\/h1>\n <p id=\"previewProfession\" class=\"text-lg opacity-90\">Software Engineer<\/p>\n <\/div>\n \n <div class=\"p-6\">\n \n <div class=\"grid grid-cols-1 md:grid-cols-2 gap-4 mb-6\">\n <div class=\"contact-item flex items-center\">\n <i class=\"fas fa-envelope mr-2\"><\/i>\n <span id=\"previewEmail\">john.doe@example.com<\/span>\n <\/div>\n <div class=\"contact-item flex items-center\">\n <i class=\"fas fa-phone mr-2\"><\/i>\n <span id=\"previewPhone\">(123) 456-7890<\/span>\n <\/div>\n <div class=\"contact-item flex items-center\">\n <i class=\"fas fa-map-marker-alt mr-2\"><\/i>\n <span id=\"previewAddress\">New York, USA<\/span>\n <\/div>\n <div class=\"contact-item flex items-center\">\n <i class=\"fab fa-linkedin mr-2\"><\/i>\n <span id=\"previewLinkedin\">linkedin.com\/in\/johndoe<\/span>\n <\/div>\n <\/div>\n \n \n <div class=\"mb-6\">\n <h2 class=\"section-title text-lg font-semibold mb-2\">PROFESSIONAL SUMMARY<\/h2>\n <p id=\"previewSummary\" class=\"text-gray-700\">\n Experienced software engineer with 5+ years of expertise in full-stack development. \n Passionate about creating efficient, scalable applications with clean code architecture. \n Strong problem-solving skills and team collaboration experience.\n <\/p>\n <\/div>\n \n \n <div class=\"mb-6\">\n <h2 class=\"section-title text-lg font-semibold mb-2\">WORK EXPERIENCE<\/h2>\n <div id=\"previewExperience\">\n <div class=\"mb-4\">\n <div class=\"flex justify-between\">\n <h3 class=\"font-medium\">Senior Software Engineer<\/h3>\n <span class=\"text-gray-600\">2020 – Present<\/span>\n <\/div>\n <p class=\"text-gray-600 mb-1\">Tech Solutions Inc.<\/p>\n <ul class=\"list-disc list-inside text-gray-700 pl-2\">\n <li>Led a team of 5 developers to build a scalable e-commerce platform<\/li>\n <li>Implemented CI\/CD pipeline reducing deployment time by 40%<\/li>\n <li>Optimized database queries improving application performance by 30%<\/li>\n <\/ul>\n <\/div>\n <div>\n <div class=\"flex justify-between\">\n <h3 class=\"font-medium\">Software Developer<\/h3>\n <span class=\"text-gray-600\">2018 – 2020<\/span>\n <\/div>\n <p class=\"text-gray-600 mb-1\">Digital Innovations LLC<\/p>\n <ul class=\"list-disc list-inside text-gray-700 pl-2\">\n <li>Developed RESTful APIs for mobile applications<\/li>\n <li>Collaborated with UX team to improve customer experience<\/li>\n <li>Reduced server costs by 25% through cloud optimization<\/li>\n <\/ul>\n <\/div>\n <\/div>\n <\/div>\n \n \n <div class=\"mb-6\">\n <h2 class=\"section-title text-lg font-semibold mb-2\">EDUCATION<\/h2>\n <div id=\"previewEducation\">\n <div class=\"flex justify-between mb-2\">\n <div>\n <h3 class=\"font-medium\">Master of Computer Science<\/h3>\n <p class=\"text-gray-600\">University of Technology<\/p>\n <\/div>\n <span class=\"text-gray-600\">2016 – 2018<\/span>\n <\/div>\n <div class=\"flex justify-between\">\n <div>\n <h3 class=\"font-medium\">Bachelor of Science in IT<\/h3>\n <p class=\"text-gray-600\">State University<\/p>\n <\/div>\n <span class=\"text-gray-600\">2012 – 2016<\/span>\n <\/div>\n <\/div>\n <\/div>\n \n \n <div class=\"mb-6\">\n <h2 class=\"section-title text-lg font-semibold mb-2\">SKILLS<\/h2>\n <div id=\"previewSkills\" class=\"flex flex-wrap gap-2\">\n <span class=\"bg-gray-100 px-3 py-1 rounded-full text-sm\">JavaScript<\/span>\n <span class=\"bg-gray-100 px-3 py-1 rounded-full text-sm\">React<\/span>\n <span class=\"bg-gray-100 px-3 py-1 rounded-full text-sm\">Node.js<\/span>\n <span class=\"bg-gray-100 px-3 py-1 rounded-full text-sm\">Python<\/span>\n <span class=\"bg-gray-100 px-3 py-1 rounded-full text-sm\">SQL<\/span>\n <span class=\"bg-gray-100 px-3 py-1 rounded-full text-sm\">AWS<\/span>\n <\/div>\n <\/div>\n \n \n <div class=\"mb-6\">\n <h2 class=\"section-title text-lg font-semibold mb-2\">PROJECTS<\/h2>\n <div id=\"previewProjects\">\n <div class=\"mb-3\">\n <h3 class=\"font-medium\">E-commerce Platform<\/h3>\n <p class=\"text-gray-700\">Built a full-featured e-commerce platform with React frontend and Node.js backend. Integrated payment gateways and inventory management.<\/p>\n <\/div>\n <div>\n <h3 class=\"font-medium\">Task Management App<\/h3>\n <p class=\"text-gray-700\">Developed a collaborative task management application with real-time updates using WebSockets.<\/p>\n <\/div>\n <\/div>\n <\/div>\n \n \n <div class=\"mb-6\">\n <h2 class=\"section-title text-lg font-semibold mb-2\">CERTIFICATIONS<\/h2>\n <div id=\"previewCertifications\">\n <div class=\"mb-2\">\n <h3 class=\"font-medium\">AWS Certified Solutions Architect<\/h3>\n <p class=\"text-gray-600\">Amazon Web Services – 2021<\/p>\n <\/div>\n <div>\n <h3 class=\"font-medium\">Google Cloud Professional Data Engineer<\/h3>\n <p class=\"text-gray-600\">Google Cloud – 2020<\/p>\n <\/div>\n <\/div>\n <\/div>\n \n \n <div>\n <h2 class=\"section-title text-lg font-semibold mb-2\">LANGUAGES<\/h2>\n <div id=\"previewLanguages\" class=\"flex flex-wrap gap-4\">\n <span>English (Fluent)<\/span>\n <span>Spanish (Intermediate)<\/span>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n \n \n <div class=\"mt-4 bg-white rounded-lg shadow-md p-4\">\n <h3 class=\"font-semibold text-gray-800 mb-2\">\n <i class=\"fas fa-lightbulb text-yellow-500 mr-2\"><\/i> ATS Optimization Tips\n <\/h3>\n <ul class=\"text-sm text-gray-600 space-y-1\">\n <li class=\"flex items-start\">\n <i class=\"fas fa-check-circle text-green-500 mt-1 mr-2\"><\/i>\n <span>Use standard section headings like “Work Experience” and “Education”<\/span>\n <\/li>\n <li class=\"flex items-start\">\n <i class=\"fas fa-check-circle text-green-500 mt-1 mr-2\"><\/i>\n <span>Include relevant keywords from the job description<\/span>\n <\/li>\n <li class=\"flex items-start\">\n <i class=\"fas fa-check-circle text-green-500 mt-1 mr-2\"><\/i>\n <span>Avoid graphics, tables, and unusual fonts<\/span>\n <\/li>\n <li class=\"flex items-start\">\n <i class=\"fas fa-check-circle text-green-500 mt-1 mr-2\"><\/i>\n <span>Keep your resume to 1-2 pages maximum<\/span>\n <\/li>\n <\/ul>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n \n \n <footer class=\"bg-gray-800 text-white py-6 mt-12\">\n <div class=\"container mx-auto px-4 text-center\">\n <p class=\"mb-2\">Powered by <span class=\"font-semibold\">Grazing Minds<\/span><\/p>\n <p class=\"text-gray-400 text-sm\">Copyright \u00a9 2025 Grazing Resume Center. All rights reserved.<\/p>\n <\/div>\n <\/footer>\n \n <script>\n \/\/ Wait for DOM to load\n document.addEventListener('DOMContentLoaded', function() {\n \/\/ Initialize variables\n let selectedTemplate = 'template4';\n const { jsPDF } = window.jspdf;\n \n \/\/ Template selection\n document.querySelectorAll('.template-option').forEach(option => {\n option.addEventListener('click', function() {\n \/\/ Remove selected class from all options\n document.querySelectorAll('.template-option').forEach(opt => {\n opt.classList.remove('selected');\n });\n \n \/\/ Add selected class to clicked option\n this.classList.add('selected');\n \n \/\/ Get template name\n selectedTemplate = this.getAttribute('data-template');\n \n \/\/ Update preview with selected template\n document.getElementById('resumePreview').className = `resume-paper bg-white rounded-lg overflow-hidden ${selectedTemplate}`;\n });\n });\n \n \/\/ Section toggles\n document.querySelectorAll('.section-toggle').forEach(toggle => {\n toggle.addEventListener('click', function() {\n const content = this.nextElementSibling;\n const icon = this.querySelector('.fa-chevron-down');\n \n if (content.classList.contains('hidden')) {\n content.classList.remove('hidden');\n icon.classList.add('rotate-180');\n } else {\n content.classList.add('hidden');\n icon.classList.remove('rotate-180');\n }\n });\n });\n \n \/\/ LinkedIn modal\n const fetchLinkedInBtn = document.getElementById('fetchLinkedIn');\n const linkedinModal = document.getElementById('linkedinModal');\n const closeModalBtn = document.getElementById('closeModal');\n const fetchProfileBtn = document.getElementById('fetchProfile');\n \n fetchLinkedInBtn.addEventListener('click', function() {\n linkedinModal.classList.remove('hidden');\n });\n \n closeModalBtn.addEventListener('click', function() {\n linkedinModal.classList.add('hidden');\n });\n \n fetchProfileBtn.addEventListener('click', function() {\n const linkedinUrl = document.getElementById('linkedinUrl').value;\n \n if (linkedinUrl) {\n \/\/ Simulate fetching data (in a real app, this would be an API call)\n setTimeout(() => {\n \/\/ Fill in sample data\n document.getElementById('firstName').value = 'John';\n document.getElementById('lastName').value = 'Doe';\n document.getElementById('profession').value = 'Software Engineer';\n document.getElementById('summary').value = 'Experienced software engineer with 5+ years of expertise in full-stack development. Passionate about creating efficient, scalable applications with clean code architecture. Strong problem-solving skills and team collaboration experience.';\n document.getElementById('email').value = 'john.doe@example.com';\n document.getElementById('phone').value = '(123) 456-7890';\n document.getElementById('address').value = 'New York, USA';\n document.getElementById('linkedin').value = linkedinUrl;\n \n \/\/ Update preview\n updatePreview();\n \n \/\/ Close modal\n linkedinModal.classList.add('hidden');\n \n \/\/ Show success message\n alert('Profile information fetched successfully!');\n }, 1500);\n } else {\n alert('Please enter a valid LinkedIn URL');\n }\n });\n \n \/\/ Form field event listeners\n const inputFields = [\n 'firstName', 'lastName', 'profession', 'summary', \n 'email', 'phone', 'address', 'linkedin', 'portfolio'\n ];\n \n inputFields.forEach(fieldId => {\n document.getElementById(fieldId).addEventListener('input', updatePreview);\n });\n \n \/\/ Update preview function\n function updatePreview() {\n \/\/ Personal Info\n const firstName = document.getElementById('firstName').value || 'John';\n const lastName = document.getElementById('lastName').value || 'Doe';\n document.getElementById('previewName').textContent = `${firstName} ${lastName}`;\n document.getElementById('previewProfession').textContent = document.getElementById('profession').value || 'Software Engineer';\n document.getElementById('previewSummary').textContent = document.getElementById('summary').value || 'Experienced software engineer with 5+ years of expertise in full-stack development. Passionate about creating efficient, scalable applications with clean code architecture. Strong problem-solving skills and team collaboration experience.';\n \n \/\/ Contact Info\n document.getElementById('previewEmail').textContent = document.getElementById('email').value || 'john.doe@example.com';\n document.getElementById('previewPhone').textContent = document.getElementById('phone').value || '(123) 456-7890';\n document.getElementById('previewAddress').textContent = document.getElementById('address').value || 'New York, USA';\n document.getElementById('previewLinkedin').textContent = document.getElementById('linkedin').value || 'linkedin.com\/in\/johndoe';\n \n \/\/ Calculate progress\n calculateProgress();\n }\n \n \/\/ Calculate form completion progress\n function calculateProgress() {\n let filledFields = 0;\n const totalFields = 9; \/\/ Adjust based on your form fields\n \n \/\/ Check required fields\n if (document.getElementById('firstName').value) filledFields++;\n if (document.getElementById('lastName').value) filledFields++;\n if (document.getElementById('profession').value) filledFields++;\n if (document.getElementById('summary').value) filledFields++;\n if (document.getElementById('email').value) filledFields++;\n if (document.getElementById('phone').value) filledFields++;\n if (document.getElementById('address').value) filledFields++;\n if (document.getElementById('linkedin').value) filledFields++;\n if (document.getElementById('portfolio').value) filledFields++;\n \n \/\/ Add checks for other sections if needed\n \n const progress = Math.round((filledFields \/ totalFields) * 100);\n document.getElementById('progressBar').style.width = `${progress}%`;\n document.getElementById('progressPercent').textContent = `${progress}%`;\n }\n \n \/\/ Add Experience\n document.getElementById('addExperience').addEventListener('click', function() {\n const experienceFields = document.getElementById('experienceFields');\n const experienceCount = experienceFields.children.length + 1;\n \n const experienceHTML = `\n <div class=\"experience-group border-b border-gray-200 pb-4 mb-4\">\n <div class=\"grid grid-cols-1 md:grid-cols-2 gap-4 mb-2\">\n <div class=\"relative\">\n <input type=\"text\" placeholder=\" \" \n class=\"input-field experience-title w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500\">\n <label class=\"floating-label absolute left-4 top-2 text-gray-500 pointer-events-none\">Job Title<\/label>\n <\/div>\n <div class=\"relative\">\n <input type=\"text\" placeholder=\" \" \n class=\"input-field experience-company w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500\">\n <label class=\"floating-label absolute left-4 top-2 text-gray-500 pointer-events-none\">Company<\/label>\n <\/div>\n <\/div>\n <div class=\"grid grid-cols-1 md:grid-cols-2 gap-4 mb-3\">\n <div class=\"relative\">\n <input type=\"text\" placeholder=\" \" \n class=\"input-field experience-start w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500\">\n <label class=\"floating-label absolute left-4 top-2 text-gray-500 pointer-events-none\">Start Date<\/label>\n <\/div>\n <div class=\"relative\">\n <input type=\"text\" placeholder=\" \" \n class=\"input-field experience-end w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500\">\n <label class=\"floating-label absolute left-4 top-2 text-gray-500 pointer-events-none\">End Date (or Present)<\/label>\n <\/div>\n <\/div>\n <div class=\"relative mb-2\">\n <textarea placeholder=\" \" rows=\"3\"\n class=\"input-field experience-description w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500\"><\/textarea>\n <label class=\"floating-label absolute left-4 top-2 text-gray-500 pointer-events-none\">Job Description (one per line)<\/label>\n <\/div>\n <button class=\"remove-experience text-red-600 hover:text-red-800 text-sm flex items-center\">\n <i class=\"fas fa-trash-alt mr-1\"><\/i> Remove Position\n <\/button>\n <\/div>\n `;\n \n experienceFields.insertAdjacentHTML('beforeend', experienceHTML);\n \n \/\/ Add event listener to the new remove button\n const removeButtons = document.querySelectorAll('.remove-experience');\n removeButtons[removeButtons.length - 1].addEventListener('click', function() {\n this.closest('.experience-group').remove();\n updatePreview();\n });\n \n \/\/ Add input event listeners to new fields\n const newInputs = experienceFields.lastElementChild.querySelectorAll('.input-field');\n newInputs.forEach(input => {\n input.addEventListener('input', updatePreview);\n });\n });\n \n \/\/ Add initial experience field\n document.getElementById('addExperience').click();\n \n \/\/ Add Education\n document.getElementById('addEducation').addEventListener('click', function() {\n const educationFields = document.getElementById('educationFields');\n const educationCount = educationFields.children.length + 1;\n \n const educationHTML = `\n <div class=\"education-group border-b border-gray-200 pb-4 mb-4\">\n <div class=\"grid grid-cols-1 md:grid-cols-2 gap-4 mb-2\">\n <div class=\"relative\">\n <input type=\"text\" placeholder=\" \" \n class=\"input-field education-degree w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500\">\n <label class=\"floating-label absolute left-4 top-2 text-gray-500 pointer-events-none\">Degree<\/label>\n <\/div>\n <div class=\"relative\">\n <input type=\"text\" placeholder=\" \" \n class=\"input-field education-school w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500\">\n <label class=\"floating-label absolute left-4 top-2 text-gray-500 pointer-events-none\">School\/University<\/label>\n <\/div>\n <\/div>\n <div class=\"grid grid-cols-1 md:grid-cols-2 gap-4 mb-3\">\n <div class=\"relative\">\n <input type=\"text\" placeholder=\" \" \n class=\"input-field education-start w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500\">\n <label class=\"floating-label absolute left-4 top-2 text-gray-500 pointer-events-none\">Start Date<\/label>\n <\/div>\n <div class=\"relative\">\n <input type=\"text\" placeholder=\" \" \n class=\"input-field education-end w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500\">\n <label class=\"floating-label absolute left-4 top-2 text-gray-500 pointer-events-none\">End Date<\/label>\n <\/div>\n <\/div>\n <button class=\"remove-education text-red-600 hover:text-red-800 text-sm flex items-center\">\n <i class=\"fas fa-trash-alt mr-1\"><\/i> Remove Education\n <\/button>\n <\/div>\n `;\n \n educationFields.insertAdjacentHTML('beforeend', educationHTML);\n \n \/\/ Add event listener to the new remove button\n const removeButtons = document.querySelectorAll('.remove-education');\n removeButtons[removeButtons.length - 1].addEventListener('click', function() {\n this.closest('.education-group').remove();\n updatePreview();\n });\n \n \/\/ Add input event listeners to new fields\n const newInputs = educationFields.lastElementChild.querySelectorAll('.input-field');\n newInputs.forEach(input => {\n input.addEventListener('input', updatePreview);\n });\n });\n \n \/\/ Add initial education field\n document.getElementById('addEducation').click();\n \n \/\/ Skills handling\n document.getElementById('skillsInput').addEventListener('keydown', function(e) {\n if (e.key === 'Enter' || e.key === ',') {\n e.preventDefault();\n addSkillTag();\n }\n });\n \n function addSkillTag() {\n const skillsInput = document.getElementById('skillsInput');\n const skillsTags = document.getElementById('skillsTags');\n \n if (skillsInput.value.trim()) {\n \/\/ Split by commas and trim each skill\n const newSkills = skillsInput.value.split(',').map(skill => skill.trim()).filter(skill => skill);\n \n newSkills.forEach(skill => {\n const skillTag = document.createElement('span');\n skillTag.className = 'bg-gray-100 px-3 py-1 rounded-full text-sm flex items-center';\n skillTag.innerHTML = `\n ${skill}\n <button class=\"ml-1 text-gray-500 hover:text-gray-700 remove-skill\">\n <i class=\"fas fa-times text-xs\"><\/i>\n <\/button>\n `;\n \n skillsTags.appendChild(skillTag);\n \n \/\/ Add event listener to remove button\n skillTag.querySelector('.remove-skill').addEventListener('click', function() {\n skillTag.remove();\n updatePreview();\n });\n });\n \n skillsInput.value = '';\n updatePreview();\n }\n }\n \n \/\/ Add Project\n document.getElementById('addProject').addEventListener('click', function() {\n const projectFields = document.getElementById('projectFields');\n const projectCount = projectFields.children.length + 1;\n \n const projectHTML = `\n <div class=\"project-group border-b border-gray-200 pb-4 mb-4\">\n <div class=\"relative mb-2\">\n <input type=\"text\" placeholder=\" \" \n class=\"input-field project-title w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500\">\n <label class=\"floating-label absolute left-4 top-2 text-gray-500 pointer-events-none\">Project Title<\/label>\n <\/div>\n <div class=\"relative mb-3\">\n <textarea placeholder=\" \" rows=\"2\"\n class=\"input-field project-description w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500\"><\/textarea>\n <label class=\"floating-label absolute left-4 top-2 text-gray-500 pointer-events-none\">Project Description<\/label>\n <\/div>\n <button class=\"remove-project text-red-600 hover:text-red-800 text-sm flex items-center\">\n <i class=\"fas fa-trash-alt mr-1\"><\/i> Remove Project\n <\/button>\n <\/div>\n `;\n \n projectFields.insertAdjacentHTML('beforeend', projectHTML);\n \n \/\/ Add event listener to the new remove button\n const removeButtons = document.querySelectorAll('.remove-project');\n removeButtons[removeButtons.length - 1].addEventListener('click', function() {\n this.closest('.project-group').remove();\n updatePreview();\n });\n \n \/\/ Add input event listeners to new fields\n const newInputs = projectFields.lastElementChild.querySelectorAll('.input-field');\n newInputs.forEach(input => {\n input.addEventListener('input', updatePreview);\n });\n });\n \n \/\/ Add initial project field\n document.getElementById('addProject').click();\n \n \/\/ Add Certification\n document.getElementById('addCertification').addEventListener('click', function() {\n const certificationFields = document.getElementById('certificationFields');\n const certificationCount = certificationFields.children.length + 1;\n \n const certificationHTML = `\n <div class=\"certification-group border-b border-gray-200 pb-4 mb-4\">\n <div class=\"grid grid-cols-1 md:grid-cols-2 gap-4 mb-2\">\n <div class=\"relative\">\n <input type=\"text\" placeholder=\" \" \n class=\"input-field certification-name w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500\">\n <label class=\"floating-label absolute left-4 top-2 text-gray-500 pointer-events-none\">Certification Name<\/label>\n <\/div>\n <div class=\"relative\">\n <input type=\"text\" placeholder=\" \" \n class=\"input-field certification-issuer w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500\">\n <label class=\"floating-label absolute left-4 top-2 text-gray-500 pointer-events-none\">Issuing Organization<\/label>\n <\/div>\n <\/div>\n <div class=\"relative mb-3\">\n <input type=\"text\" placeholder=\" \" \n class=\"input-field certification-date w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500\">\n <label class=\"floating-label absolute left-4 top-2 text-gray-500 pointer-events-none\">Date Earned<\/label>\n <\/div>\n <button class=\"remove-certification text-red-600 hover:text-red-800 text-sm flex items-center\">\n <i class=\"fas fa-trash-alt mr-1\"><\/i> Remove Certification\n <\/button>\n <\/div>\n `;\n \n certificationFields.insertAdjacentHTML('beforeend', certificationHTML);\n \n \/\/ Add event listener to the new remove button\n const removeButtons = document.querySelectorAll('.remove-certification');\n removeButtons[removeButtons.length - 1].addEventListener('click', function() {\n this.closest('.certification-group').remove();\n updatePreview();\n });\n \n \/\/ Add input event listeners to new fields\n const newInputs = certificationFields.lastElementChild.querySelectorAll('.input-field');\n newInputs.forEach(input => {\n input.addEventListener('input', updatePreview);\n });\n });\n \n \/\/ Add initial certification field\n document.getElementById('addCertification').click();\n \n \/\/ Add Language\n document.getElementById('addLanguage').addEventListener('click', function() {\n const languageFields = document.getElementById('languageFields');\n const languageCount = languageFields.children.length + 1;\n \n const languageHTML = `\n <div class=\"language-group border-b border-gray-200 pb-4 mb-4\">\n <div class=\"grid grid-cols-1 md:grid-cols-2 gap-4 mb-2\">\n <div class=\"relative\">\n <input type=\"text\" placeholder=\" \" \n class=\"input-field language-name w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500\">\n <label class=\"floating-label absolute left-4 top-2 text-gray-500 pointer-events-none\">Language<\/label>\n <\/div>\n <div class=\"relative\">\n <select class=\"input-field language-level w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500\">\n <option value=\"\">Select proficiency<\/option>\n <option value=\"Native\">Native<\/option>\n <option value=\"Fluent\">Fluent<\/option>\n <option value=\"Advanced\">Advanced<\/option>\n <option value=\"Intermediate\">Intermediate<\/option>\n <option value=\"Basic\">Basic<\/option>\n <\/select>\n <\/div>\n <\/div>\n <button class=\"remove-language text-red-600 hover:text-red-800 text-sm flex items-center\">\n <i class=\"fas fa-trash-alt mr-1\"><\/i> Remove Language\n <\/button>\n <\/div>\n `;\n \n languageFields.insertAdjacentHTML('beforeend', languageHTML);\n \n \/\/ Add event listener to the new remove button\n const removeButtons = document.querySelectorAll('.remove-language');\n removeButtons[removeButtons.length - 1].addEventListener('click', function() {\n this.closest('.language-group').remove();\n updatePreview();\n });\n \n \/\/ Add input event listeners to new fields\n const newInputs = languageFields.lastElementChild.querySelectorAll('.input-field');\n newInputs.forEach(input => {\n input.addEventListener('input', updatePreview);\n });\n });\n \n \/\/ Add initial language field\n document.getElementById('addLanguage').click();\n \n \/\/ Reset Form\n document.getElementById('resetForm').addEventListener('click', function() {\n if (confirm('Are you sure you want to reset the form? All your data will be lost.')) {\n \/\/ Clear all input fields\n document.querySelectorAll('input, textarea').forEach(field => {\n field.value = '';\n });\n \n \/\/ Clear skills tags\n document.getElementById('skillsTags').innerHTML = '';\n \n \/\/ Reset to one experience, education, project, certification, and language\n document.querySelectorAll('.experience-group:not(:first-child)').forEach(group => group.remove());\n document.querySelectorAll('.education-group:not(:first-child)').forEach(group => group.remove());\n document.querySelectorAll('.project-group:not(:first-child)').forEach(group => group.remove());\n document.querySelectorAll('.certification-group:not(:first-child)').forEach(group => group.remove());\n document.querySelectorAll('.language-group:not(:first-child)').forEach(group => group.remove());\n \n \/\/ Reset template selection\n document.querySelectorAll('.template-option').forEach(opt => {\n opt.classList.remove('selected');\n });\n document.querySelector('.template-option[data-template=\"template4\"]').classList.add('selected');\n selectedTemplate = 'template4';\n document.getElementById('resumePreview').className = `resume-paper bg-white rounded-lg overflow-hidden ${selectedTemplate}`;\n \n \/\/ Update preview\n updatePreview();\n }\n });\n \n \/\/ Generate PDF\n document.getElementById('generateResume').addEventListener('click', function() {\n \/\/ First, update the preview to ensure it's current\n updatePreview();\n \n \/\/ Show loading state\n const btn = this;\n const originalText = btn.innerHTML;\n btn.innerHTML = '<i class=\"fas fa-spinner fa-spin mr-2\"><\/i> Generating PDF...';\n btn.disabled = true;\n \n \/\/ Use html2canvas to capture the resume preview\n const element = document.getElementById('resumePreview');\n \n \/\/ Temporarily hide the ATS tips for a cleaner PDF\n const atsTips = document.querySelector('.mt-4.bg-white');\n const atsTipsDisplay = atsTips.style.display;\n atsTips.style.display = 'none';\n \n \/\/ Set a slight delay to ensure the ATS tips are hidden\n setTimeout(() => {\n html2canvas(element, {\n scale: 2, \/\/ Higher scale for better quality\n logging: false,\n useCORS: true,\n allowTaint: true\n }).then(canvas => {\n \/\/ Restore the ATS tips display\n atsTips.style.display = atsTipsDisplay;\n \n \/\/ Create PDF\n const imgData = canvas.toDataURL('image\/png');\n const pdf = new jsPDF({\n orientation: 'portrait',\n unit: 'mm'\n });\n \n \/\/ Calculate the PDF dimensions to maintain aspect ratio\n const imgWidth = 210; \/\/ A4 width in mm\n const imgHeight = canvas.height * imgWidth \/ canvas.width;\n \n \/\/ Add the image to the PDF\n pdf.addImage(imgData, 'PNG', 0, 0, imgWidth, imgHeight);\n \n \/\/ Download the PDF\n pdf.save(`${document.getElementById('firstName').value || 'John'}_${document.getElementById('lastName').value || 'Doe'}_Resume.pdf`);\n \n \/\/ Restore button state\n btn.innerHTML = originalText;\n btn.disabled = false;\n }).catch(error => {\n console.error('Error generating PDF:', error);\n alert('There was an error generating the PDF. Please try again.');\n \n \/\/ Restore button state\n btn.innerHTML = originalText;\n btn.disabled = false;\n \n \/\/ Restore the ATS tips display in case of error\n atsTips.style.display = atsTipsDisplay;\n });\n }, 100);\n });\n \n \/\/ Initialize with sample data\n updatePreview();\n });\n <\/script>\n<\/body>\n<\/html>\n","protected":false},"excerpt":{"rendered":"<p>Grazing Resume Center – Create ATS Compliant Resumes Grazing Resume Center Create professional, ATS-compliant resumes in minutes Resume Builder LinkedIn Fetch Progress 0% Choose a Template Professional Modern Creative Elegant Fetch from LinkedIn Enter your LinkedIn profile URL to automatically import your information: Fetch Profile Personal Information First Name Last Name Profession Professional Summary Contact […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"qubely_global_settings":"","qubely_interactions":"","footnotes":""},"class_list":["post-9388","page","type-page","status-publish","hentry"],"post_excerpt_skillate_core":"","skillate_core_image_urls":{"full":"","portrait":"","portraitab":"","thumbnail":""},"_links":{"self":[{"href":"https:\/\/grazingminds.co.in\/academy\/wp-json\/wp\/v2\/pages\/9388","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/grazingminds.co.in\/academy\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/grazingminds.co.in\/academy\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/grazingminds.co.in\/academy\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/grazingminds.co.in\/academy\/wp-json\/wp\/v2\/comments?post=9388"}],"version-history":[{"count":2,"href":"https:\/\/grazingminds.co.in\/academy\/wp-json\/wp\/v2\/pages\/9388\/revisions"}],"predecessor-version":[{"id":9390,"href":"https:\/\/grazingminds.co.in\/academy\/wp-json\/wp\/v2\/pages\/9388\/revisions\/9390"}],"wp:attachment":[{"href":"https:\/\/grazingminds.co.in\/academy\/wp-json\/wp\/v2\/media?parent=9388"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}