| <!DOCTYPE html> |
| <html lang="en"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>AI Resume ATS Optimizer 🤖 | Convert PDF to ATS-Friendly Text</title> |
| <script src="https://cdn.tailwindcss.com"></script> |
| <link rel="preconnect" href="https://fonts.googleapis.com"> |
| <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> |
| <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet"> |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> |
| <style> |
| * { |
| font-family: 'Inter', sans-serif; |
| } |
| |
| .gradient-bg { |
| background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); |
| } |
| |
| .card-shadow { |
| box-shadow: 0 10px 40px rgba(0, 0, 0, 0.08); |
| } |
| |
| .resume-preview { |
| background: linear-gradient(45deg, #f8f9fa, #e9ecef); |
| } |
| |
| .section-checkbox:checked + .section-label { |
| background-color: #e3f2fd; |
| border-color: #2196f3; |
| } |
| |
| .progress-bar { |
| height: 8px; |
| border-radius: 4px; |
| background: linear-gradient(90deg, #4facfe 0%, #00f2fe 100%); |
| transition: width 0.5s ease; |
| } |
| |
| .ats-badge { |
| background: linear-gradient(45deg, #43e97b, #38f9d7); |
| } |
| |
| .pdf-preview { |
| border: 2px dashed #cbd5e0; |
| border-radius: 8px; |
| transition: all 0.3s ease; |
| } |
| |
| .pdf-preview.dragover { |
| border-color: #667eea; |
| background-color: rgba(102, 126, 234, 0.05); |
| } |
| |
| .fade-in { |
| animation: fadeIn 0.5s ease-in; |
| } |
| |
| @keyframes fadeIn { |
| from { opacity: 0; transform: translateY(10px); } |
| to { opacity: 1; transform: translateY(0); } |
| } |
| |
| .pulse { |
| animation: pulse 2s infinite; |
| } |
| |
| @keyframes pulse { |
| 0% { opacity: 1; } |
| 50% { opacity: 0.7; } |
| 100% { opacity: 1; } |
| } |
| </style> |
| </head> |
| <body class="bg-gray-50 min-h-screen"> |
| |
| <header class="gradient-bg text-white py-8"> |
| <div class="container mx-auto px-4"> |
| <div class="flex flex-col md:flex-row justify-between items-center"> |
| <div class="mb-6 md:mb-0"> |
| <h1 class="text-3xl md:text-4xl font-bold mb-2">AI Resume ATS Optimizer</h1> |
| <p class="text-blue-100">Convert PDF resumes to ATS-friendly text files with AI</p> |
| </div> |
| <div class="flex items-center space-x-4"> |
| <div class="bg-white/20 backdrop-blur-sm rounded-lg px-4 py-2"> |
| <i class="fas fa-robot mr-2"></i> |
| <span>Powered by AI</span> |
| </div> |
| <div class="ats-badge text-gray-800 font-semibold rounded-lg px-4 py-2"> |
| <i class="fas fa-check-circle mr-2"></i> |
| <span>ATS Optimized</span> |
| </div> |
| </div> |
| </div> |
| </div> |
| </header> |
|
|
| |
| <main class="container mx-auto px-4 py-8"> |
| <div class="grid grid-cols-1 lg:grid-cols-3 gap-8"> |
| |
| <div class="lg:col-span-2"> |
| |
| <div class="bg-white rounded-2xl card-shadow p-6 mb-8"> |
| <h2 class="text-2xl font-bold text-gray-800 mb-4 flex items-center"> |
| <i class="fas fa-file-upload text-blue-500 mr-3"></i> |
| Upload Your Resume PDF |
| </h2> |
| <p class="text-gray-600 mb-6">Upload your resume in PDF format. Our AI will analyze and convert it to ATS-optimized text.</p> |
| |
| <div id="pdfUploadArea" class="pdf-preview p-8 text-center cursor-pointer transition-all duration-300 hover:border-blue-400"> |
| <div class="max-w-md mx-auto"> |
| <div class="text-blue-500 mb-4"> |
| <i class="fas fa-cloud-upload-alt text-5xl"></i> |
| </div> |
| <h3 class="text-xl font-semibold text-gray-700 mb-2">Drop your PDF here</h3> |
| <p class="text-gray-500 mb-4">or click to browse files</p> |
| <input type="file" id="pdfFile" accept=".pdf" class="hidden"> |
| <label for="pdfFile" class="inline-block gradient-bg text-white font-medium py-3 px-6 rounded-lg cursor-pointer hover:opacity-90 transition"> |
| <i class="fas fa-search mr-2"></i> |
| Browse Files |
| </label> |
| <p class="text-gray-400 text-sm mt-4">Supports PDF files up to 10MB</p> |
| </div> |
| </div> |
| |
| <div id="uploadedFileInfo" class="hidden mt-6 p-4 bg-green-50 border border-green-200 rounded-lg"> |
| <div class="flex items-center justify-between"> |
| <div class="flex items-center"> |
| <i class="fas fa-file-pdf text-red-500 text-2xl mr-3"></i> |
| <div> |
| <h4 class="font-semibold text-gray-800" id="fileName">resume.pdf</h4> |
| <p class="text-gray-600 text-sm" id="fileSize">2.4 MB</p> |
| </div> |
| </div> |
| <button id="removeFile" class="text-gray-500 hover:text-red-500"> |
| <i class="fas fa-times"></i> |
| </button> |
| </div> |
| <div class="mt-3"> |
| <div class="flex justify-between text-sm text-gray-600 mb-1"> |
| <span>Upload progress</span> |
| <span id="uploadPercent">100%</span> |
| </div> |
| <div class="w-full bg-gray-200 rounded-full h-2"> |
| <div class="progress-bar rounded-full h-2" id="uploadProgressBar" style="width: 100%"></div> |
| </div> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <div class="bg-white rounded-2xl card-shadow p-6"> |
| <h2 class="text-2xl font-bold text-gray-800 mb-4 flex items-center"> |
| <i class="fas fa-check-square text-green-500 mr-3"></i> |
| Select Sections to Include |
| </h2> |
| <p class="text-gray-600 mb-6">Choose which sections of your resume should be included in the ATS-optimized text file.</p> |
| |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-4"> |
| |
| <div class="section-option"> |
| <input type="checkbox" id="contactInfo" class="hidden section-checkbox" checked> |
| <label for="contactInfo" class="section-label flex items-center p-4 border-2 border-gray-200 rounded-xl cursor-pointer transition-all hover:border-blue-300"> |
| <div class="flex-shrink-0 w-12 h-12 bg-blue-100 rounded-lg flex items-center justify-center mr-4"> |
| <i class="fas fa-user-circle text-blue-600 text-xl"></i> |
| </div> |
| <div> |
| <h3 class="font-semibold text-gray-800">Contact Information</h3> |
| <p class="text-gray-500 text-sm">Name, phone, email, address</p> |
| </div> |
| <div class="ml-auto"> |
| <i class="fas fa-check-circle text-blue-500 text-xl hidden check-icon"></i> |
| </div> |
| </label> |
| </div> |
| |
| |
| <div class="section-option"> |
| <input type="checkbox" id="socialMedia" class="hidden section-checkbox" checked> |
| <label for="socialMedia" class="section-label flex items-center p-4 border-2 border-gray-200 rounded-xl cursor-pointer transition-all hover:border-blue-300"> |
| <div class="flex-shrink-0 w-12 h-12 bg-purple-100 rounded-lg flex items-center justify-center mr-4"> |
| <i class="fas fa-hashtag text-purple-600 text-xl"></i> |
| </div> |
| <div> |
| <h3 class="font-semibold text-gray-800">Social Media</h3> |
| <p class="text-gray-500 text-sm">LinkedIn, GitHub, portfolio links</p> |
| </div> |
| <div class="ml-auto"> |
| <i class="fas fa-check-circle text-blue-500 text-xl hidden check-icon"></i> |
| </div> |
| </label> |
| </div> |
| |
| |
| <div class="section-option"> |
| <input type="checkbox" id="workExperience" class="hidden section-checkbox" checked> |
| <label for="workExperience" class="section-label flex items-center p-4 border-2 border-gray-200 rounded-xl cursor-pointer transition-all hover:border-blue-300"> |
| <div class="flex-shrink-0 w-12 h-12 bg-green-100 rounded-lg flex items-center justify-center mr-4"> |
| <i class="fas fa-briefcase text-green-600 text-xl"></i> |
| </div> |
| <div> |
| <h3 class="font-semibold text-gray-800">Work Experience</h3> |
| <p class="text-gray-500 text-sm">Job history, roles, responsibilities</p> |
| </div> |
| <div class="ml-auto"> |
| <i class="fas fa-check-circle text-blue-500 text-xl hidden check-icon"></i> |
| </div> |
| </label> |
| </div> |
| |
| |
| <div class="section-option"> |
| <input type="checkbox" id="education" class="hidden section-checkbox" checked> |
| <label for="education" class="section-label flex items-center p-4 border-2 border-gray-200 rounded-xl cursor-pointer transition-all hover:border-blue-300"> |
| <div class="flex-shrink-0 w-12 h-12 bg-yellow-100 rounded-lg flex items-center justify-center mr-4"> |
| <i class="fas fa-graduation-cap text-yellow-600 text-xl"></i> |
| </div> |
| <div> |
| <h3 class="font-semibold text-gray-800">Education</h3> |
| <p class="text-gray-500 text-sm">Degrees, institutions, dates</p> |
| </div> |
| <div class="ml-auto"> |
| <i class="fas fa-check-circle text-blue-500 text-xl hidden check-icon"></i> |
| </div> |
| </label> |
| </div> |
| |
| |
| <div class="section-option"> |
| <input type="checkbox" id="certifications" class="hidden section-checkbox"> |
| <label for="certifications" class="section-label flex items-center p-4 border-2 border-gray-200 rounded-xl cursor-pointer transition-all hover:border-blue-300"> |
| <div class="flex-shrink-0 w-12 h-12 bg-red-100 rounded-lg flex items-center justify-center mr-4"> |
| <i class="fas fa-certificate text-red-600 text-xl"></i> |
| </div> |
| <div> |
| <h3 class="font-semibold text-gray-800">Certifications</h3> |
| <p class="text-gray-500 text-sm">Professional certificates, licenses</p> |
| </div> |
| <div class="ml-auto"> |
| <i class="fas fa-check-circle text-blue-500 text-xl hidden check-icon"></i> |
| </div> |
| </label> |
| </div> |
| |
| |
| <div class="section-option"> |
| <input type="checkbox" id="skills" class="hidden section-checkbox" checked> |
| <label for="skills" class="section-label flex items-center p-4 border-2 border-gray-200 rounded-xl cursor-pointer transition-all hover:border-blue-300"> |
| <div class="flex-shrink-0 w-12 h-12 bg-indigo-100 rounded-lg flex items-center justify-center mr-4"> |
| <i class="fas fa-tools text-indigo-600 text-xl"></i> |
| </div> |
| <div> |
| <h3 class="font-semibold text-gray-800">Skills</h3> |
| <p class="text-gray-500 text-sm">Technical, soft skills, proficiencies</p> |
| </div> |
| <div class="ml-auto"> |
| <i class="fas fa-check-circle text-blue-500 text-xl hidden check-icon"></i> |
| </div> |
| </label> |
| </div> |
| |
| |
| <div class="section-option"> |
| <input type="checkbox" id="summary" class="hidden section-checkbox" checked> |
| <label for="summary" class="section-label flex items-center p-4 border-2 border-gray-200 rounded-xl cursor-pointer transition-all hover:border-blue-300"> |
| <div class="flex-shrink-0 w-12 h-12 bg-teal-100 rounded-lg flex items-center justify-center mr-4"> |
| <i class="fas fa-clipboard-list text-teal-600 text-xl"></i> |
| </div> |
| <div> |
| <h3 class="font-semibold text-gray-800">Summary</h3> |
| <p class="text-gray-500 text-sm">Professional summary, objective, profile</p> |
| </div> |
| <div class="ml-auto"> |
| <i class="fas fa-check-circle text-blue-500 text-xl hidden check-icon"></i> |
| </div> |
| </label> |
| </div> |
| </div> |
| |
| <div class="mt-8 pt-6 border-t border-gray-200"> |
| <div class="flex flex-col sm:flex-row justify-between items-center"> |
| <div class="mb-4 sm:mb-0"> |
| <h3 class="font-semibold text-gray-800">AI Processing Prompt</h3> |
| <p class="text-gray-600 text-sm">Role: You are an expert talent analyst at top consulting firm that specializes in HR</p> |
| </div> |
| <button id="convertBtn" class="gradient-bg text-white font-semibold py-3 px-8 rounded-lg hover:opacity-90 transition flex items-center"> |
| <i class="fas fa-robot mr-2"></i> |
| Convert with AI |
| </button> |
| </div> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <div class="lg:col-span-1"> |
| |
| <div id="processingState" class="hidden bg-white rounded-2xl card-shadow p-6 mb-8"> |
| <h2 class="text-2xl font-bold text-gray-800 mb-6 text-center">AI Processing Resume</h2> |
| |
| <div class="text-center mb-6"> |
| <div class="inline-flex items-center justify-center w-20 h-20 bg-gradient-to-r from-blue-500 to-purple-500 rounded-full mb-4"> |
| <i class="fas fa-robot text-white text-3xl"></i> |
| </div> |
| <h3 class="font-semibold text-gray-800 text-xl mb-2">Analyzing PDF Content</h3> |
| <p class="text-gray-600">Our AI is extracting and optimizing your resume data</p> |
| </div> |
| |
| <div class="mb-6"> |
| <div class="flex justify-between text-sm text-gray-600 mb-2"> |
| <span>Processing progress</span> |
| <span id="processingPercent">0%</span> |
| </div> |
| <div class="w-full bg-gray-200 rounded-full h-3"> |
| <div class="progress-bar rounded-full h-3" id="processingProgressBar" style="width: 0%"></div> |
| </div> |
| </div> |
| |
| <div class="space-y-4"> |
| <div class="flex items-center"> |
| <div class="w-8 h-8 rounded-full bg-blue-100 flex items-center justify-center mr-3"> |
| <i class="fas fa-file-pdf text-blue-600 text-sm"></i> |
| </div> |
| <div class="flex-1"> |
| <p class="font-medium text-gray-700">Parsing PDF structure</p> |
| <div class="w-full bg-gray-200 rounded-full h-1.5 mt-1"> |
| <div class="bg-blue-500 rounded-full h-1.5 processing-step" data-step="1" style="width: 0%"></div> |
| </div> |
| </div> |
| </div> |
| |
| <div class="flex items-center"> |
| <div class="w-8 h-8 rounded-full bg-purple-100 flex items-center justify-center mr-3"> |
| <i class="fas fa-text-height text-purple-600 text-sm"></i> |
| </div> |
| <div class="flex-1"> |
| <p class="font-medium text-gray-700">Extracting text content</p> |
| <div class="w-full bg-gray-200 rounded-full h-1.5 mt-1"> |
| <div class="bg-purple-500 rounded-full h-1.5 processing-step" data-step="2" style="width: 0%"></div> |
| </div> |
| </div> |
| </div> |
| |
| <div class="flex items-center"> |
| <div class="w-8 h-8 rounded-full bg-green-100 flex items-center justify-center mr-3"> |
| <i class="fas fa-magic text-green-600 text-sm"></i> |
| </div> |
| <div class="flex-1"> |
| <p class="font-medium text-gray-700">Optimizing for ATS</p> |
| <div class="w-full bg-gray-200 rounded-full h-1.5 mt-1"> |
| <div class="bg-green-500 rounded-full h-1.5 processing-step" data-step="3" style="width: 0%"></div> |
| </div> |
| </div> |
| </div> |
| |
| <div class="flex items-center"> |
| <div class="w-8 h-8 rounded-full bg-yellow-100 flex items-center justify-center mr-3"> |
| <i class="fas fa-check-double text-yellow-600 text-sm"></i> |
| </div> |
| <div class="flex-1"> |
| <p class="font-medium text-gray-700">Finalizing text file</p> |
| <div class="w-full bg-gray-200 rounded-full h-1.5 mt-1"> |
| <div class="bg-yellow-500 rounded-full h-1.5 processing-step" data-step="4" style="width: 0%"></div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <div id="resultsSection" class="hidden bg-white rounded-2xl card-shadow p-6"> |
| <div class="flex justify-between items-center mb-6"> |
| <h2 class="text-2xl font-bold text-gray-800">Results</h2> |
| <div class="ats-badge text-gray-800 font-semibold rounded-full px-3 py-1 text-sm"> |
| <i class="fas fa-check-circle mr-1"></i> |
| ATS Ready |
| </div> |
| </div> |
| |
| <div class="mb-6 p-4 bg-blue-50 rounded-xl"> |
| <div class="flex items-center mb-2"> |
| <i class="fas fa-info-circle text-blue-500 mr-2"></i> |
| <h3 class="font-semibold text-gray-800">Conversion Successful!</h3> |
| </div> |
| <p class="text-gray-700 text-sm">Your resume has been optimized for Applicant Tracking Systems. Download the text file below.</p> |
| </div> |
| |
| <div class="mb-6"> |
| <h3 class="font-semibold text-gray-800 mb-3 flex items-center"> |
| <i class="fas fa-file-alt text-gray-500 mr-2"></i> |
| Preview of Optimized Text |
| </h3> |
| <div class="resume-preview rounded-xl p-4 max-h-60 overflow-y-auto"> |
| <pre id="textPreview" class="text-sm text-gray-800 whitespace-pre-wrap font-mono"></pre> |
| </div> |
| <div class="text-right mt-2"> |
| <button id="copyTextBtn" class="text-blue-600 hover:text-blue-800 text-sm font-medium"> |
| <i class="far fa-copy mr-1"></i> |
| Copy to clipboard |
| </button> |
| </div> |
| </div> |
| |
| <div class="space-y-4"> |
| <button id="downloadBtn" class="w-full gradient-bg text-white font-semibold py-3 px-4 rounded-lg hover:opacity-90 transition flex items-center justify-center"> |
| <i class="fas fa-download mr-2"></i> |
| Download .TXT File |
| </button> |
| |
| <button id="newConversionBtn" class="w-full border-2 border-gray-300 text-gray-700 font-medium py-3 px-4 rounded-lg hover:bg-gray-50 transition flex items-center justify-center"> |
| <i class="fas fa-redo mr-2"></i> |
| Convert Another Resume |
| </button> |
| </div> |
| |
| <div class="mt-6 pt-6 border-t border-gray-200"> |
| <h3 class="font-semibold text-gray-800 mb-3">Tips for ATS Success</h3> |
| <ul class="space-y-2 text-sm text-gray-600"> |
| <li class="flex items-start"> |
| <i class="fas fa-check text-green-500 mt-1 mr-2"></i> |
| <span>Use simple, clean formatting</span> |
| </li> |
| <li class="flex items-start"> |
| <i class="fas fa-check text-green-500 mt-1 mr-2"></i> |
| <span>Include relevant keywords from job description</span> |
| </li> |
| <li class="flex items-start"> |
| <i class="fas fa-check text-green-500 mt-1 mr-2"></i> |
| <span>Avoid graphics, tables, and columns</span> |
| </li> |
| <li class="flex items-start"> |
| <i class="fas fa-check text-green-500 mt-1 mr-2"></i> |
| <span>Use standard section headings</span> |
| </li> |
| </ul> |
| </div> |
| </div> |
|
|
| |
| <div id="initialPreview" class="bg-white rounded-2xl card-shadow p-6"> |
| <h2 class="text-2xl font-bold text-gray-800 mb-6">How It Works</h2> |
| |
| <div class="space-y-6"> |
| <div class="flex items-start"> |
| <div class="flex-shrink-0 w-10 h-10 rounded-full bg-gradient-to-r from-blue-500 to-blue-400 flex items-center justify-center text-white font-bold mr-4">1</div> |
| <div> |
| <h3 class="font-semibold text-gray-800 mb-1">Upload PDF Resume</h3> |
| <p class="text-gray-600 text-sm">Upload your resume in PDF format. We support files up to 10MB.</p> |
| </div> |
| </div> |
| |
| <div class="flex items-start"> |
| <div class="flex-shrink-0 w-10 h-10 rounded-full bg-gradient-to-r from-purple-500 to-purple-400 flex items-center justify-center text-white font-bold mr-4">2</div> |
| <div> |
| <h3 class="font-semibold text-gray-800 mb-1">Select Sections</h3> |
| <p class="text-gray-600 text-sm">Choose which resume sections to include in the ATS-optimized text.</p> |
| </div> |
| </div> |
| |
| <div class="flex items-start"> |
| <div class="flex-shrink-0 w-10 h-10 rounded-full bg-gradient-to-r from-green-500 to-green-400 flex items-center justify-center text-white font-bold mr-4">3</div> |
| <div> |
| <h3 class="font-semibold text-gray-800 mb-1">AI Processing</h3> |
| <p class="text-gray-600 text-sm">Our AI analyzes and optimizes your resume for Applicant Tracking Systems.</p> |
| </div> |
| </div> |
| |
| <div class="flex items-start"> |
| <div class="flex-shrink-0 w-10 h-10 rounded-full bg-gradient-to-r from-yellow-500 to-yellow-400 flex items-center justify-center text-white font-bold mr-4">4</div> |
| <div> |
| <h3 class="font-semibold text-gray-800 mb-1">Download Text File</h3> |
| <p class="text-gray-600 text-sm">Get your optimized .TXT file ready to upload to any job application.</p> |
| </div> |
| </div> |
| </div> |
| |
| <div class="mt-8 p-4 bg-gradient-to-r from-blue-50 to-purple-50 rounded-xl border border-blue-100"> |
| <div class="flex items-center mb-2"> |
| <i class="fas fa-lightbulb text-yellow-500 text-xl mr-3"></i> |
| <h3 class="font-semibold text-gray-800">Why ATS Optimization Matters</h3> |
| </div> |
| <p class="text-gray-700 text-sm">Over 75% of resumes are rejected by ATS before a human ever sees them. Our AI ensures your resume gets past these systems.</p> |
| </div> |
| </div> |
| </div> |
| </div> |
| </main> |
|
|
| |
| <footer class="bg-gray-800 text-white py-8 mt-12"> |
| <div class="container mx-auto px-4"> |
| <div class="flex flex-col md:flex-row justify-between items-center"> |
| <div class="mb-6 md:mb-0"> |
| <h2 class="text-2xl font-bold mb-2">AI Resume ATS Optimizer</h2> |
| <p class="text-gray-400">Powered by AI to boost your job search success</p> |
| </div> |
| <div class="flex space-x-6"> |
| <a href="#" class="text-gray-300 hover:text-white transition"> |
| <i class="fab fa-github text-xl"></i> |
| </a> |
| <a href="#" class="text-gray-300 hover:text-white transition"> |
| <i class="fab fa-twitter text-xl"></i> |
| </a> |
| <a href="#" class="text-gray-300 hover:text-white transition"> |
| <i class="fab fa-linkedin text-xl"></i> |
| </a> |
| </div> |
| </div> |
| <div class="mt-8 pt-8 border-t border-gray-700 text-center text-gray-500 text-sm"> |
| <p>This is a demo application. In a production environment, this would connect to actual PDF parsing and AI services.</p> |
| </div> |
| </div> |
| </footer> |
|
|
| |
| <div id="toast" class="fixed bottom-4 right-4 bg-gray-800 text-white p-4 rounded-lg shadow-lg transform translate-y-full transition-transform duration-300 z-50 max-w-sm"> |
| <div class="flex items-center"> |
| <i class="fas fa-check-circle text-green-400 mr-3 text-xl"></i> |
| <div> |
| <p class="font-medium" id="toastMessage">Operation completed successfully!</p> |
| </div> |
| </div> |
| </div> |
|
|
| <script src="script.js"></script> |
| <script src="https://deepsite.hf.co/deepsite-badge.js"></script> |
| </body> |
| </html> |
