| <!DOCTYPE html> |
| <html lang="en"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>Resume Tailor Pro</title> |
| <script src="https://cdn.tailwindcss.com"></script> |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.12.313/pdf.min.js"></script> |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/mammoth/1.4.0/mammoth.browser.min.js"></script> |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.1/jspdf.umd.min.js"></script> |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.1/html2canvas.min.js"></script> |
| <style> |
| .dropzone { |
| border: 2px dashed #3b82f6; |
| transition: all 0.3s ease; |
| } |
| .dropzone.active { |
| border-color: #10b981; |
| background-color: #f0f9ff; |
| } |
| .progress-bar { |
| transition: width 0.3s ease; |
| } |
| .resume-point { |
| transition: all 0.3s ease; |
| } |
| .resume-point.highlight { |
| background-color: #fef08a; |
| border-left: 4px solid #f59e0b; |
| } |
| .keyword-chip { |
| animation: pulse 1.5s infinite; |
| } |
| @keyframes pulse { |
| 0% { transform: scale(1); } |
| 50% { transform: scale(1.05); } |
| 100% { transform: scale(1); } |
| } |
| .fade-in { |
| animation: fadeIn 0.5s ease-in; |
| } |
| @keyframes fadeIn { |
| from { opacity: 0; transform: translateY(10px); } |
| to { opacity: 1; transform: translateY(0); } |
| } |
| </style> |
| </head> |
| <body class="bg-gray-50 min-h-screen"> |
| <div class="container mx-auto px-4 py-8 max-w-6xl"> |
| |
| <header class="text-center mb-12"> |
| <h1 class="text-4xl font-bold text-blue-600 mb-2">Resume Tailor Pro</h1> |
| <p class="text-lg text-gray-600">Transform your generic resume into a job-winning document in minutes</p> |
| <div class="w-24 h-1 bg-blue-500 mx-auto mt-4 rounded-full"></div> |
| </header> |
|
|
| |
| <div class="bg-white rounded-xl shadow-lg overflow-hidden"> |
| |
| <div class="flex justify-between px-8 py-4 bg-gray-100"> |
| <div class="step flex flex-col items-center relative w-1/4"> |
| <div class="w-10 h-10 rounded-full bg-blue-600 text-white flex items-center justify-center font-bold mb-2 z-10">1</div> |
| <span class="text-sm font-medium text-blue-600">Upload Resume</span> |
| <div class="absolute top-5 left-1/2 h-1 w-full bg-gray-300 -z-1"></div> |
| </div> |
| <div class="step flex flex-col items-center relative w-1/4"> |
| <div class="w-10 h-10 rounded-full bg-gray-300 text-white flex items-center justify-center font-bold mb-2 z-10">2</div> |
| <span class="text-sm font-medium text-gray-500">Job Description</span> |
| <div class="absolute top-5 left-1/2 h-1 w-full bg-gray-300 -z-1"></div> |
| </div> |
| <div class="step flex flex-col items-center relative w-1/4"> |
| <div class="w-10 h-10 rounded-full bg-gray-300 text-white flex items-center justify-center font-bold mb-2 z-10">3</div> |
| <span class="text-sm font-medium text-gray-500">Tailor Resume</span> |
| <div class="absolute top-5 left-1/2 h-1 w-full bg-gray-300 -z-1"></div> |
| </div> |
| <div class="step flex flex-col items-center relative w-1/4"> |
| <div class="w-10 h-10 rounded-full bg-gray-300 text-white flex items-center justify-center font-bold mb-2 z-10">4</div> |
| <span class="text-sm font-medium text-gray-500">Download</span> |
| </div> |
| </div> |
|
|
| |
| <div id="step1" class="p-8"> |
| <h2 class="text-2xl font-semibold text-gray-800 mb-6">Upload Your Resume</h2> |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-8"> |
| <div> |
| <div id="dropzone" class="dropzone rounded-lg p-8 text-center cursor-pointer h-64 flex flex-col items-center justify-center"> |
| <i class="fas fa-cloud-upload-alt text-4xl text-blue-500 mb-4"></i> |
| <p class="text-lg font-medium text-gray-700 mb-2">Drag & drop your resume here</p> |
| <p class="text-sm text-gray-500 mb-4">or</p> |
| <label for="fileInput" class="px-6 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 transition cursor-pointer"> |
| Browse Files |
| </label> |
| <input type="file" id="fileInput" class="hidden" accept=".pdf,.doc,.docx"> |
| <p class="text-xs text-gray-500 mt-4">Supports: PDF, DOC, DOCX</p> |
| </div> |
| <div id="fileInfo" class="mt-4 hidden"> |
| <div class="flex items-center justify-between mb-2"> |
| <span class="font-medium text-gray-700 truncate max-w-xs" id="fileName"></span> |
| <button id="removeFile" class="text-red-500 hover:text-red-700"> |
| <i class="fas fa-times"></i> |
| </button> |
| </div> |
| <div class="w-full bg-gray-200 rounded-full h-2.5"> |
| <div id="uploadProgress" class="progress-bar bg-blue-600 h-2.5 rounded-full" style="width: 0%"></div> |
| </div> |
| </div> |
| </div> |
| <div class="bg-blue-50 p-6 rounded-lg border border-blue-100"> |
| <h3 class="text-lg font-semibold text-blue-800 mb-3">Tips for Best Results</h3> |
| <ul class="space-y-3"> |
| <li class="flex items-start"> |
| <i class="fas fa-check-circle text-green-500 mt-1 mr-2"></i> |
| <span class="text-gray-700">Use a recent resume with clear section headings</span> |
| </li> |
| <li class="flex items-start"> |
| <i class="fas fa-check-circle text-green-500 mt-1 mr-2"></i> |
| <span class="text-gray-700">Ensure your document is readable (not scanned)</span> |
| </li> |
| <li class="flex items-start"> |
| <i class="fas fa-check-circle text-green-500 mt-1 mr-2"></i> |
| <span class="text-gray-700">Include measurable achievements in bullet points</span> |
| </li> |
| <li class="flex items-start"> |
| <i class="fas fa-check-circle text-green-500 mt-1 mr-2"></i> |
| <span class="text-gray-700">Remove personal information if concerned about privacy</span> |
| </li> |
| </ul> |
| </div> |
| </div> |
| <div class="flex justify-end mt-8"> |
| <button id="nextStep1" class="px-6 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 transition disabled:opacity-50 disabled:cursor-not-allowed" disabled> |
| Next: Job Description <i class="fas fa-arrow-right ml-2"></i> |
| </button> |
| </div> |
| </div> |
|
|
| |
| <div id="step2" class="p-8 hidden"> |
| <h2 class="text-2xl font-semibold text-gray-800 mb-6">Enter Job Description</h2> |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-8"> |
| <div> |
| <div class="mb-4"> |
| <label for="jobTitle" class="block text-sm font-medium text-gray-700 mb-1">Job Title</label> |
| <input type="text" id="jobTitle" class="w-full px-4 py-2 border border-gray-300 rounded-md focus:ring-blue-500 focus:border-blue-500" placeholder="e.g. Senior Software Engineer"> |
| </div> |
| <div class="mb-4"> |
| <label for="jobDescription" class="block text-sm font-medium text-gray-700 mb-1">Paste Job Description</label> |
| <textarea id="jobDescription" rows="10" class="w-full px-4 py-2 border border-gray-300 rounded-md focus:ring-blue-500 focus:border-blue-500" placeholder="Paste the full job description here..."></textarea> |
| </div> |
| <div class="flex space-x-3"> |
| <button id="analyzeJD" class="px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 transition"> |
| Analyze Keywords <i class="fas fa-search ml-2"></i> |
| </button> |
| <button id="sampleJD" class="px-4 py-2 bg-gray-200 text-gray-700 rounded-md hover:bg-gray-300 transition"> |
| Load Sample <i class="fas fa-lightbulb ml-2"></i> |
| </button> |
| </div> |
| </div> |
| <div> |
| <div class="bg-yellow-50 p-6 rounded-lg border border-yellow-200"> |
| <h3 class="text-lg font-semibold text-yellow-800 mb-3">Extracted Keywords</h3> |
| <div id="keywordsContainer" class="flex flex-wrap gap-2 mb-4"> |
| |
| </div> |
| <div class="space-y-3"> |
| <div> |
| <label class="flex items-center"> |
| <input type="checkbox" id="highlightKeywords" class="rounded text-blue-600 mr-2" checked> |
| <span class="text-gray-700">Highlight keywords in resume</span> |
| </label> |
| </div> |
| <div> |
| <label class="flex items-center"> |
| <input type="checkbox" id="addMissingKeywords" class="rounded text-blue-600 mr-2" checked> |
| <span class="text-gray-700">Add missing keywords to resume</span> |
| </label> |
| </div> |
| <div> |
| <label class="flex items-center"> |
| <input type="checkbox" id="reorderBullets" class="rounded text-blue-600 mr-2" checked> |
| <span class="text-gray-700">Reorder bullet points by relevance</span> |
| </label> |
| </div> |
| </div> |
| </div> |
| <div class="mt-4 bg-green-50 p-6 rounded-lg border border-green-200"> |
| <h3 class="text-lg font-semibold text-green-800 mb-3">Keyword Optimization Score</h3> |
| <div class="flex items-center mb-2"> |
| <div class="w-full bg-gray-200 rounded-full h-4"> |
| <div id="matchScoreBar" class="bg-green-600 h-4 rounded-full" style="width: 0%"></div> |
| </div> |
| <span id="matchScoreText" class="ml-3 font-bold text-green-700">0%</span> |
| </div> |
| <p class="text-sm text-gray-600">This score shows how well your current resume matches the job description keywords.</p> |
| </div> |
| </div> |
| </div> |
| <div class="flex justify-between mt-8"> |
| <button id="prevStep2" class="px-6 py-2 bg-gray-200 text-gray-700 rounded-md hover:bg-gray-300 transition"> |
| <i class="fas fa-arrow-left mr-2"></i> Back |
| </button> |
| <button id="nextStep2" class="px-6 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 transition disabled:opacity-50 disabled:cursor-not-allowed" disabled> |
| Next: Tailor Resume <i class="fas fa-arrow-right ml-2"></i> |
| </button> |
| </div> |
| </div> |
|
|
| |
| <div id="step3" class="p-8 hidden"> |
| <h2 class="text-2xl font-semibold text-gray-800 mb-6">Tailor Your Resume</h2> |
| <div class="grid grid-cols-1 lg:grid-cols-3 gap-6"> |
| <div class="lg:col-span-2"> |
| <div class="bg-white border border-gray-200 rounded-lg shadow-sm overflow-hidden"> |
| <div class="bg-gray-50 px-4 py-3 border-b border-gray-200"> |
| <h3 class="text-lg font-medium text-gray-800">Resume Preview</h3> |
| </div> |
| <div id="resumePreview" class="p-6 overflow-auto max-h-[600px]"> |
| |
| <div class="text-center py-12 text-gray-500"> |
| <i class="fas fa-file-alt text-4xl mb-4"></i> |
| <p>Your tailored resume will appear here</p> |
| </div> |
| </div> |
| </div> |
| </div> |
| <div> |
| <div class="bg-white border border-gray-200 rounded-lg shadow-sm overflow-hidden mb-6"> |
| <div class="bg-gray-50 px-4 py-3 border-b border-gray-200"> |
| <h3 class="text-lg font-medium text-gray-800">Suggested Edits</h3> |
| </div> |
| <div id="suggestionsContainer" class="p-4 overflow-auto max-h-[300px]"> |
| |
| <div class="text-center py-8 text-gray-500"> |
| <i class="fas fa-lightbulb text-2xl mb-3"></i> |
| <p>AI-powered suggestions will appear here</p> |
| </div> |
| </div> |
| </div> |
| <div class="bg-white border border-gray-200 rounded-lg shadow-sm overflow-hidden"> |
| <div class="bg-gray-50 px-4 py-3 border-b border-gray-200"> |
| <h3 class="text-lg font-medium text-gray-800">Customize Output</h3> |
| </div> |
| <div class="p-4"> |
| <div class="mb-4"> |
| <label class="block text-sm font-medium text-gray-700 mb-1">Output Format</label> |
| <div class="flex space-x-4"> |
| <label class="inline-flex items-center"> |
| <input type="radio" name="outputFormat" class="text-blue-600" value="pdf" checked> |
| <span class="ml-2 text-gray-700">PDF</span> |
| </label> |
| <label class="inline-flex items-center"> |
| <input type="radio" name="outputFormat" class="text-blue-600" value="docx"> |
| <span class="ml-2 text-gray-700">Word (DOCX)</span> |
| </label> |
| </div> |
| </div> |
| <div class="mb-4"> |
| <label class="block text-sm font-medium text-gray-700 mb-1">Resume Style</label> |
| <select id="resumeStyle" class="w-full px-4 py-2 border border-gray-300 rounded-md focus:ring-blue-500 focus:border-blue-500"> |
| <option value="modern">Modern</option> |
| <option value="professional">Professional</option> |
| <option value="creative">Creative</option> |
| <option value="minimal">Minimal</option> |
| </select> |
| </div> |
| <button id="generateResume" class="w-full px-4 py-3 bg-green-600 text-white rounded-md hover:bg-green-700 transition font-medium"> |
| Generate Tailored Resume <i class="fas fa-magic ml-2"></i> |
| </button> |
| </div> |
| </div> |
| </div> |
| </div> |
| <div class="flex justify-between mt-8"> |
| <button id="prevStep3" class="px-6 py-2 bg-gray-200 text-gray-700 rounded-md hover:bg-gray-300 transition"> |
| <i class="fas fa-arrow-left mr-2"></i> Back |
| </button> |
| <button id="nextStep3" class="px-6 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 transition hidden"> |
| Next: Download <i class="fas fa-arrow-right ml-2"></i> |
| </button> |
| </div> |
| </div> |
|
|
| |
| <div id="step4" class="p-8 hidden"> |
| <div class="text-center py-12"> |
| <div class="mx-auto w-24 h-24 bg-green-100 rounded-full flex items-center justify-center mb-6"> |
| <i class="fas fa-check text-4xl text-green-600"></i> |
| </div> |
| <h2 class="text-2xl font-semibold text-gray-800 mb-3">Your Tailored Resume is Ready!</h2> |
| <p class="text-gray-600 mb-8 max-w-2xl mx-auto">We've optimized your resume to match the job description with relevant keywords and impactful bullet points.</p> |
| |
| <div class="flex flex-col sm:flex-row justify-center gap-4 mb-12"> |
| <button id="downloadResume" class="px-6 py-3 bg-blue-600 text-white rounded-md hover:bg-blue-700 transition font-medium"> |
| <i class="fas fa-download mr-2"></i> Download Resume |
| </button> |
| <button id="viewChanges" class="px-6 py-3 bg-gray-200 text-gray-700 rounded-md hover:bg-gray-300 transition font-medium"> |
| <i class="fas fa-file-diff mr-2"></i> View Changes Summary |
| </button> |
| <button id="newResume" class="px-6 py-3 bg-white border border-gray-300 text-gray-700 rounded-md hover:bg-gray-50 transition font-medium"> |
| <i class="fas fa-redo mr-2"></i> Tailor Another Resume |
| </button> |
| </div> |
| |
| <div class="bg-blue-50 p-6 rounded-lg border border-blue-200 max-w-2xl mx-auto text-left"> |
| <h3 class="text-lg font-semibold text-blue-800 mb-3">Next Steps</h3> |
| <ul class="space-y-2 text-gray-700"> |
| <li class="flex items-start"> |
| <i class="fas fa-check-circle text-blue-500 mt-1 mr-2"></i> |
| <span>Review your resume for accuracy and personal touch</span> |
| </li> |
| <li class="flex items-start"> |
| <i class="fas fa-check-circle text-blue-500 mt-1 mr-2"></i> |
| <span>Save with a descriptive filename (e.g., "JohnDoe_UX_Designer_Resume.pdf")</span> |
| </li> |
| <li class="flex items-start"> |
| <i class="fas fa-check-circle text-blue-500 mt-1 mr-2"></i> |
| <span>Combine with a tailored cover letter for best results</span> |
| </li> |
| </ul> |
| </div> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <footer class="mt-16 text-center text-gray-500 text-sm"> |
| <p>Resume Tailor Pro uses AI to help you create job-winning resumes. We don't store your personal data.</p> |
| <p class="mt-2">© 2023 Resume Tailor Pro. All rights reserved.</p> |
| </footer> |
| </div> |
|
|
| <script> |
| |
| let resumeFile = null; |
| let resumeText = ''; |
| let jobDescriptionText = ''; |
| let extractedKeywords = []; |
| let tailoredResumeHTML = ''; |
| |
| |
| const dropzone = document.getElementById('dropzone'); |
| const fileInput = document.getElementById('fileInput'); |
| const fileInfo = document.getElementById('fileInfo'); |
| const fileName = document.getElementById('fileName'); |
| const removeFile = document.getElementById('removeFile'); |
| const uploadProgress = document.getElementById('uploadProgress'); |
| const nextStep1 = document.getElementById('nextStep1'); |
| |
| const step1 = document.getElementById('step1'); |
| const step2 = document.getElementById('step2'); |
| const step3 = document.getElementById('step3'); |
| const step4 = document.getElementById('step4'); |
| |
| const prevStep2 = document.getElementById('prevStep2'); |
| const nextStep2 = document.getElementById('nextStep2'); |
| |
| const prevStep3 = document.getElementById('prevStep3'); |
| const nextStep3 = document.getElementById('nextStep3'); |
| |
| const jobTitle = document.getElementById('jobTitle'); |
| const jobDescription = document.getElementById('jobDescription'); |
| const analyzeJD = document.getElementById('analyzeJD'); |
| const sampleJD = document.getElementById('sampleJD'); |
| const keywordsContainer = document.getElementById('keywordsContainer'); |
| const matchScoreBar = document.getElementById('matchScoreBar'); |
| const matchScoreText = document.getElementById('matchScoreText'); |
| |
| const resumePreview = document.getElementById('resumePreview'); |
| const suggestionsContainer = document.getElementById('suggestionsContainer'); |
| const generateResume = document.getElementById('generateResume'); |
| |
| const downloadResume = document.getElementById('downloadResume'); |
| const viewChanges = document.getElementById('viewChanges'); |
| const newResume = document.getElementById('newResume'); |
| |
| |
| dropzone.addEventListener('click', () => fileInput.click()); |
| dropzone.addEventListener('dragover', (e) => { |
| e.preventDefault(); |
| dropzone.classList.add('active'); |
| }); |
| dropzone.addEventListener('dragleave', () => { |
| dropzone.classList.remove('active'); |
| }); |
| dropzone.addEventListener('drop', (e) => { |
| e.preventDefault(); |
| dropzone.classList.remove('active'); |
| if (e.dataTransfer.files.length) { |
| handleFileUpload(e.dataTransfer.files[0]); |
| } |
| }); |
| |
| fileInput.addEventListener('change', () => { |
| if (fileInput.files.length) { |
| handleFileUpload(fileInput.files[0]); |
| } |
| }); |
| |
| removeFile.addEventListener('click', (e) => { |
| e.stopPropagation(); |
| resetFileUpload(); |
| }); |
| |
| nextStep1.addEventListener('click', () => { |
| step1.classList.add('hidden'); |
| step2.classList.remove('hidden'); |
| updateStepProgress(2); |
| }); |
| |
| prevStep2.addEventListener('click', () => { |
| step2.classList.add('hidden'); |
| step1.classList.remove('hidden'); |
| updateStepProgress(1); |
| }); |
| |
| nextStep2.addEventListener('click', () => { |
| step2.classList.add('hidden'); |
| step3.classList.remove('hidden'); |
| updateStepProgress(3); |
| |
| displayResumePreview(); |
| }); |
| |
| prevStep3.addEventListener('click', () => { |
| step3.classList.add('hidden'); |
| step2.classList.remove('hidden'); |
| updateStepProgress(2); |
| }); |
| |
| nextStep3.addEventListener('click', () => { |
| step3.classList.add('hidden'); |
| step4.classList.remove('hidden'); |
| updateStepProgress(4); |
| }); |
| |
| analyzeJD.addEventListener('click', analyzeJobDescription); |
| sampleJD.addEventListener('click', loadSampleJobDescription); |
| generateResume.addEventListener('click', generateTailoredResume); |
| downloadResume.addEventListener('click', downloadTailoredResume); |
| viewChanges.addEventListener('click', showChangesSummary); |
| newResume.addEventListener('click', resetApplication); |
| |
| |
| function handleFileUpload(file) { |
| const validTypes = ['application/pdf', 'application/msword', 'application/vnd.openxmlformats-officedocument.wordprocessingml.document']; |
| |
| if (!validTypes.includes(file.type) && !file.name.match(/\.(pdf|doc|docx)$/i)) { |
| alert('Please upload a PDF or Word document'); |
| return; |
| } |
| |
| resumeFile = file; |
| fileName.textContent = file.name; |
| fileInfo.classList.remove('hidden'); |
| nextStep1.disabled = false; |
| |
| |
| let progress = 0; |
| const interval = setInterval(() => { |
| progress += Math.random() * 10; |
| if (progress >= 100) { |
| progress = 100; |
| clearInterval(interval); |
| } |
| uploadProgress.style.width = `${progress}%`; |
| }, 200); |
| |
| |
| |
| } |
| |
| function resetFileUpload() { |
| resumeFile = null; |
| fileInput.value = ''; |
| fileInfo.classList.add('hidden'); |
| uploadProgress.style.width = '0%'; |
| nextStep1.disabled = true; |
| } |
| |
| function updateStepProgress(stepNumber) { |
| const steps = document.querySelectorAll('.step'); |
| |
| steps.forEach((step, index) => { |
| const number = step.querySelector('div:first-child'); |
| const text = step.querySelector('span'); |
| const line = step.querySelector('div:last-child'); |
| |
| if (index + 1 < stepNumber) { |
| |
| number.classList.remove('bg-gray-300'); |
| number.classList.add('bg-green-500'); |
| text.classList.remove('text-gray-500'); |
| text.classList.add('text-green-600'); |
| if (line) line.classList.remove('bg-gray-300'); |
| if (line) line.classList.add('bg-green-500'); |
| } else if (index + 1 === stepNumber) { |
| |
| number.classList.remove('bg-gray-300'); |
| number.classList.remove('bg-green-500'); |
| number.classList.add('bg-blue-600'); |
| text.classList.remove('text-gray-500'); |
| text.classList.remove('text-green-600'); |
| text.classList.add('text-blue-600'); |
| } else { |
| |
| number.classList.remove('bg-blue-600'); |
| number.classList.remove('bg-green-500'); |
| number.classList.add('bg-gray-300'); |
| text.classList.remove('text-blue-600'); |
| text.classList.remove('text-green-600'); |
| text.classList.add('text-gray-500'); |
| if (line) line.classList.remove('bg-green-500'); |
| if (line) line.classList.add('bg-gray-300'); |
| } |
| }); |
| } |
| |
| function analyzeJobDescription() { |
| jobDescriptionText = jobDescription.value.trim(); |
| |
| if (!jobDescriptionText) { |
| alert('Please enter a job description'); |
| return; |
| } |
| |
| |
| const words = jobDescriptionText.toLowerCase() |
| .replace(/[^\w\s]|_/g, '') |
| .replace(/\s+/g, ' ') |
| .split(' '); |
| |
| |
| const commonWords = ['the', 'and', 'a', 'an', 'in', 'on', 'at', 'to', 'for', 'with', 'of', 'as', 'is', 'are', 'be', 'this', 'that']; |
| const wordCounts = {}; |
| |
| words.forEach(word => { |
| if (word.length > 3 && !commonWords.includes(word)) { |
| wordCounts[word] = (wordCounts[word] || 0) + 1; |
| } |
| }); |
| |
| |
| extractedKeywords = Object.entries(wordCounts) |
| .sort((a, b) => b[1] - a[1]) |
| .slice(0, 15) |
| .map(item => item[0]); |
| |
| displayKeywords(); |
| calculateMatchScore(); |
| nextStep2.disabled = false; |
| } |
| |
| function displayKeywords() { |
| keywordsContainer.innerHTML = ''; |
| |
| extractedKeywords.forEach(keyword => { |
| const chip = document.createElement('div'); |
| chip.className = 'keyword-chip px-3 py-1 bg-blue-100 text-blue-800 rounded-full text-sm font-medium'; |
| chip.textContent = keyword; |
| keywordsContainer.appendChild(chip); |
| }); |
| } |
| |
| function calculateMatchScore() { |
| |
| |
| const score = Math.floor(Math.random() * 30) + 20; |
| matchScoreBar.style.width = `${score}%`; |
| matchScoreText.textContent = `${score}%`; |
| |
| |
| if (score < 30) { |
| matchScoreBar.classList.remove('bg-green-600', 'bg-yellow-500'); |
| matchScoreBar.classList.add('bg-red-500'); |
| } else if (score < 60) { |
| matchScoreBar.classList.remove('bg-green-600', 'bg-red-500'); |
| matchScoreBar.classList.add('bg-yellow-500'); |
| } else { |
| matchScoreBar.classList.remove('bg-yellow-500', 'bg-red-500'); |
| matchScoreBar.classList.add('bg-green-600'); |
| } |
| } |
| |
| function loadSampleJobDescription() { |
| const sample = `Senior Software Engineer - Web Development |
| |
| We are looking for an experienced Senior Software Engineer to join our web development team. The ideal candidate will have strong expertise in JavaScript frameworks, cloud technologies, and agile methodologies. |
| |
| Responsibilities: |
| - Develop and maintain high-performance web applications using React.js and Node.js |
| - Design and implement RESTful APIs and microservices architecture |
| - Collaborate with cross-functional teams to define, design, and ship new features |
| - Optimize applications for maximum speed and scalability |
| - Implement automated testing platforms and unit tests |
| - Stay up-to-date with emerging technologies and industry trends |
| |
| Requirements: |
| - 5+ years of professional software development experience |
| - Strong proficiency in JavaScript, including DOM manipulation and JS object model |
| - Thorough understanding of React.js and its core principles |
| - Experience with popular React.js workflows (such as Redux or Context API) |
| - Familiarity with modern front-end build pipelines and tools |
| - Experience with cloud platforms (AWS, Azure, or GCP) |
| - Knowledge of modern authorization mechanisms (JWT, OAuth) |
| - Familiarity with code versioning tools (Git) |
| - Excellent problem-solving skills and attention to detail |
| |
| Preferred Qualifications: |
| - Experience with TypeScript |
| - Knowledge of server-side rendering and Next.js |
| - Familiarity with Docker and Kubernetes |
| - Understanding of CI/CD pipelines`; |
| |
| jobTitle.value = 'Senior Software Engineer'; |
| jobDescription.value = sample; |
| } |
| |
| function displayResumePreview() { |
| |
| |
| |
| const sampleResumeHTML = ` |
| <div class="font-sans"> |
| <div class="text-center mb-6"> |
| <h1 class="text-2xl font-bold text-gray-800">John Doe</h1> |
| <p class="text-gray-600">Senior Software Engineer | john.doe@example.com | (123) 456-7890</p> |
| </div> |
| |
| <div class="mb-6"> |
| <h2 class="text-xl font-semibold text-gray-800 border-b border-gray-200 pb-1 mb-3">Professional Summary</h2> |
| <p class="text-gray-700">Experienced software engineer with 7+ years in web development. Skilled in JavaScript, React, and Node.js. Passionate about building scalable web applications and mentoring junior developers.</p> |
| </div> |
| |
| <div class="mb-6"> |
| <h2 class="text-xl font-semibold text-gray-800 border-b border-gray-200 pb-1 mb-3">Technical Skills</h2> |
| <div class="flex flex-wrap gap-2"> |
| <span class="px-3 py-1 bg-gray-100 text-gray-800 rounded-full text-sm">JavaScript</span> |
| <span class="px-3 py-1 bg-gray-100 text-gray-800 rounded-full text-sm">React</span> |
| <span class="px-3 py-1 bg-gray-100 text-gray-800 rounded-full text-sm">Node.js</span> |
| <span class="px-3 py-1 bg-gray-100 text-gray-800 rounded-full text-sm">HTML/CSS</span> |
| <span class="px-3 py-1 bg-gray-100 text-gray-800 rounded-full text-sm">Git</span> |
| <span class="px-3 py-1 bg-gray-100 text-gray-800 rounded-full text-sm">REST APIs</span> |
| </div> |
| </div> |
| |
| <div class="mb-6"> |
| <h2 class="text-xl font-semibold text-gray-800 border-b border-gray-200 pb-1 mb-3">Work Experience</h2> |
| |
| <div class="mb-4"> |
| <div class="flex justify-between"> |
| <h3 class="font-medium text-gray-800">Senior Software Engineer</h3> |
| <span class="text-gray-600">2019 - Present</span> |
| </div> |
| <p class="text-gray-600 mb-2">Tech Solutions Inc., San Francisco, CA</p> |
| <ul class="list-disc list-inside space-y-1 text-gray-700"> |
| <li class="resume-point">Led a team of 5 developers to build a React-based customer portal</li> |
| <li class="resume-point">Improved application performance by 40% through code optimization</li> |
| <li class="resume-point">Implemented CI/CD pipeline reducing deployment time by 60%</li> |
| <li class="resume-point">Mentored junior developers in JavaScript best practices</li> |
| </ul> |
| </div> |
| |
| <div class="mb-4"> |
| <div class="flex justify-between"> |
| <h3 class="font-medium text-gray-800">Software Engineer</h3> |
| <span class="text-gray-600">2016 - 2019</span> |
| </div> |
| <p class="text-gray-600 mb-2">Digital Innovations LLC, Austin, TX</p> |
| <ul class="list-disc list-inside space-y-1 text-gray-700"> |
| <li class="resume-point">Developed Node.js microservices for e-commerce platform</li> |
| <li class="resume-point">Reduced server costs by 30% through AWS optimization</li> |
| <li class="resume-point">Collaborated with UX team to implement responsive designs</li> |
| </ul> |
| </div> |
| </div> |
| |
| <div> |
| <h2 class="text-xl font-semibold text-gray-800 border-b border-gray-200 pb-1 mb-3">Education</h2> |
| <div class="flex justify-between"> |
| <h3 class="font-medium text-gray-800">B.S. in Computer Science</h3> |
| <span class="text-gray-600">2012 - 2016</span> |
| </div> |
| <p class="text-gray-600">University of Texas at Austin</p> |
| </div> |
| </div> |
| `; |
| |
| resumePreview.innerHTML = sampleResumeHTML; |
| |
| |
| generateSuggestions(); |
| } |
| |
| function generateSuggestions() { |
| |
| |
| |
| const suggestions = [ |
| { |
| section: "Professional Summary", |
| suggestion: "Add mention of cloud technologies and agile methodologies to better match the job description." |
| }, |
| { |
| section: "Technical Skills", |
| suggestion: "Include keywords: TypeScript, AWS, Docker, Kubernetes, CI/CD to improve ATS compatibility." |
| }, |
| { |
| section: "Senior Software Engineer", |
| suggestion: "Modify bullet points to emphasize React workflows and API development experience." |
| }, |
| { |
| section: "All Experience", |
| suggestion: "Add metrics to achievements where possible (e.g., 'Improved performance by X%')." |
| } |
| ]; |
| |
| suggestionsContainer.innerHTML = ''; |
| |
| suggestions.forEach((item, index) => { |
| const suggestionDiv = document.createElement('div'); |
| suggestionDiv.className = `mb-4 pb-4 ${index < suggestions.length - 1 ? 'border-b border-gray-200' : ''}`; |
| suggestionDiv.innerHTML = ` |
| <div class="flex items-start"> |
| <div class="bg-blue-100 p-2 rounded-full mr-3"> |
| <i class="fas fa-lightbulb text-blue-600 text-sm"></i> |
| </div> |
| <div> |
| <h4 class="font-medium text-gray-800">${item.section}</h4> |
| <p class="text-gray-600 text-sm">${item.suggestion}</p> |
| <button class="mt-2 text-sm text-blue-600 hover:text-blue-800 font-medium"> |
| Apply Suggestion <i class="fas fa-check ml-1"></i> |
| </button> |
| </div> |
| </div> |
| `; |
| suggestionsContainer.appendChild(suggestionDiv); |
| }); |
| } |
| |
| function generateTailoredResume() { |
| |
| generateResume.disabled = true; |
| generateResume.innerHTML = '<i class="fas fa-spinner fa-spin mr-2"></i> Processing...'; |
| |
| setTimeout(() => { |
| |
| |
| |
| |
| const resumePoints = document.querySelectorAll('.resume-point'); |
| resumePoints.forEach(point => { |
| extractedKeywords.forEach(keyword => { |
| if (point.textContent.toLowerCase().includes(keyword)) { |
| point.classList.add('highlight'); |
| } |
| }); |
| }); |
| |
| |
| const skillsSection = resumePreview.querySelector('.flex.flex-wrap.gap-2'); |
| if (skillsSection) { |
| const additionalSkills = ['TypeScript', 'AWS', 'Docker', 'CI/CD']; |
| additionalSkills.forEach(skill => { |
| const skillSpan = document.createElement('span'); |
| skillSpan.className = 'px-3 py-1 bg-blue-100 text-blue-800 rounded-full text-sm'; |
| skillSpan.textContent = skill; |
| skillsSection.appendChild(skillSpan); |
| }); |
| } |
| |
| |
| const summary = resumePreview.querySelector('p.text-gray-700'); |
| if (summary) { |
| summary.textContent = "Experienced software engineer with 7+ years in web development. Skilled in JavaScript, React, Node.js and cloud technologies. Strong expertise in agile methodologies and building scalable web applications. Passionate about mentoring junior developers and implementing CI/CD pipelines."; |
| } |
| |
| |
| const successDiv = document.createElement('div'); |
| successDiv.className = 'mt-4 p-4 bg-green-50 text-green-800 rounded-lg fade-in'; |
| successDiv.innerHTML = ` |
| <div class="flex items-center"> |
| <i class="fas fa-check-circle mr-2"></i> |
| <span>Your resume has been successfully tailored to match the job description!</span> |
| </div> |
| `; |
| resumePreview.appendChild(successDiv); |
| |
| |
| nextStep3.classList.remove('hidden'); |
| generateResume.disabled = false; |
| generateResume.innerHTML = 'Generate Tailored Resume <i class="fas fa-magic ml-2"></i>'; |
| |
| |
| tailoredResumeHTML = resumePreview.innerHTML; |
| }, 2000); |
| } |
| |
| function downloadTailoredResume() { |
| |
| |
| |
| const format = document.querySelector('input[name="outputFormat"]:checked').value; |
| |
| |
| const link = document.createElement('a'); |
| link.href = format === 'pdf' ? |
| 'data:application/pdf;base64,JVBERi0xLjUK...' : |
| 'data:application/vnd.openxmlformats-officedocument.wordprocessingml.document;base64,UEsDBBQ...'; |
| |
| link.download = `Tailored_Resume_${jobTitle.value || 'Job'}.${format}`; |
| document.body.appendChild(link); |
| link.click(); |
| document.body.removeChild(link); |
| |
| |
| const downloadDiv = document.createElement('div'); |
| downloadDiv.className = 'mt-4 p-4 bg-blue-50 text-blue-800 rounded-lg fade-in'; |
| downloadDiv.innerHTML = ` |
| <div class="flex items-center"> |
| <i class="fas fa-check-circle mr-2"></i> |
| <span>Your ${format.toUpperCase()} file has been downloaded!</span> |
| </div> |
| `; |
| document.querySelector('#step4 .text-center').insertBefore(downloadDiv, document.querySelector('#step4 .flex.flex-col')); |
| } |
| |
| function showChangesSummary() { |
| |
| |
| |
| const modalHTML = ` |
| <div class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 p-4"> |
| <div class="bg-white rounded-lg shadow-xl max-w-2xl w-full max-h-[90vh] overflow-auto"> |
| <div class="p-6"> |
| <div class="flex justify-between items-center mb-4"> |
| <h3 class="text-xl font-semibold text-gray-800">Resume Changes Summary</h3> |
| <button id="closeModal" class="text-gray-500 hover:text-gray-700"> |
| <i class="fas fa-times"></i> |
| </button> |
| </div> |
| |
| <div class="space-y-4"> |
| <div class="border-b border-gray-200 pb-4"> |
| <h4 class="font-medium text-gray-800 mb-2">Added Keywords</h4> |
| <div class="flex flex-wrap gap-2"> |
| <span class="px-3 py-1 bg-green-100 text-green-800 rounded-full text-sm">TypeScript</span> |
| <span class="px-3 py-1 bg-green-100 text-green-800 rounded-full text-sm">AWS</span> |
| <span class="px-3 py-1 bg-green-100 text-green-800 rounded-full text-sm">Docker</span> |
| <span class="px-3 py-1 bg-green-100 text-green-800 rounded-full text-sm">CI/CD</span> |
| <span class="px-3 py-1 bg-green-100 text-green-800 rounded-full text-sm">Agile</span> |
| </div> |
| </div> |
| |
| <div class="border-b border-gray-200 pb-4"> |
| <h4 class="font-medium text-gray-800 mb-2">Modified Sections</h4> |
| <ul class="space-y-3"> |
| <li class="flex items-start"> |
| <i class="fas fa-pen text-blue-500 mt-1 mr-2"></i> |
| <div> |
| <span class="font-medium">Professional Summary</span> |
| <p class="text-sm text-gray-600">Added cloud technologies and agile methodologies</p> |
| </div> |
| </li> |
| <li class="flex items-start"> |
| <i class="fas fa-pen text-blue-500 mt-1 mr-2"></i> |
| <div> |
| <span class="font-medium">Technical Skills</span> |
| <p class="text-sm text-gray-600">Added 4 new relevant skills</p> |
| </div> |
| </li> |
| </ul> |
| </div> |
| |
| <div> |
| <h4 class="font-medium text-gray-800 mb-2">Optimization Score</h4> |
| <div class="flex items-center"> |
| <div class="w-full bg-gray-200 rounded-full h-4 mr-3"> |
| <div class="bg-green-600 h-4 rounded-full" style="width: 78%"></div> |
| </div> |
| <span class="font-bold text-green-700">78%</span> |
| </div> |
| <p class="text-sm text-gray-600 mt-2">Your resume now matches 78% of the job description keywords (up from 32%).</p> |
| </div> |
| </div> |
| |
| <div class="mt-6 flex justify-end"> |
| <button id="closeModalBtn" class="px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 transition"> |
| Close |
| </button> |
| </div> |
| </div> |
| </div> |
| </div> |
| `; |
| |
| const modal = document.createElement('div'); |
| modal.innerHTML = modalHTML; |
| document.body.appendChild(modal); |
| |
| const closeModal = document.getElementById('closeModal'); |
| const closeModalBtn = document.getElementById('closeModalBtn'); |
| |
| closeModal.addEventListener('click', () => modal.remove()); |
| closeModalBtn.addEventListener('click', () => modal.remove()); |
| } |
| |
| function resetApplication() { |
| |
| resetFileUpload(); |
| jobTitle.value = ''; |
| jobDescription.value = ''; |
| keywordsContainer.innerHTML = ''; |
| matchScoreBar.style.width = '0%'; |
| matchScoreText.textContent = '0%'; |
| resumePreview.innerHTML = ` |
| <div class="text-center py-12 text-gray-500"> |
| <i class="fas fa-file-alt text-4xl mb-4"></i> |
| <p>Your tailored resume will appear here</p> |
| </div> |
| `; |
| suggestionsContainer.innerHTML = ` |
| <div class="text-center py-8 text-gray-500"> |
| <i class="fas fa-lightbulb text-2xl mb-3"></i> |
| <p>AI-powered suggestions will appear here</p> |
| </div> |
| `; |
| |
| |
| step4.classList.add('hidden'); |
| step1.classList.remove('hidden'); |
| updateStepProgress(1); |
| nextStep2.disabled = true; |
| nextStep3.classList.add('hidden'); |
| } |
| </script> |
| <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=illumnati/test" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> |
| </html> |
