/** * ResumeGate Widget v1.0 * Embeddable resume screening widget for career pages * https://resumegate.mcpengage.com */ (function() { 'use strict'; const WIDGET_VERSION = '1.0.0'; // Demo resume profiles for simulation const demoProfiles = [ { name: 'Alex Morgan', email: 'alex.morgan@email.com', experience: 6, industry: 'Technology', company: 'Salesforce', role: 'Senior Software Engineer', education: 'BS Computer Science, University of Washington', skills: ['React', 'TypeScript', 'Node.js', 'AWS', 'PostgreSQL'], score: 87, status: 'pass', breakdown: { experience: { pass: true, detail: '6 years meets minimum of 3 years' }, skills: { pass: true, detail: '4 of 5 required skills matched' }, industry: { pass: true, detail: 'Technology — direct industry match' } } }, { name: 'Jordan Lee', email: 'jordan.lee@email.com', experience: 1, industry: 'Retail', company: 'Best Buy', role: 'Junior Web Developer', education: 'Coding Bootcamp, App Academy', skills: ['HTML', 'CSS', 'JavaScript', 'jQuery'], score: 32, status: 'fail', breakdown: { experience: { pass: false, detail: '1 year does not meet minimum of 3 years' }, skills: { pass: false, detail: '1 of 5 required skills matched (need 2)' }, industry: { pass: false, detail: 'Retail — no industry match' } } }, { name: 'Sam Rivera', email: 'sam.r@email.com', experience: 4, industry: 'FinTech', company: 'Square', role: 'Frontend Engineer', education: 'MS Computer Science, Georgia Tech', skills: ['React', 'TypeScript', 'Python', 'Docker', 'GraphQL'], score: 79, status: 'pass', breakdown: { experience: { pass: true, detail: '4 years meets minimum of 3 years' }, skills: { pass: true, detail: '3 of 5 required skills matched' }, industry: { pass: true, detail: 'FinTech — related industry match' } } } ]; // Inject styles function injectStyles() { if (document.getElementById('rg-widget-styles')) return; const style = document.createElement('style'); style.id = 'rg-widget-styles'; style.textContent = ` @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap'); .rg-widget { font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; max-width: 520px; margin: 0 auto; -webkit-font-smoothing: antialiased; } .rg-widget * { box-sizing: border-box; margin: 0; padding: 0; } .rg-card { background: white; border-radius: 16px; box-shadow: 0 1px 3px rgba(0,0,0,0.1), 0 1px 2px rgba(0,0,0,0.06); border: 1px solid #e5e7eb; overflow: hidden; transition: box-shadow 0.2s ease; } .rg-card:hover { box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1), 0 2px 4px -2px rgba(0,0,0,0.1); } .rg-header { padding: 24px 28px 20px; border-bottom: 1px solid #f3f4f6; } .rg-header-brand { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; } .rg-logo { width: 32px; height: 32px; background: #6366f1; border-radius: 8px; display: flex; align-items: center; justify-content: center; color: white; font-weight: 800; font-size: 14px; } .rg-brand-name { font-size: 13px; font-weight: 600; color: #6366f1; letter-spacing: -0.2px; } .rg-header h3 { font-size: 20px; font-weight: 700; color: #111827; letter-spacing: -0.4px; margin-bottom: 6px; } .rg-header p { font-size: 14px; color: #6b7280; line-height: 1.5; } .rg-body { padding: 24px 28px; } /* Upload Zone */ .rg-upload-zone { border: 2px dashed #d1d5db; border-radius: 12px; padding: 40px 24px; text-align: center; cursor: pointer; transition: all 0.2s ease; background: #f9fafb; position: relative; } .rg-upload-zone:hover { border-color: #6366f1; background: #eef2ff; } .rg-upload-zone.dragover { border-color: #6366f1; background: #eef2ff; transform: scale(1.01); } .rg-upload-icon { width: 48px; height: 48px; margin: 0 auto 16px; background: #eef2ff; border-radius: 12px; display: flex; align-items: center; justify-content: center; } .rg-upload-icon svg { width: 24px; height: 24px; color: #6366f1; } .rg-upload-zone h4 { font-size: 15px; font-weight: 600; color: #111827; margin-bottom: 6px; } .rg-upload-zone p { font-size: 13px; color: #9ca3af; } .rg-upload-zone .rg-browse { color: #6366f1; font-weight: 500; text-decoration: none; cursor: pointer; } .rg-upload-zone .rg-browse:hover { text-decoration: underline; } .rg-upload-input { position: absolute; inset: 0; opacity: 0; cursor: pointer; } .rg-file-selected { display: flex; align-items: center; gap: 12px; padding: 14px 16px; background: #f0fdf4; border: 1px solid #bbf7d0; border-radius: 10px; margin-bottom: 16px; } .rg-file-icon { width: 36px; height: 36px; background: #dcfce7; border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: 16px; flex-shrink: 0; } .rg-file-info { flex: 1; min-width: 0; } .rg-file-name { font-size: 13px; font-weight: 600; color: #111827; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .rg-file-size { font-size: 11px; color: #6b7280; margin-top: 2px; } .rg-file-remove { width: 28px; height: 28px; border-radius: 50%; border: none; background: #fee2e2; color: #ef4444; cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 14px; transition: all 0.15s ease; } .rg-file-remove:hover { background: #fecaca; } .rg-analyze-btn { width: 100%; padding: 12px; background: #6366f1; color: white; border: none; border-radius: 10px; font-size: 14px; font-weight: 600; font-family: inherit; cursor: pointer; transition: all 0.15s ease; display: flex; align-items: center; justify-content: center; gap: 8px; } .rg-analyze-btn:hover { background: #4f46e5; } .rg-analyze-btn:disabled { opacity: 0.5; cursor: not-allowed; } /* Loading */ .rg-loading { text-align: center; padding: 40px 24px; } .rg-spinner { width: 48px; height: 48px; border: 3px solid #e5e7eb; border-top-color: #6366f1; border-radius: 50%; animation: rg-spin 0.8s linear infinite; margin: 0 auto 20px; } @keyframes rg-spin { to { transform: rotate(360deg); } } .rg-loading h4 { font-size: 16px; font-weight: 600; color: #111827; margin-bottom: 8px; } .rg-loading p { font-size: 13px; color: #9ca3af; } .rg-loading-steps { margin-top: 24px; text-align: left; max-width: 280px; margin-left: auto; margin-right: auto; } .rg-loading-step { display: flex; align-items: center; gap: 10px; padding: 8px 0; font-size: 13px; color: #9ca3af; transition: all 0.3s ease; } .rg-loading-step.active { color: #6366f1; font-weight: 500; } .rg-loading-step.done { color: #10b981; } .rg-step-dot { width: 20px; height: 20px; border-radius: 50%; border: 2px solid #e5e7eb; display: flex; align-items: center; justify-content: center; font-size: 10px; flex-shrink: 0; transition: all 0.3s ease; } .rg-loading-step.active .rg-step-dot { border-color: #6366f1; background: #eef2ff; } .rg-loading-step.done .rg-step-dot { border-color: #10b981; background: #10b981; color: white; } /* Results */ .rg-results { padding: 24px 28px; } .rg-result-badge { display: inline-flex; align-items: center; gap: 8px; padding: 8px 20px; border-radius: 24px; font-size: 15px; font-weight: 700; margin-bottom: 20px; } .rg-result-badge.pass { background: #ecfdf5; color: #059669; } .rg-result-badge.fail { background: #fef2f2; color: #dc2626; } .rg-parsed-info { background: #f9fafb; border-radius: 10px; padding: 16px; margin-bottom: 16px; } .rg-parsed-row { display: flex; justify-content: space-between; align-items: center; padding: 6px 0; font-size: 13px; } .rg-parsed-label { color: #6b7280; font-weight: 500; } .rg-parsed-value { color: #111827; font-weight: 600; } .rg-breakdown { margin-bottom: 20px; } .rg-breakdown h4 { font-size: 13px; font-weight: 600; color: #6b7280; text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 10px; } .rg-check-item { display: flex; align-items: flex-start; gap: 10px; padding: 8px 12px; border-radius: 8px; margin-bottom: 4px; font-size: 13px; transition: background 0.15s ease; } .rg-check-item:hover { background: #f9fafb; } .rg-check-icon { width: 20px; height: 20px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; flex-shrink: 0; margin-top: 1px; } .rg-check-icon.pass { background: #dcfce7; color: #16a34a; } .rg-check-icon.fail { background: #fee2e2; color: #dc2626; } .rg-check-label { font-weight: 500; color: #374151; } .rg-check-detail { font-size: 12px; color: #9ca3af; margin-top: 2px; } .rg-skills-list { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 20px; } .rg-skill { padding: 4px 12px; background: #eef2ff; color: #4f46e5; border-radius: 20px; font-size: 12px; font-weight: 500; } .rg-score-bar { background: #f3f4f6; border-radius: 8px; height: 10px; overflow: hidden; margin-bottom: 20px; } .rg-score-fill { height: 100%; border-radius: 8px; transition: width 1s ease; } .rg-score-fill.high { background: linear-gradient(90deg, #10b981, #34d399); } .rg-score-fill.low { background: linear-gradient(90deg, #ef4444, #f87171); } .rg-score-fill.mid { background: linear-gradient(90deg, #f59e0b, #fbbf24); } .rg-submit-btn { width: 100%; padding: 14px; background: #10b981; color: white; border: none; border-radius: 10px; font-size: 15px; font-weight: 600; font-family: inherit; cursor: pointer; transition: all 0.15s ease; display: flex; align-items: center; justify-content: center; gap: 8px; } .rg-submit-btn:hover { background: #059669; } .rg-fail-message { text-align: center; padding: 16px; background: #fef2f2; border-radius: 10px; margin-bottom: 12px; } .rg-fail-message p { font-size: 14px; color: #991b1b; line-height: 1.5; margin-bottom: 12px; } .rg-review-btn { padding: 10px 20px; background: white; color: #6366f1; border: 1px solid #6366f1; border-radius: 8px; font-size: 13px; font-weight: 500; font-family: inherit; cursor: pointer; transition: all 0.15s ease; } .rg-review-btn:hover { background: #eef2ff; } .rg-footer { padding: 12px 28px 16px; text-align: center; border-top: 1px solid #f3f4f6; } .rg-footer a { font-size: 11px; color: #d1d5db; text-decoration: none; font-weight: 500; transition: color 0.15s ease; } .rg-footer a:hover { color: #9ca3af; } .rg-success-state { text-align: center; padding: 40px 24px; } .rg-success-icon { width: 64px; height: 64px; background: #dcfce7; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto 16px; font-size: 28px; } .rg-success-state h4 { font-size: 18px; font-weight: 700; color: #111827; margin-bottom: 8px; } .rg-success-state p { font-size: 14px; color: #6b7280; line-height: 1.5; } .rg-review-submitted { text-align: center; padding: 32px 24px; } .rg-review-submitted h4 { font-size: 16px; font-weight: 600; color: #111827; margin-bottom: 8px; } .rg-review-submitted p { font-size: 13px; color: #6b7280; } /* Fade animation */ .rg-fade-in { animation: rg-fadeIn 0.4s ease forwards; } @keyframes rg-fadeIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } } `; document.head.appendChild(style); } function createWidget(container) { const jobId = container.getAttribute('data-job-id') || 'default'; container.innerHTML = ''; const widget = document.createElement('div'); widget.className = 'rg-widget'; const card = document.createElement('div'); card.className = 'rg-card'; // Header card.innerHTML = `
Upload your resume for instant eligibility screening. We'll check your qualifications against the job requirements and let you know if you're a match.
or browse files
PDF, DOCX, or TXT — Max 10MB
Our AI is reviewing your qualifications
Your application has been received and will be reviewed by our recruiting team. You'll hear from us within 5 business days.
Your application has been submitted for manual review. A recruiter will evaluate your resume and reach out within 3-5 business days.