<script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/3.11.174/pdf.min.js"></script> <style> :root { --primary: #1d4ed8; --secondary: #0ea5e9; --bg-body: #f8fafc; --text-main: #0f172a; --border: #e2e8f0; } body { font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; background: var(--bg-body); color: var(--text-main); padding: 20px; line-height: 1.6; } .ats-card { max-width: 850px; margin: 0 auto; background: #fff; padding: 30px; border-radius: 20px; box-shadow: 0 10px 25px rgba(0,0,0,0.05); border: 1px solid var(--border); } .ats-header { text-align: center; margin-bottom: 30px; } .ats-header h1 { font-size: 1.8rem; color: var(--primary); margin-bottom: 10px; } .ats-header p { color: #64748b; font-size: 0.95rem; } .input-group { margin-bottom: 20px; } .input-group label { display: block; font-weight: 700; margin-bottom: 8px; font-size: 0.9rem; color: #334155; } textarea, input[type="text"], input[type="file"] { width: 100%; padding: 12px; border: 1.5px solid var(--border); border-radius: 12px; font-family: inherit; transition: all 0.3s; box-sizing: border-box; } textarea:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 4px rgba(29, 78, 216, 0.1); } .upload-area { border: 2px dashed var(--border); padding: 20px; text-align: center; border-radius: 12px; cursor: pointer; background: #fbfcfe; } .btn-analyze { width: 100%; padding: 15px; background: linear-gradient(135deg, var(--primary), var(--secondary)); color: #fff; border: none; border-radius: 12px; font-size: 1.1rem; font-weight: 800; cursor: pointer; transition: transform 0.2s, opacity 0.2s; } .btn-analyze:hover { transform: translateY(-2px); opacity: 0.9; } /* Progress & Results */ .score-container { margin-top: 30px; display: none; animation: fadeIn 0.5s ease; } @keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } .progress-wrapper { height: 25px; background: #e2e8f0; border-radius: 50px; overflow: hidden; margin: 15px 0; position: relative; } #atsBar { height: 100%; width: 0%; background: #ef4444; /* Default red */ transition: width 1.5s cubic-bezier(0.1, 0, 0.2, 1); } .result-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 15px; margin-top: 20px; } .result-item { background: #f8fafc; padding: 15px; border-radius: 12px; border: 1px solid var(--border); text-align: center; } .result-item small { display: block; color: #64748b; margin-bottom: 5px; } .result-item strong { font-size: 1.2rem; color: var(--primary); } .feedback-msg { margin-top: 20px; padding: 15px; border-radius: 10px; font-size: 0.9rem; border-right: 5px solid; } </style> <div class="ats-card"> <div class="ats-header"> <h2>محلل السيرة الذاتية الذكي (ATS Scanner)</h2> <p>حلل توافق الـ CV الخاص بك مع الوصف الوظيفي مجاناً</p> </div> <span><a name="more"></a></span> <div class="input-group"> <label>رفع الـ CV (PDF)</label> <div class="upload-area" onclick="document.getElementById('cvFile').click()"> <span id="fileName">اضغط لرفع الملف أو اسحبه هنا</span> <input type="file" id="cvFile" accept=".pdf" style="display:none"> </div> </div> <div class="input-group"> <label>نص السيرة الذاتية (يتم استخراجه تلقائياً عند الرفع)</label> <textarea id="cvInput" rows="6" placeholder="أو الصق النص هنا يدوياً..."></textarea> </div> <div class="input-group"> <label>وصف الوظيفة المستهدفة (Job Description)</label> <textarea id="jobDesc" rows="5" placeholder="انسخ متطلبات الوظيفة من إعلان العمل هنا لرفع دقة التحليل..."></textarea> </div> <button id="analyzeBtn" class="btn-analyze">ابدأ التحليل الآن 🚀</button> <div id="results" class="score-container"> <div style="display: flex; justify-content: space-between; align-items: center;"> <h2 style="margin:0">نسبة التوافق: <span id="scoreText">0%</span></h2> <span id="rankText" style="font-weight: bold;">ضعيف</span> </div> <div class="progress-wrapper"> <div id="atsBar"></div> </div> <div class="result-grid"> <div class="result-item"><small>الكلمات المفتاحية</small><strong id="resKeywords">0/0</strong></div> <div class="result-item"><small>أقسام السيرة</small><strong id="resSections">0/4</strong></div> <div class="result-item"><small>المهارات المكتشفة</small><strong id="resSkills">0</strong></div> </div> <div id="feedback" class="feedback-msg"></div> </div> </div> <script> const pdfjsLib = window['pdfjs-dist/build/pdf']; pdfjsLib.GlobalWorkerOptions.workerSrc = 'https://cdnjs.cloudflare.com/ajax/libs/pdf.js/3.11.174/pdf.worker.min.js'; // 1. Skill Database (Expanded) const skillDB = ["تسويق", "marketing", "excel", "sales", "مبيعات", "برمجة", "python", "javascript", "sql", "accounting", "محاسبة", "seo", "graphic design", "إدارة مشاريع", "project management", "customer service", "خدمة عملاء", "hr", "إدارة موارد بشرية", "translation", "ترجمة", "photoshop", "data analysis", "تحليل بيانات", "communication", "تواصل", "leadership", "قيادة", "html", "css", "node.js", "react", "office", "إكسيل"]; // 2. Stop words to clean JD const stopWords = ["من", "إلى", "عن", "على", "في", "the", "and", "for", "with", "required", "مطلوب", "خبرة", "سنوات", "experience"]; // 3. Extraction Logic document.getElementById("cvFile").addEventListener("change", async (e) => { const file = e.target.files[0]; if (!file) return; document.getElementById("fileName").innerText = file.name; const reader = new FileReader(); reader.onload = async function() { const typedarray = new Uint8Array(this.result); const pdf = await pdfjsLib.getDocument(typedarray).promise; let fullText = ""; for(let i=1; i<=pdf.numPages; i++) { const page = await pdf.getPage(i); const content = await page.getTextContent(); fullText += content.items.map(s => s.str).join(" ") + " "; } document.getElementById("cvInput").value = fullText; }; reader.readAsArrayBuffer(file); }); // 4. Analysis Logic function analyze() { const cv = document.getElementById("cvInput").value.toLowerCase(); const jd = document.getElementById("jobDesc").value.toLowerCase(); if (!cv || !jd) { alert("من فضلك أدخل السيرة الذاتية ووصف الوظيفة"); return; } // Show Results document.getElementById("results").style.display = "block"; // A. Keyword Matching (Cleaned) const jdWords = jd.split(/[\s,./()]+/).filter(w => w.length > 3 && !stopWords.includes(w)); const uniqueJD = [...new Set(jdWords)]; let matched = uniqueJD.filter(w => cv.includes(w)); // B. Section Check const sections = [/experience|خبرة|employment/i, /skills|مهارات/i, /education|تعليم|درجة/i, /summary|profile|نبذة/i]; let sectionScore = sections.reduce((acc, reg) => acc + (reg.test(cv) ? 1 : 0), 0); // C. Skills Check let skillsFound = skillDB.filter(s => cv.includes(s.toLowerCase())); // 5. Final Calculation let kwRate = (matched.length / uniqueJD.length) || 0; let totalScore = Math.round((kwRate * 50) + (sectionScore * 7.5) + (Math.min(skillsFound.length, 10) * 2)); totalScore = Math.min(totalScore, 100); // UI Updates const bar = document.getElementById("atsBar"); const scoreTxt = document.getElementById("scoreText"); const rank = document.getElementById("rankText"); bar.style.width = totalScore + "%"; scoreTxt.innerText = totalScore + "%"; // Color Logic if(totalScore < 50) { bar.style.background = "#ef4444"; rank.innerText = "ضعيف 🔴"; rank.style.color="#ef4444"; } else if(totalScore < 75) { bar.style.background = "#f59e0b"; rank.innerText = "متوسط 🟠"; rank.style.color="#f59e0b"; } else { bar.style.background = "#22c55e"; rank.innerText = "ممتاز 🟢"; rank.style.color="#22c55e"; } document.getElementById("resKeywords").innerText = `${matched.length} / ${uniqueJD.length}`; document.getElementById("resSections").innerText = `${sectionScore} / 4`; document.getElementById("resSkills").innerText = skillsFound.length; // Feedback Message let feedback = document.getElementById("feedback"); if(totalScore > 75) { feedback.innerText = "سيرتك الذاتية ممتازة ومتوافقة جداً مع الوصف الوظيفي! يمكنك التقديم الآن."; feedback.style.borderColor = "#22c55e"; feedback.style.background = "#f0fdf4"; } else { feedback.innerText = `تحتاج لإضافة كلمات مفتاحية مثل: (${uniqueJD.slice(0, 5).join(", ")}) لزيادة فرصك في القبول.`; feedback.style.borderColor = "#f59e0b"; feedback.style.background = "#fffbeb"; } } document.getElementById("analyzeBtn").addEventListener("click", analyze); </script>