{"id":101,"date":"2026-05-27T03:53:39","date_gmt":"2026-05-27T03:53:39","guid":{"rendered":"https:\/\/getmyjob.me\/?page_id=101"},"modified":"2026-05-27T06:35:08","modified_gmt":"2026-05-27T06:35:08","slug":"resume-analyzer","status":"publish","type":"page","link":"https:\/\/getmyjob.me\/resume-analyzer\/","title":{"rendered":"Resume AI"},"content":{"rendered":"\n<style data-wp-block-html=\"css\">\n  :root {\n    --bg: #f0f2f1;\n    --surface: #ffffff;\n    --surface2: #f6f7f7;\n    --border: #ccd0d4;\n    --border2: #8c8f94;\n    --accent: #2271b1;\n    --accent-hover: #135e96;\n    --accent2: #00a32a;\n    --accent3: #d63638;\n    --text: #1d2327;\n    --muted: #646970;\n    --card-bg: #ffffff;\n    --gold: #dba617;\n    --r: 4px;\n  }\n\n  * { box-sizing: border-box; margin: 0; padding: 0; }\n\n  body {\n    font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Oxygen-Sans, Ubuntu, Cantarell, \"Helvetica Neue\", sans-serif;\n    background: var(--bg);\n    color: var(--text);\n    min-height: 100vh;\n    overflow-x: hidden;\n  }\n\n  \/* \u2500\u2500 HEADER (removed) \u2500\u2500 *\/\n\n  \/* \u2500\u2500 HERO \u2500\u2500 *\/\n  .hero {\n    text-align: left;\n    max-width: 1100px;\n    margin: 2rem auto 1rem;\n    padding: 0 2rem;\n    position: relative;\n  }\n  .hero-badge {\n    display: inline-flex; align-items: center; gap: 6px;\n    background: #e7f5fe; border: 1px solid #b8e6fa;\n    border-radius: 4px; padding: 4px 10px;\n    font-size: 0.75rem; color: #016087; margin-bottom: 1rem;\n  }\n  .hero h1 {\n    font-size: 2rem;\n    font-weight: 600; line-height: 1.2;\n    margin-bottom: 0.5rem;\n    color: var(--text);\n  }\n  .hero p { color: var(--muted); font-size: 0.95rem; max-width: 750px; line-height: 1.6; }\n  .hero-steps { display: none; }\n\n  \/* \u2500\u2500 TABS \u2500\u2500 *\/\n  .tabs {\n    display: flex; gap: 0; max-width: 1100px; margin: 2rem auto 1.5rem;\n    border-bottom: 1px solid var(--border);\n    padding: 0 2rem;\n  }\n  .tab {\n    padding: 10px 18px; font-size: 0.9rem; font-weight: 600;\n    cursor: pointer; color: var(--muted); border: none; background: none;\n    border-bottom: 3px solid transparent; margin-bottom: -1px;\n    transition: all 0.2s;\n  }\n  .tab.active { color: var(--accent); border-bottom-color: var(--accent); }\n  .tab:hover:not(.active) { color: var(--text); }\n\n  \/* \u2500\u2500 CONTAINER \u2500\u2500 *\/\n  .container { max-width: 1100px; margin: 0 auto; padding: 0 2rem 4rem; }\n\n  \/* \u2500\u2500 PANEL \u2500\u2500 *\/\n  .panel {\n    display: none; animation: fadeIn 0.25s ease;\n    background: #ffffff;\n    border: 1px solid var(--border);\n    box-shadow: 0 1px 3px rgba(0,0,0,0.04);\n    border-radius: var(--r);\n    padding: 2rem;\n  }\n  .panel.active { display: block; }\n  @keyframes fadeIn { from{opacity:0;transform:translateY(4px)} to{opacity:1;transform:translateY(0)} }\n\n  \/* \u2500\u2500 TEMPLATE GRID \u2500\u2500 *\/\n  .section-label {\n    font-size: 0.85rem; font-weight: 600;\n    text-transform: none; color: var(--text); margin-bottom: 1.25rem;\n    border-bottom: 1px solid var(--border);\n    padding-bottom: 0.5rem;\n  }\n  .template-grid {\n    display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem;\n    margin-bottom: 2rem;\n  }\n  .template-card {\n    background: #ffffff;\n    border: 1px solid var(--border);\n    border-radius: var(--r); cursor: pointer;\n    overflow: hidden; transition: all 0.2s;\n    position: relative;\n  }\n  .template-card:hover { border-color: var(--accent); }\n  .template-card.selected { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }\n  .template-card.selected::after {\n    content: '\u2713 Selected';\n    position: absolute; top: 8px; right: 8px;\n    background: var(--accent); color: #fff;\n    font-size: 0.65rem; font-weight: 600;\n    padding: 3px 8px; border-radius: 4px;\n  }\n  .tmpl-preview {\n    height: 160px; padding: 12px; display: flex; flex-direction: column; gap: 4px;\n    overflow: hidden;\n    background: #f0f0f1;\n  }\n  \/* Template 1: Modern Minimalist *\/\n  .tmpl-1 { background: #ffffff; border-bottom: 1px solid var(--border); }\n  .tmpl-1 .t-header { height: 30px; background: #1d2327; border-radius: 3px; }\n  .tmpl-1 .t-line { height: 5px; background: #ccd0d4; border-radius: 2px; width: 80%; }\n  .tmpl-1 .t-line.w60 { width: 60%; }\n  .tmpl-1 .t-line.w40 { width: 40%; }\n  .tmpl-1 .t-dot { height: 5px; background: var(--accent); border-radius: 2px; width: 30%; }\n  .tmpl-1 .t-divider { height: 1px; background: #ccd0d4; margin: 4px 0; }\n\n  \/* Template 2: Creative Dark *\/\n  .tmpl-2 { background: #1d2327; border-bottom: 1px solid var(--border); }\n  .tmpl-2 .t-sidebar { position: absolute; left: 0; top: 0; bottom: 0; width: 40%; background: var(--accent); }\n  .tmpl-2 .t-main { position: absolute; right: 0; top: 0; bottom: 0; width: 58%; padding: 8px; }\n  .tmpl-2 .t-circle { width: 28px; height: 28px; border-radius: 50%; background: rgba(255,255,255,0.3); margin: 8px auto 6px; }\n  .tmpl-2 .t-ls { height: 4px; background: rgba(255,255,255,0.5); border-radius: 2px; margin: 3px 6px; }\n  .tmpl-2 .t-ml { height: 5px; background: rgba(255,255,255,0.15); border-radius: 2px; margin: 3px 0; }\n  .tmpl-2 .t-ml.bold { background: rgba(255,255,255,0.4); width: 60%; }\n  .tmpl-2 .t-badge { height: 8px; background: rgba(255,255,255,0.25); border-radius: 3px; width: 40%; margin: 3px 0; }\n\n  \/* Template 3: Executive Classic *\/\n  .tmpl-3 { background: #fdfdfd; border-bottom: 1px solid var(--border); }\n  .tmpl-3 .t-topband { height: 6px; background: #1d2327; border-radius: 0; }\n  .tmpl-3 .t-name { height: 16px; background: #1d2327; width: 70%; border-radius: 2px; margin: 6px auto 3px; }\n  .tmpl-3 .t-subtitle { height: 6px; background: var(--accent); width: 50%; border-radius: 2px; margin: 0 auto 5px; }\n  .tmpl-3 .t-twoCol { display: flex; gap: 8px; margin: 3px 0; }\n  .tmpl-3 .t-twoCol .l { height: 4px; border-radius: 2px; background: #ccd0d4; flex: 1; }\n  .tmpl-3 .t-twoCol .r { height: 4px; border-radius: 2px; background: #ccd0d4; flex: 1; }\n  .tmpl-3 .t-section { height: 6px; background: #1d2327; width: 35%; border-radius: 2px; margin: 6px 0 3px; }\n  .tmpl-3 .t-line { height: 4px; background: #e0e0e0; border-radius: 2px; margin: 2px 0; }\n\n  .tmpl-meta { padding: 10px 12px; }\n  .tmpl-name { font-size: 0.85rem; font-weight: 600; color: var(--text); }\n  .tmpl-desc { font-size: 0.75rem; color: var(--muted); margin-top: 2px; }\n\n  \/* \u2500\u2500 FORM GRID \u2500\u2500 *\/\n  .form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; margin-bottom: 1.5rem; }\n  .form-group { display: flex; flex-direction: column; gap: 6px; }\n  .form-group.full { grid-column: 1\/-1; }\n  .form-group label { font-size: 0.82rem; font-weight: 600; color: var(--text); }\n  .form-group input, .form-group textarea, .form-group select {\n    background: #ffffff;\n    border: 1px solid var(--border);\n    border-radius: 4px; color: var(--text);\n    font-family: inherit;\n    font-size: 0.88rem; padding: 8px 12px;\n    outline: none; transition: border-color 0.1s ease-in-out;\n    width: 100%;\n  }\n  .form-group input:focus, .form-group textarea:focus, .form-group select:focus {\n    border-color: var(--accent);\n    box-shadow: 0 0 0 1px var(--accent);\n  }\n  .form-group textarea { resize: vertical; min-height: 90px; }\n  .form-group select option { background: #ffffff; }\n\n  \/* \u2500\u2500 SKILL TAGS \u2500\u2500 *\/\n  .skill-input-row { display: flex; gap: 8px; margin-bottom: 0.5rem; }\n  .skill-input-row input { flex: 1; }\n  .skill-tags { display: flex; flex-wrap: wrap; gap: 6px; min-height: 32px; }\n  .skill-tag {\n    background: #f0f6fc; border: 1px solid #c8dcf0;\n    border-radius: 4px; padding: 4px 10px;\n    font-size: 0.78rem; color: var(--accent);\n    display: flex; align-items: center; gap: 6px;\n  }\n  .skill-tag .remove { cursor: pointer; opacity: 0.6; }\n  .skill-tag .remove:hover { opacity: 1; }\n\n  \/* \u2500\u2500 EXPERIENCE ENTRIES \u2500\u2500 *\/\n  .exp-entry {\n    background: var(--surface2);\n    border: 1px solid var(--border);\n    border-radius: var(--r); padding: 1.25rem;\n    margin-bottom: 1rem; position: relative;\n  }\n  .exp-entry-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1rem; }\n  .exp-entry-title { font-size: 0.85rem; font-weight: 600; color: var(--text); }\n  .remove-btn {\n    background: #fcf0f0; border: 1px solid #f5c2c2;\n    border-radius: 4px; padding: 4px 10px; font-size: 0.75rem; color: var(--accent3);\n    cursor: pointer; transition: all 0.2s;\n  }\n  .remove-btn:hover { background: var(--accent3); color: #ffffff; border-color: var(--accent3); }\n  .add-btn {\n    background: #ffffff; border: 1px dashed var(--border);\n    border-radius: 4px; padding: 10px; width: 100%; text-align: center;\n    font-size: 0.85rem; color: var(--accent); cursor: pointer;\n    margin-bottom: 1.5rem;\n    transition: all 0.2s;\n  }\n  .add-btn:hover { background: #f6f7f7; border-color: var(--accent); }\n\n  \/* \u2500\u2500 ACTIONS \u2500\u2500 *\/\n  .action-bar { display: flex; gap: 12px; margin-top: 1.5rem; flex-wrap: wrap; }\n  .btn {\n    padding: 10px 20px; border-radius: 4px;\n    font-size: 0.88rem; font-weight: 600; cursor: pointer;\n    transition: all 0.2s;\n    border: 1px solid transparent;\n  }\n  .btn-primary { background: var(--accent); color: #fff; }\n  .btn-primary:hover { background: var(--accent-hover); }\n  .btn-secondary { background: #f6f7f7; border: 1px solid var(--border); color: var(--accent); }\n  .btn-secondary:hover { background: #f0f6fc; border-color: var(--accent); }\n  .btn-success { background: var(--accent2); color: #ffffff; }\n  .btn-success:hover { background: #008a20; }\n\n  \/* \u2500\u2500 RESUME PREVIEW \u2500\u2500 *\/\n  .preview-wrapper {\n    background: #fff; border-radius: var(--r); overflow: hidden;\n    box-shadow: 0 4px 12px rgba(0,0,0,0.1);\n    border: 1px solid var(--border);\n    min-height: 600px; position: relative;\n  }\n\n  \/* TEMPLATE STYLES: Modern Minimalist *\/\n  .resume-modern { padding: 40px 44px; color: #1a1a2e; }\n  .resume-modern .r-header { border-bottom: 3px solid var(--accent); padding-bottom: 20px; margin-bottom: 22px; }\n  .resume-modern .r-name { font-size: 2rem; font-weight: 700; color: #1d2327; }\n  .resume-modern .r-title { font-size: 0.95rem; color: var(--accent); font-weight: 500; margin: 4px 0 8px; }\n  .resume-modern .r-contact { display: flex; gap: 16px; flex-wrap: wrap; font-size: 0.78rem; color: #555; }\n  .resume-modern .r-section { margin-bottom: 20px; }\n  .resume-modern .r-sec-title { font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.12em; color: var(--accent); margin-bottom: 10px; }\n  .resume-modern .r-exp-title { font-weight: 600; font-size: 0.9rem; color: #1d2327; }\n  .resume-modern .r-exp-sub { font-size: 0.78rem; color: #646970; margin: 2px 0 6px; }\n  .resume-modern .r-exp-desc { font-size: 0.82rem; color: #3c434a; line-height: 1.6; }\n  .resume-modern .r-skills { display: flex; flex-wrap: wrap; gap: 6px; }\n  .resume-modern .r-skill { background: #f0f6fc; color: var(--accent); border-radius: 4px; padding: 4px 10px; font-size: 0.75rem; font-weight: 500; }\n\n  \/* TEMPLATE STYLES: Creative Dark *\/\n  .resume-creative { display: flex; color: #fff; min-height: 600px; }\n  .resume-creative .r-sidebar { width: 38%; background: var(--accent); padding: 32px 24px; }\n  .resume-creative .r-main { flex: 1; background: #1d2327; padding: 32px 28px; }\n  .resume-creative .r-avatar { width: 70px; height: 70px; border-radius: 50%; background: rgba(255,255,255,0.2); display: flex; align-items: center; justify-content: center; font-size: 1.6rem; font-weight: 700; margin: 0 auto 14px; }\n  .resume-creative .r-name { font-size: 1.4rem; font-weight: 700; text-align: center; }\n  .resume-creative .r-title { font-size: 0.8rem; opacity: 0.8; text-align: center; margin-bottom: 20px; }\n  .resume-creative .r-sec-title { font-size: 0.65rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.12em; opacity: 0.7; margin: 16px 0 8px; }\n  .resume-creative .r-contact-item { font-size: 0.75rem; opacity: 0.9; margin: 5px 0; }\n  .resume-creative .r-skill-bar { background: rgba(255,255,255,0.15); border-radius: 999px; height: 5px; margin-top: 4px; }\n  .resume-creative .r-skill-fill { height: 5px; background: #fff; border-radius: 999px; }\n  .resume-creative .r-skill-item { margin: 8px 0; }\n  .resume-creative .r-skill-name { font-size: 0.75rem; }\n  .resume-creative .r-msec-title { font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: #72aee6; margin: 20px 0 10px; }\n  .resume-creative .r-msec-title:first-child { margin-top: 0; }\n  .resume-creative .r-exp-title { font-weight: 600; font-size: 0.9rem; }\n  .resume-creative .r-exp-sub { font-size: 0.75rem; opacity: 0.6; margin: 3px 0 6px; }\n  .resume-creative .r-exp-desc { font-size: 0.82rem; opacity: 0.85; line-height: 1.6; }\n  .resume-creative .r-exp-entry { margin-bottom: 14px; }\n\n  \/* TEMPLATE STYLES: Executive Classic *\/\n  .resume-executive { padding: 0; color: #2c2c2c; }\n  .resume-executive .r-topband { height: 8px; background: linear-gradient(90deg, #1d2327, var(--accent)); }\n  .resume-executive .r-header { padding: 28px 44px 20px; text-align: center; border-bottom: 2px solid #1d2327; }\n  .resume-executive .r-name { font-size: 1.8rem; font-weight: 700; color: #1d2327; letter-spacing: 0.05em; }\n  .resume-executive .r-title { font-size: 0.85rem; color: var(--accent); font-weight: 600; text-transform: uppercase; letter-spacing: 0.1em; margin: 5px 0 10px; }\n  .resume-executive .r-contact { display: flex; justify-content: center; gap: 20px; font-size: 0.75rem; color: #666; }\n  .resume-executive .r-body { display: grid; grid-template-columns: 1fr 2fr; gap: 0; }\n  .resume-executive .r-left { background: #f6f7f7; padding: 24px 20px; border-right: 1px solid #ccd0d4; }\n  .resume-executive .r-right { padding: 24px 28px; }\n  .resume-executive .r-sec-title { font-size: 0.68rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.12em; color: #1d2327; padding-bottom: 6px; border-bottom: 2px solid var(--accent); margin-bottom: 12px; margin-top: 18px; }\n  .resume-executive .r-sec-title:first-child { margin-top: 0; }\n  .resume-executive .r-skill-item { font-size: 0.78rem; color: #444; margin: 5px 0; display: flex; align-items: center; gap: 6px; }\n  .resume-executive .r-skill-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); flex-shrink: 0; }\n  .resume-executive .r-exp-title { font-weight: 600; font-size: 0.88rem; color: #1d2327; }\n  .resume-executive .r-exp-sub { font-size: 0.75rem; color: #888; margin: 2px 0 6px; }\n  .resume-executive .r-exp-desc { font-size: 0.82rem; color: #444; line-height: 1.65; }\n  .resume-executive .r-exp-entry { margin-bottom: 14px; }\n\n  \/* \u2500\u2500 ANALYZE PANEL \u2500\u2500 *\/\n  .upload-zone {\n    border: 2px dashed var(--border); border-radius: var(--r);\n    padding: 2.5rem 2rem; text-align: center; cursor: pointer;\n    background: var(--surface2);\n    transition: all 0.2s; margin-bottom: 1.5rem;\n  }\n  .upload-zone:hover, .upload-zone.drag { border-color: var(--accent); background: #f0f6fc; }\n  .upload-icon { font-size: 2.2rem; margin-bottom: 0.75rem; color: var(--accent); }\n  .upload-zone h3 { font-size: 1rem; margin-bottom: 0.3rem; color: var(--text); }\n  .upload-zone p { font-size: 0.82rem; color: var(--muted); }\n\n  .analyze-form-area { background: #ffffff; border: 1px solid var(--border); border-radius: var(--r); padding: 1.5rem; margin-bottom: 1.5rem; }\n\n  \/* \u2500\u2500 SCORE CARDS \u2500\u2500 *\/\n  .score-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; margin-bottom: 1.5rem; }\n  .score-card {\n    background: var(--surface2); border: 1px solid var(--border);\n    border-radius: var(--r); padding: 1rem; text-align: center;\n  }\n  .score-num { font-size: 1.8rem; font-weight: 700; }\n  .score-num.green { color: var(--accent2); }\n  .score-num.yellow { color: var(--gold); }\n  .score-num.red { color: var(--accent3); }\n  .score-label { font-size: 0.75rem; color: var(--muted); margin-top: 4px; }\n  .score-bar { height: 4px; border-radius: 2px; background: var(--border); margin-top: 8px; overflow: hidden; }\n  .score-fill { height: 100%; border-radius: 2px; transition: width 1s ease; }\n  .score-fill.green { background: var(--accent2); }\n  .score-fill.yellow { background: var(--gold); }\n  .score-fill.red { background: var(--accent3); }\n\n  \/* \u2500\u2500 FEEDBACK \u2500\u2500 *\/\n  .feedback-section { background: #ffffff; border: 1px solid var(--border); border-radius: var(--r); padding: 1.5rem; margin-bottom: 1rem; }\n  .feedback-header { display: flex; align-items: center; gap: 8px; margin-bottom: 1rem; }\n  .feedback-icon { font-size: 1.2rem; }\n  .feedback-title { font-size: 0.95rem; font-weight: 600; color: var(--text); }\n  .feedback-list { list-style: none; }\n  .feedback-list li {\n    display: flex; align-items: flex-start; gap: 8px;\n    font-size: 0.85rem; color: var(--text); padding: 8px 0;\n    border-bottom: 1px solid var(--bg);\n  }\n  .feedback-list li:last-child { border-bottom: none; }\n  .feedback-list li::before { content: attr(data-icon); flex-shrink: 0; margin-top: 1px; }\n\n  \/* \u2500\u2500 LOADER \u2500\u2500 *\/\n  .loader {\n    display: none; text-align: center; padding: 2.5rem;\n  }\n  .loader.show { display: block; }\n  .spinner {\n    width: 40px; height: 40px; border: 3px solid var(--bg);\n    border-top-color: var(--accent); border-radius: 50%;\n    animation: spin 0.8s linear infinite; margin: 0 auto 1rem;\n  }\n  @keyframes spin { to { transform: rotate(360deg); } }\n  .loader-text { color: var(--muted); font-size: 0.88rem; }\n\n  \/* \u2500\u2500 RESPONSIVE: TABLET (\u2264 900px) \u2500\u2500 *\/\n  @media (max-width: 900px) {\n    .hero { padding: 0 1.25rem; margin: 1.5rem auto 0.75rem; }\n    .hero h1 { font-size: 1.75rem; }\n    .tabs { padding: 0 1.25rem; margin: 1.5rem auto 1rem; }\n    .container { padding: 0 1.25rem 3rem; }\n    .panel { padding: 1.5rem; }\n    .template-grid { grid-template-columns: repeat(2, 1fr); gap: 1rem; }\n    .score-grid { grid-template-columns: repeat(2, 1fr); }\n    .resume-modern { padding: 30px 28px; }\n    .resume-executive .r-header { padding: 22px 28px 16px; }\n    .resume-executive .r-right { padding: 20px 22px; }\n    .resume-executive .r-left { padding: 20px 16px; }\n  }\n\n  \/* \u2500\u2500 RESPONSIVE: MOBILE (\u2264 600px) \u2500\u2500 *\/\n  @media (max-width: 600px) {\n    .hero { padding: 0 1rem; margin: 1rem auto 0.5rem; }\n    .hero h1 { font-size: 1.35rem; }\n    .hero p { font-size: 0.85rem; }\n    .hero-badge { font-size: 0.7rem; padding: 3px 8px; margin-bottom: 0.6rem; }\n\n    .tabs { padding: 0 1rem; margin: 1rem auto 0.75rem; gap: 0; overflow-x: auto; -webkit-overflow-scrolling: touch; }\n    .tab { padding: 8px 12px; font-size: 0.8rem; white-space: nowrap; flex-shrink: 0; }\n\n    .container { padding: 0 0.75rem 2rem; }\n    .panel { padding: 1rem; }\n\n    .template-grid { grid-template-columns: 1fr; gap: 0.75rem; }\n    .tmpl-preview { height: 130px; }\n\n    .form-grid { grid-template-columns: 1fr; gap: 1rem; }\n    .form-group.full { grid-column: 1; }\n    .form-group label { font-size: 0.78rem; }\n    .form-group input, .form-group textarea, .form-group select { font-size: 0.85rem; padding: 8px 10px; }\n\n    .skill-input-row { flex-direction: column; gap: 6px; }\n    .skill-input-row .btn { width: 100%; }\n\n    .exp-entry { padding: 1rem; }\n    .exp-entry-header { flex-direction: column; align-items: flex-start; gap: 6px; }\n\n    .action-bar { flex-direction: column; gap: 8px; }\n    .action-bar .btn { width: 100%; text-align: center; }\n\n    .upload-zone { padding: 1.5rem 1rem; }\n    .upload-icon { font-size: 1.8rem; margin-bottom: 0.5rem; }\n    .upload-zone h3 { font-size: 0.9rem; }\n    .upload-zone p { font-size: 0.75rem; }\n\n    .analyze-form-area { padding: 1rem; }\n\n    .score-grid { grid-template-columns: 1fr 1fr; gap: 0.6rem; }\n    .score-card { padding: 0.75rem 0.5rem; }\n    .score-num { font-size: 1.4rem; }\n    .score-label { font-size: 0.7rem; }\n\n    .feedback-section { padding: 1rem; }\n    .feedback-list li { font-size: 0.8rem; padding: 6px 0; }\n\n    .section-label { font-size: 0.8rem; }\n\n    \/* Resume preview mobile fixes *\/\n    .preview-wrapper { min-height: 400px; }\n    .resume-modern { padding: 20px 16px; }\n    .resume-modern .r-name { font-size: 1.4rem; }\n    .resume-modern .r-contact { flex-direction: column; gap: 6px; font-size: 0.72rem; }\n\n    .resume-creative { flex-direction: column; min-height: auto; }\n    .resume-creative .r-sidebar { width: 100%; padding: 20px 16px; }\n    .resume-creative .r-main { padding: 20px 16px; }\n    .resume-creative .r-avatar { width: 54px; height: 54px; font-size: 1.2rem; }\n    .resume-creative .r-name { font-size: 1.15rem; }\n\n    .resume-executive .r-header { padding: 16px 16px 12px; }\n    .resume-executive .r-name { font-size: 1.3rem; }\n    .resume-executive .r-contact { flex-direction: column; gap: 4px; align-items: center; font-size: 0.72rem; }\n    .resume-executive .r-body { grid-template-columns: 1fr; }\n    .resume-executive .r-left { border-right: none; border-bottom: 1px solid #ccd0d4; padding: 16px; }\n    .resume-executive .r-right { padding: 16px; }\n  }\n\n  .hidden { display: none !important; }\n\n  \/* API key notice *\/\n  .api-notice {\n    background: #fff8e5; border: 1px solid #f1c40f;\n    border-radius: 4px; padding: 10px 14px; font-size: 0.82rem; color: #856404;\n    margin-bottom: 1.5rem; display: flex; gap: 8px; align-items: flex-start;\n  }\n<\/style>\n\n<script data-wp-block-html=\"js\">\n\/\/ \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n\/\/ STATE\n\/\/ \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\nlet selectedTemplate = 1;\nlet skills = [];\nlet entryCount = { 'exp-entries': 1, 'edu-entries': 1 };\n\n\/\/ \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n\/\/ TAB SWITCHING\n\/\/ \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\nfunction switchTab(tab) {\n  document.querySelectorAll('.panel').forEach(p => p.classList.remove('active'));\n  document.querySelectorAll('.tab').forEach(t => t.classList.remove('active'));\n  document.querySelectorAll('.nav-pill').forEach(t => t.classList.remove('active'));\n  document.getElementById('panel-' + tab).classList.add('active');\n  document.getElementById('tab-' + tab).classList.add('active');\n  document.querySelectorAll('.nav-pill').forEach(p => {\n    if (p.textContent.toLowerCase().includes(tab === 'builder' ? 'build' : 'analyze')) p.classList.add('active');\n  });\n}\n\n\/\/ \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n\/\/ TEMPLATE SELECTION\n\/\/ \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\nfunction selectTemplate(n) {\n  selectedTemplate = n;\n  document.querySelectorAll('.template-card').forEach(c => c.classList.remove('selected'));\n  document.getElementById('tmpl-' + n).classList.add('selected');\n}\n\n\/\/ \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n\/\/ SKILLS\n\/\/ \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\nfunction addSkillOnEnter(e) { if (e.key === 'Enter') { e.preventDefault(); addSkill(); } }\nfunction addSkill() {\n  const input = document.getElementById('skill-input');\n  const val = input.value.trim();\n  if (!val || skills.includes(val)) { input.value = ''; return; }\n  skills.push(val);\n  renderSkills();\n  input.value = '';\n}\nfunction removeSkill(s) {\n  skills = skills.filter(x => x !== s);\n  renderSkills();\n}\nfunction renderSkills() {\n  document.getElementById('skill-tags').innerHTML = skills.map(s =>\n    `<div class=\"skill-tag\">${s}<span class=\"remove\" onclick=\"removeSkill('${s}')\">\u2715<\/span><\/div>`\n  ).join('');\n}\n\n\/\/ \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n\/\/ DYNAMIC ENTRIES\n\/\/ \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\nfunction addEntry(containerId, label) {\n  entryCount[containerId] = (entryCount[containerId] || 0) + 1;\n  const n = entryCount[containerId];\n  const container = document.getElementById(containerId);\n  const div = document.createElement('div');\n  div.className = 'exp-entry';\n  if (containerId === 'exp-entries') {\n    div.innerHTML = `<div class=\"exp-entry-header\"><span class=\"exp-entry-title\">${label} #${n}<\/span><button class=\"remove-btn\" onclick=\"removeEntry(this,'${containerId}')\">Remove<\/button><\/div>\n    <div class=\"form-grid\">\n      <div class=\"form-group\"><label>Job Title<\/label><input type=\"text\" name=\"exp-jobtitle\" placeholder=\"Software Engineer\" \/><\/div>\n      <div class=\"form-group\"><label>Company<\/label><input type=\"text\" name=\"exp-company\" placeholder=\"Tech Corp\" \/><\/div>\n      <div class=\"form-group\"><label>Duration<\/label><input type=\"text\" name=\"exp-duration\" placeholder=\"Jan 2022 \u2013 Present\" \/><\/div>\n      <div class=\"form-group\"><label>Location<\/label><input type=\"text\" name=\"exp-loc\" placeholder=\"Hyderabad\" \/><\/div>\n      <div class=\"form-group full\"><label>Description<\/label><textarea name=\"exp-desc\" rows=\"2\" placeholder=\"\u2022 Led development of...\"><\/textarea><\/div>\n    <\/div>`;\n  } else {\n    div.innerHTML = `<div class=\"exp-entry-header\"><span class=\"exp-entry-title\">${label} #${n}<\/span><button class=\"remove-btn\" onclick=\"removeEntry(this,'${containerId}')\">Remove<\/button><\/div>\n    <div class=\"form-grid\">\n      <div class=\"form-group\"><label>Degree<\/label><input type=\"text\" name=\"edu-degree\" placeholder=\"B.Tech Computer Science\" \/><\/div>\n      <div class=\"form-group\"><label>Institution<\/label><input type=\"text\" name=\"edu-inst\" placeholder=\"JNTU Hyderabad\" \/><\/div>\n      <div class=\"form-group\"><label>Year<\/label><input type=\"text\" name=\"edu-year\" placeholder=\"2018 \u2013 2022\" \/><\/div>\n      <div class=\"form-group\"><label>Grade \/ CGPA<\/label><input type=\"text\" name=\"edu-grade\" placeholder=\"8.5 CGPA\" \/><\/div>\n    <\/div>`;\n  }\n  container.appendChild(div);\n}\nfunction removeEntry(btn, containerId) {\n  const container = document.getElementById(containerId);\n  if (container.children.length <= 1) return;\n  btn.closest('.exp-entry').remove();\n}\n\n\/\/ \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n\/\/ COLLECT FORM DATA\n\/\/ \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\nfunction collectFormData() {\n  const get = id => document.getElementById(id)?.value.trim() || '';\n\n  const expEntries = [...document.querySelectorAll('#exp-entries .exp-entry')].map(el => ({\n    title: el.querySelector('[name=\"exp-jobtitle\"]')?.value || '',\n    company: el.querySelector('[name=\"exp-company\"]')?.value || '',\n    duration: el.querySelector('[name=\"exp-duration\"]')?.value || '',\n    location: el.querySelector('[name=\"exp-loc\"]')?.value || '',\n    desc: el.querySelector('[name=\"exp-desc\"]')?.value || ''\n  }));\n\n  const eduEntries = [...document.querySelectorAll('#edu-entries .exp-entry')].map(el => ({\n    degree: el.querySelector('[name=\"edu-degree\"]')?.value || '',\n    institution: el.querySelector('[name=\"edu-inst\"]')?.value || '',\n    year: el.querySelector('[name=\"edu-year\"]')?.value || '',\n    grade: el.querySelector('[name=\"edu-grade\"]')?.value || ''\n  }));\n\n  return {\n    name: get('f-name'),\n    title: get('f-title'),\n    email: get('f-email'),\n    phone: get('f-phone'),\n    location: get('f-location'),\n    linkedin: get('f-linkedin'),\n    summary: get('f-summary'),\n    skills,\n    experience: expEntries,\n    education: eduEntries\n  };\n}\n\n\/\/ \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n\/\/ GENERATE RESUME HTML (TEMPLATE-BASED)\n\/\/ \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\nfunction generateResume() {\n  const d = collectFormData();\n  let html = '';\n\n  if (selectedTemplate === 1) html = renderModern(d);\n  else if (selectedTemplate === 2) html = renderCreative(d);\n  else html = renderExecutive(d);\n\n  document.getElementById('resume-preview').innerHTML = html;\n  document.getElementById('preview-area').style.display = 'block';\n  document.getElementById('preview-area').scrollIntoView({ behavior: 'smooth', block: 'start' });\n}\n\nfunction renderModern(d) {\n  const expHtml = d.experience.filter(e => e.title || e.company).map(e => `\n    <div style=\"margin-bottom:14px\">\n      <div class=\"r-exp-title\">${e.title}<\/div>\n      <div class=\"r-exp-sub\">${[e.company, e.location, e.duration].filter(Boolean).join(' \u2022 ')}<\/div>\n      <div class=\"r-exp-desc\">${e.desc.replace(\/\\n\/g,'<br>')}<\/div>\n    <\/div>`).join('');\n\n  const eduHtml = d.education.filter(e => e.degree || e.institution).map(e => `\n    <div style=\"margin-bottom:10px\">\n      <div class=\"r-exp-title\">${e.degree}<\/div>\n      <div class=\"r-exp-sub\">${[e.institution, e.year, e.grade].filter(Boolean).join(' \u2022 ')}<\/div>\n    <\/div>`).join('');\n\n  const skillsHtml = d.skills.length ? d.skills.map(s => `<div class=\"r-skill\">${s}<\/div>`).join('') : '';\n\n  return `<div class=\"resume-modern\">\n    <div class=\"r-header\">\n      <div class=\"r-name\">${d.name || 'Your Name'}<\/div>\n      <div class=\"r-title\">${d.title || 'Professional Title'}<\/div>\n      <div class=\"r-contact\">\n        ${d.email ? `<span>\u2709 ${d.email}<\/span>` : ''}\n        ${d.phone ? `<span>\ud83d\udcde ${d.phone}<\/span>` : ''}\n        ${d.location ? `<span>\ud83d\udccd ${d.location}<\/span>` : ''}\n        ${d.linkedin ? `<span>\ud83d\udd17 ${d.linkedin}<\/span>` : ''}\n      <\/div>\n    <\/div>\n    ${d.summary ? `<div class=\"r-section\"><div class=\"r-sec-title\">Profile<\/div><div class=\"r-exp-desc\">${d.summary}<\/div><\/div>` : ''}\n    ${expHtml ? `<div class=\"r-section\"><div class=\"r-sec-title\">Experience<\/div>${expHtml}<\/div>` : ''}\n    ${eduHtml ? `<div class=\"r-section\"><div class=\"r-sec-title\">Education<\/div>${eduHtml}<\/div>` : ''}\n    ${skillsHtml ? `<div class=\"r-section\"><div class=\"r-sec-title\">Skills<\/div><div class=\"r-skills\">${skillsHtml}<\/div><\/div>` : ''}\n  <\/div>`;\n}\n\nfunction renderCreative(d) {\n  const initials = (d.name || 'YN').split(' ').map(w => w[0]).slice(0,2).join('').toUpperCase();\n\n  const expHtml = d.experience.filter(e => e.title || e.company).map(e => `\n    <div class=\"r-exp-entry\">\n      <div class=\"r-exp-title\">${e.title}<\/div>\n      <div class=\"r-exp-sub\">${[e.company, e.duration].filter(Boolean).join(' \u2022 ')}<\/div>\n      <div class=\"r-exp-desc\">${e.desc.replace(\/\\n\/g,'<br>')}<\/div>\n    <\/div>`).join('');\n\n  const eduHtml = d.education.filter(e => e.degree || e.institution).map(e => `\n    <div class=\"r-exp-entry\">\n      <div class=\"r-exp-title\">${e.degree}<\/div>\n      <div class=\"r-exp-sub\">${[e.institution, e.year].filter(Boolean).join(' \u2022 ')}<\/div>\n    <\/div>`).join('');\n\n  const skillsHtml = d.skills.map((s, i) => `\n    <div class=\"r-skill-item\">\n      <div class=\"r-skill-name\">${s}<\/div>\n      <div class=\"r-skill-bar\"><div class=\"r-skill-fill\" style=\"width:${70 + (i%3)*10}%\"><\/div><\/div>\n    <\/div>`).join('');\n\n  return `<div class=\"resume-creative\">\n    <div class=\"r-sidebar\">\n      <div class=\"r-avatar\">${initials}<\/div>\n      <div class=\"r-name\">${d.name || 'Your Name'}<\/div>\n      <div class=\"r-title\">${d.title || 'Professional Title'}<\/div>\n      <div class=\"r-sec-title\">Contact<\/div>\n      ${d.email ? `<div class=\"r-contact-item\">\u2709 ${d.email}<\/div>` : ''}\n      ${d.phone ? `<div class=\"r-contact-item\">\ud83d\udcde ${d.phone}<\/div>` : ''}\n      ${d.location ? `<div class=\"r-contact-item\">\ud83d\udccd ${d.location}<\/div>` : ''}\n      ${d.linkedin ? `<div class=\"r-contact-item\">\ud83d\udd17 ${d.linkedin}<\/div>` : ''}\n      ${skillsHtml ? `<div class=\"r-sec-title\">Skills<\/div>${skillsHtml}` : ''}\n    <\/div>\n    <div class=\"r-main\">\n      ${d.summary ? `<div class=\"r-msec-title\">About Me<\/div><div class=\"r-exp-desc\" style=\"opacity:0.85;font-size:0.8rem;line-height:1.65\">${d.summary}<\/div>` : ''}\n      ${expHtml ? `<div class=\"r-msec-title\">Experience<\/div>${expHtml}` : ''}\n      ${eduHtml ? `<div class=\"r-msec-title\">Education<\/div>${eduHtml}` : ''}\n    <\/div>\n  <\/div>`;\n}\n\nfunction renderExecutive(d) {\n  const expHtml = d.experience.filter(e => e.title || e.company).map(e => `\n    <div class=\"r-exp-entry\">\n      <div class=\"r-exp-title\">${e.title}<\/div>\n      <div class=\"r-exp-sub\">${[e.company, e.location, e.duration].filter(Boolean).join(' | ')}<\/div>\n      <div class=\"r-exp-desc\">${e.desc.replace(\/\\n\/g,'<br>')}<\/div>\n    <\/div>`).join('');\n\n  const eduHtml = d.education.filter(e => e.degree || e.institution).map(e => `\n    <div class=\"r-exp-entry\">\n      <div class=\"r-exp-title\">${e.degree}<\/div>\n      <div class=\"r-exp-sub\">${[e.institution, e.year, e.grade].filter(Boolean).join(' | ')}<\/div>\n    <\/div>`).join('');\n\n  const skillsHtml = d.skills.map(s => `\n    <div class=\"r-skill-item\"><span class=\"r-skill-dot\"><\/span>${s}<\/div>`).join('');\n\n  return `<div class=\"resume-executive\">\n    <div class=\"r-topband\"><\/div>\n    <div class=\"r-header\">\n      <div class=\"r-name\">${d.name || 'Your Name'}<\/div>\n      <div class=\"r-title\">${d.title || 'Professional Title'}<\/div>\n      <div class=\"r-contact\">\n        ${d.email ? `<span>${d.email}<\/span>` : ''}\n        ${d.phone ? `<span>${d.phone}<\/span>` : ''}\n        ${d.location ? `<span>${d.location}<\/span>` : ''}\n        ${d.linkedin ? `<span>${d.linkedin}<\/span>` : ''}\n      <\/div>\n    <\/div>\n    <div class=\"r-body\">\n      <div class=\"r-left\">\n        ${skillsHtml ? `<div class=\"r-sec-title\">Core Skills<\/div>${skillsHtml}` : ''}\n        ${eduHtml ? `<div class=\"r-sec-title\">Education<\/div>${eduHtml}` : ''}\n      <\/div>\n      <div class=\"r-right\">\n        ${d.summary ? `<div class=\"r-sec-title\">Executive Summary<\/div><div class=\"r-exp-desc\" style=\"font-size:0.8rem;line-height:1.7;color:#444;margin-bottom:14px\">${d.summary}<\/div>` : ''}\n        ${expHtml ? `<div class=\"r-sec-title\">Professional Experience<\/div>${expHtml}` : ''}\n      <\/div>\n    <\/div>\n  <\/div>`;\n}\n\n\/\/ \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n\/\/ DOWNLOAD\n\/\/ \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\nfunction downloadResume() {\n  const preview = document.getElementById('resume-preview');\n  if (!preview.innerHTML) { generateResume(); }\n  const d = collectFormData();\n  const head = `<!DOCTYPE html><html><head><meta charset=\"UTF-8\">\n  <title>${d.name || 'Resume'}<\/title>\n  <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Sora:wght@300;400;500;600;700&#038;display=swap\" rel=\"stylesheet\">\n  <style>\n    *{box-sizing:border-box;margin:0;padding:0}\n    body{font-family:'Sora',sans-serif;background:#fff;color:#1a1a2e}\n    ${document.querySelector('style').textContent}\n  <\/style><\/head><body>`;\n  const content = preview.innerHTML;\n  const blob = new Blob([head + content + '<\/body><\/html>'], { type: 'text\/html' });\n  const a = document.createElement('a');\n  a.href = URL.createObjectURL(blob);\n  a.download = (d.name || 'resume').toLowerCase().replace(\/\\s+\/, '-') + '-resume.html';\n  a.click();\n}\n\n\/\/ \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n\/\/ PDF.JS WORKER SETTING\n\/\/ \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n\/\/ Initialize PDF.js worker from CDN\nif (typeof pdfjsLib !== 'undefined') {\n  pdfjsLib.GlobalWorkerOptions.workerSrc = 'https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/pdf.js\/2.16.105\/pdf.worker.min.js';\n}\n\n\/\/ \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n\/\/ FILE UPLOAD AND TEXT EXTRACTION\n\/\/ \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\nfunction handleFileSelect(e) {\n  const file = e.target.files?.[0];\n  if (!file) return;\n  parseFile(file);\n}\n\nfunction showLoadingState(text) {\n  const loader = document.getElementById('analyze-loader');\n  if (loader) {\n    loader.querySelector('.loader-text').textContent = text;\n    loader.classList.add('show');\n  }\n}\n\nfunction hideLoadingState() {\n  const loader = document.getElementById('analyze-loader');\n  if (loader) {\n    loader.classList.remove('show');\n  }\n}\n\nfunction parseFile(file) {\n  const reader = new FileReader();\n  const fileType = file.name.split('.').pop().toLowerCase();\n  \n  showLoadingState('Extracting text from file...');\n\n  if (fileType === 'txt') {\n    reader.onload = function(e) {\n      document.getElementById('resume-text').value = e.target.result;\n      hideLoadingState();\n    };\n    reader.onerror = function() {\n      alert('Error reading TXT file.');\n      hideLoadingState();\n    };\n    reader.readAsText(file);\n  } else if (fileType === 'pdf') {\n    reader.onload = function(e) {\n      const typedarray = new Uint8Array(e.target.result);\n      pdfjsLib.getDocument(typedarray).promise.then(function(pdf) {\n        let maxPages = pdf.numPages;\n        let countPromises = [];\n        for (let i = 1; i <= maxPages; i++) {\n          countPromises.push(\n            pdf.getPage(i).then(function(page) {\n              return page.getTextContent().then(function(textContent) {\n                return textContent.items.map(item => item.str).join(' ');\n              });\n            })\n          );\n        }\n        Promise.all(countPromises).then(function(texts) {\n          document.getElementById('resume-text').value = texts.join('\\n\\n');\n          hideLoadingState();\n        }).catch(err => {\n          alert('Error extracting text from PDF: ' + err.message);\n          hideLoadingState();\n        });\n      }).catch(err => {\n        alert('Error loading PDF: ' + err.message);\n        hideLoadingState();\n      });\n    };\n    reader.onerror = function() {\n      alert('Error reading PDF file.');\n      hideLoadingState();\n    };\n    reader.readAsArrayBuffer(file);\n  } else if (fileType === 'docx') {\n    reader.onload = function(e) {\n      const arrayBuffer = e.target.result;\n      mammoth.extractRawText({ arrayBuffer: arrayBuffer })\n        .then(function(result) {\n          document.getElementById('resume-text').value = result.value;\n          hideLoadingState();\n        })\n        .catch(function(err) {\n          alert('Error extracting text from DOCX: ' + err.message);\n          hideLoadingState();\n        });\n    };\n    reader.onerror = function() {\n      alert('Error reading DOCX file.');\n      hideLoadingState();\n    };\n    reader.readAsArrayBuffer(file);\n  } else {\n    alert('Unsupported file type. Please upload a PDF, DOCX, or TXT file.');\n    hideLoadingState();\n  }\n}\n\n\/\/ \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n\/\/ PDF.JS WORKER SETTING\n\/\/ \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n\/\/ Initialize PDF.js worker from CDN\nif (typeof pdfjsLib !== 'undefined') {\n  pdfjsLib.GlobalWorkerOptions.workerSrc = 'https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/pdf.js\/2.16.105\/pdf.worker.min.js';\n}\n\n\/\/ \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n\/\/ FILE UPLOAD AND TEXT EXTRACTION\n\/\/ \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\nfunction handleFileSelect(e) {\n  const file = e.target.files?.[0];\n  if (!file) return;\n  parseFile(file);\n}\n\nfunction showLoadingState(text) {\n  const loader = document.getElementById('analyze-loader');\n  if (loader) {\n    loader.querySelector('.loader-text').textContent = text;\n    loader.classList.add('show');\n  }\n}\n\nfunction hideLoadingState() {\n  const loader = document.getElementById('analyze-loader');\n  if (loader) {\n    loader.classList.remove('show');\n  }\n}\n\nfunction parseFile(file) {\n  const reader = new FileReader();\n  const fileType = file.name.split('.').pop().toLowerCase();\n  \n  showLoadingState('Extracting text from file...');\n\n  if (fileType === 'txt') {\n    reader.onload = function(e) {\n      document.getElementById('resume-text').value = e.target.result;\n      hideLoadingState();\n    };\n    reader.onerror = function() {\n      alert('Error reading TXT file.');\n      hideLoadingState();\n    };\n    reader.readAsText(file);\n  } else if (fileType === 'pdf') {\n    reader.onload = function(e) {\n      const typedarray = new Uint8Array(e.target.result);\n      pdfjsLib.getDocument(typedarray).promise.then(function(pdf) {\n        let maxPages = pdf.numPages;\n        let countPromises = [];\n        for (let i = 1; i <= maxPages; i++) {\n          countPromises.push(\n            pdf.getPage(i).then(function(page) {\n              return page.getTextContent().then(function(textContent) {\n                return textContent.items.map(item => item.str).join(' ');\n              });\n            })\n          );\n        }\n        Promise.all(countPromises).then(function(texts) {\n          document.getElementById('resume-text').value = texts.join('\\n\\n');\n          hideLoadingState();\n        }).catch(err => {\n          alert('Error extracting text from PDF: ' + err.message);\n          hideLoadingState();\n        });\n      }).catch(err => {\n        alert('Error loading PDF: ' + err.message);\n        hideLoadingState();\n      });\n    };\n    reader.onerror = function() {\n      alert('Error reading PDF file.');\n      hideLoadingState();\n    };\n    reader.readAsArrayBuffer(file);\n  } else if (fileType === 'docx') {\n    reader.onload = function(e) {\n      const arrayBuffer = e.target.result;\n      mammoth.extractRawText({ arrayBuffer: arrayBuffer })\n        .then(function(result) {\n          document.getElementById('resume-text').value = result.value;\n          hideLoadingState();\n        })\n        .catch(function(err) {\n          alert('Error extracting text from DOCX: ' + err.message);\n          hideLoadingState();\n        });\n    };\n    reader.onerror = function() {\n      alert('Error reading DOCX file.');\n      hideLoadingState();\n    };\n    reader.readAsArrayBuffer(file);\n  } else {\n    alert('Unsupported file type. Please upload a PDF, DOCX, or TXT file.');\n    hideLoadingState();\n  }\n}\n\n\/\/ \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n\/\/ LOCAL SIMULATION FALLBACKS (When no API key is present or fetch fails)\n\/\/ \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n\nfunction generateMockAnalysis(resumeText, targetJob) {\n  const words = resumeText.toLowerCase();\n  const wordCount = resumeText.split(\/\\s+\/).filter(Boolean).length;\n  \n  let overall = 68;\n  if (wordCount > 180) overall += 8;\n  if (wordCount > 350) overall += 8;\n  if (words.includes('built') || words.includes('led') || words.includes('spearheaded') || words.includes('optimized')) overall += 6;\n  if (words.includes('linkedin') || words.includes('github') || words.includes('http')) overall += 4;\n  overall = Math.min(95, overall);\n  \n  let ats = Math.min(94, Math.floor(overall * 0.94 + (words.includes('skills') ? 6 : 0)));\n  let impact = Math.min(92, Math.floor(overall * 0.88 + (words.includes('\u2022') ? 8 : 0)));\n  let clarity = Math.min(96, Math.floor(overall * 1.02 - (wordCount > 650 ? 6 : 0)));\n\n  const strengths = [\n    \"Professional Presentation: Information is well-structured and follows a clean logical layout.\",\n    words.includes('\u2022') \n      ? \"Bulleted Achievements: Excellent use of bullet points to list individual job responsibilities.\"\n      : \"Information Order: Sequential layout is easy to read, but adding bullet points would increase readability.\",\n    wordCount > 200 ? \"Content Depth: Description provides adequate detail on background and skills.\" : \"Concise Profile: Direct and clear writing style allows for quick reading.\"\n  ];\n\n  const improvements = [\n    \"Measurable Results: Incorporate more quantifiable accomplishments (e.g., percentages, team sizes, project scopes).\",\n    \"Action Verbs: Start bullet points with strong action verbs (e.g., 'Architected', 'Pioneered') rather than passive phrases.\",\n    \"Keyword Coverage: Include more targeted industry terms to optimize ATS readability.\"\n  ];\n\n  const suggestions = [\n    `Add numeric values: Change 'improved performance' to 'improved API throughput by 25%'.`,\n    `Optimize summary: Revise profile introduction to highlight core achievements rather than a list of duties.`,\n    targetJob ? `Tailor keywords: Blend specific terminology matching '${targetJob}' requirements into the skills and experience sections.` : `Add job-specific targets to focus the skills summary.`\n  ];\n\n  const commonTech = ['React', 'Node.js', 'Python', 'AWS', 'Docker', 'TypeScript', 'MongoDB', 'SQL', 'Git', 'CI\/CD', 'Agile', 'Kubernetes', 'REST APIs', 'Unit Testing'];\n  const missingKeywords = [];\n  commonTech.forEach(tech => {\n    if (!words.includes(tech.toLowerCase())) {\n      missingKeywords.push(tech);\n    }\n  });\n\n  return {\n    scores: { overall, ats, impact, clarity },\n    strengths,\n    improvements,\n    suggestions,\n    keywords: missingKeywords.length > 0 ? missingKeywords.slice(0, 6) : [\"System Design\", \"Cloud Native\", \"DevOps\", \"Microservices\"]\n  };\n}\n\n\n\/\/ \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n\/\/ ANALYZE RESUME (Google Gemini API with simulated fallback)\n\/\/ \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\nasync function analyzeResume() {\n  const apiKey = document.getElementById('api-key-analyze').value.trim();\n  const resumeText = document.getElementById('resume-text').value.trim();\n  const targetJob = document.getElementById('target-job').value.trim();\n\n  if (!resumeText) { alert('Please paste or upload your resume text.'); return; }\n\n  const loader = document.getElementById('analyze-loader');\n  loader.classList.add('show');\n  document.getElementById('analysis-results').classList.add('hidden');\n\n  if (!apiKey) {\n    \/\/ Run mock analysis directly\n    setTimeout(() => {\n      try {\n        const mockResults = generateMockAnalysis(resumeText, targetJob);\n        displayAnalysis(mockResults);\n      } catch (err) {\n        console.warn('Simulated analysis failed:', err);\n      } finally {\n        loader.classList.remove('show');\n      }\n    }, 1000);\n    return;\n  }\n\n  const prompt = `Analyze this resume and return ONLY a JSON object (no markdown, no backticks):\n{\n  \"scores\": {\n    \"overall\": <number 0-100>,\n    \"ats\": <number 0-100>,\n    \"impact\": <number 0-100>,\n    \"clarity\": <number 0-100>\n  },\n  \"strengths\": [\"strength 1\",\"strength 2\",\"strength 3\"],\n  \"improvements\": [\"improvement 1\",\"improvement 2\",\"improvement 3\"],\n  \"suggestions\": [\"suggestion 1\",\"suggestion 2\",\"suggestion 3\"],\n  \"keywords\": [\"keyword1\",\"keyword2\",\"keyword3\",\"keyword4\",\"keyword5\"]\n}\n\n${targetJob ? `Target Job: ${targetJob}\\n` : ''}Resume Text:\n${resumeText}`;\n\n  try {\n    const res = await fetch(`https:\/\/generativelanguage.googleapis.com\/v1beta\/models\/gemini-2.0-flash:generateContent?key=${apiKey}`, {\n      method: 'POST',\n      headers: { 'Content-Type': 'application\/json' },\n      body: JSON.stringify({\n        contents: [{ parts: [{ text: prompt }] }],\n        generationConfig: { responseMimeType: 'application\/json' }\n      })\n    });\n    \n    if (!res.ok) {\n      const errData = await res.json();\n      throw new Error(errData.error?.message || 'API request failed');\n    }\n    \n    const data = await res.json();\n    const text = data.candidates?.[0]?.content?.parts?.[0]?.text || '';\n    const parsed = JSON.parse(text.trim());\n    displayAnalysis(parsed);\n  } catch(e) {\n    console.warn('Gemini API request failed, falling back to local simulation:', e);\n    const mockResults = generateMockAnalysis(resumeText, targetJob);\n    displayAnalysis(mockResults);\n  } finally {\n    loader.classList.remove('show');\n  }\n}\n\nfunction displayAnalysis(data) {\n  const { scores, strengths, improvements, suggestions, keywords } = data;\n\n  \/\/ Scores\n  const setScore = (id, barId, val, cls) => {\n    document.getElementById(id).textContent = val + '\/100';\n    document.getElementById(id).className = 'score-num ' + cls;\n    document.getElementById(barId).style.width = val + '%';\n  };\n\n  const cls = v => v >= 75 ? 'green' : v >= 50 ? 'yellow' : 'red';\n  setScore('score-overall','bar-overall', scores.overall, cls(scores.overall));\n  setScore('score-ats','bar-ats', scores.ats, cls(scores.ats));\n  setScore('score-impact','bar-impact', scores.impact, cls(scores.impact));\n  setScore('score-clarity','bar-clarity', scores.clarity, cls(scores.clarity));\n\n  const makeList = (id, items, icon) => {\n    document.getElementById(id).innerHTML = items.map(s =>\n      `<li data-icon=\"${icon}\">${s}<\/li>`).join('');\n  };\n  makeList('strengths-list', strengths || [], '\u2705');\n  makeList('improve-list', improvements || [], '\u26a0\ufe0f');\n  makeList('suggestions-list', suggestions || [], '\ud83d\udca1');\n\n  document.getElementById('keyword-tags').innerHTML = (keywords || []).map(k =>\n    `<div class=\"skill-tag\">${k}<\/div>`).join('');\n\n  document.getElementById('analysis-results').classList.remove('hidden');\n  document.getElementById('analysis-results').scrollIntoView({ behavior: 'smooth' });\n}\n\nfunction clearAnalysis() {\n  document.getElementById('resume-text').value = '';\n  document.getElementById('target-job').value = '';\n  document.getElementById('analysis-results').classList.add('hidden');\n}\n\n\/\/ Pre-fill demo data & Setup file upload listeners\nwindow.addEventListener('DOMContentLoaded', () => {\n  document.getElementById('f-name').value = 'Arjun Reddy';\n  document.getElementById('f-title').value = 'Full Stack Developer';\n  document.getElementById('f-email').value = 'arjun.reddy@example.com';\n  document.getElementById('f-phone').value = '+91 98765 43210';\n  document.getElementById('f-location').value = 'Hyderabad, India';\n  document.getElementById('f-linkedin').value = 'linkedin.com\/in\/arjunreddy';\n  document.getElementById('f-summary').value = 'Full Stack Developer with 4+ years of experience building scalable web applications. Proficient in React, Node.js, and cloud technologies. Passionate about clean code and delivering exceptional user experiences.';\n\n  ['React', 'Node.js', 'Python', 'MongoDB', 'AWS', 'TypeScript'].forEach(s => {\n    skills.push(s); renderSkills();\n  });\n\n  const expInputs = document.querySelectorAll('#exp-entries .exp-entry');\n  if(expInputs[0]) {\n    expInputs[0].querySelector('[name=\"exp-jobtitle\"]').value = 'Senior Full Stack Developer';\n    expInputs[0].querySelector('[name=\"exp-company\"]').value = 'TechCorp India';\n    expInputs[0].querySelector('[name=\"exp-duration\"]').value = 'Jan 2022 \u2013 Present';\n    expInputs[0].querySelector('[name=\"exp-loc\"]').value = 'Hyderabad';\n    expInputs[0].querySelector('[name=\"exp-desc\"]').value = '\u2022 Built microservices architecture serving 500K+ daily users\\n\u2022 Reduced API response time by 40% via Redis caching\\n\u2022 Led team of 5 developers across 3 projects';\n  }\n\n  const eduInputs = document.querySelectorAll('#edu-entries .exp-entry');\n  if(eduInputs[0]) {\n    eduInputs[0].querySelector('[name=\"edu-degree\"]').value = 'B.Tech Computer Science';\n    eduInputs[0].querySelector('[name=\"edu-inst\"]').value = 'JNTU Hyderabad';\n    eduInputs[0].querySelector('[name=\"edu-year\"]').value = '2018 \u2013 2022';\n    eduInputs[0].querySelector('[name=\"edu-grade\"]').value = '8.5 CGPA';\n  }\n\n  \/\/ Setup drag and drop upload zone\n  const dropZone = document.getElementById('upload-zone');\n  const fileInput = document.getElementById('file-input');\n\n  if (dropZone && fileInput) {\n    dropZone.addEventListener('click', () => fileInput.click());\n\n    dropZone.addEventListener('dragover', (e) => {\n      e.preventDefault();\n      dropZone.classList.add('drag');\n    });\n\n    dropZone.addEventListener('dragleave', () => {\n      dropZone.classList.remove('drag');\n    });\n\n    dropZone.addEventListener('drop', (e) => {\n      e.preventDefault();\n      dropZone.classList.remove('drag');\n      const file = e.dataTransfer.files?.[0];\n      if (file) {\n        parseFile(file);\n      }\n    });\n  }\n\n  generateResume();\n});\n<\/script>\n\n<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n<meta charset=\"UTF-8\">\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n<title>ResumeAI \u2013 Build &#038; Analyze Your Resume<\/title>\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Sora:wght@300;400;500;600;700&#038;family=Space+Mono:wght@400;700&#038;display=swap\" rel=\"stylesheet\">\n<!-- PDF.js and Mammoth.js for client-side resume file extraction -->\n<script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/pdf.js\/2.16.105\/pdf.min.js\"><\/script>\n<script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/mammoth\/1.4.2\/mammoth.browser.min.js\"><\/script>\n<link rel='stylesheet' href='style.css'>\n<\/head>\n<body>\n\n\n\n<div class=\"hero\">\n  <div class=\"hero-badge\">AI-Powered Resume Tools<\/div>\n  <h1>Build &#038; Analyze Your<br>Perfect Resume<\/h1>\n  <p>Create a professional resume from scratch or analyze an existing one with AI to maximize your chances of landing that dream job.<\/p>\n  <div class=\"hero-steps\">\n    <div class=\"hero-step\"><span class=\"step-num\">1<\/span> Choose Template<\/div>\n    <div class=\"hero-step\"><span class=\"step-num\">2<\/span> Fill Details<\/div>\n    <div class=\"hero-step\"><span class=\"step-num\">3<\/span> Generate &#038; Download<\/div>\n  <\/div>\n<\/div>\n\n<div class=\"tabs\">\n  <button class=\"tab active\" id=\"tab-builder\" onclick=\"switchTab('builder')\">\u270f\ufe0f Resume Builder<\/button>\n  <button class=\"tab\" id=\"tab-analyzer\" onclick=\"switchTab('analyzer')\">\ud83d\udd0d Resume Analyzer<\/button>\n<\/div>\n\n<div class=\"container\">\n\n  <!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 BUILDER PANEL \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\n  <div class=\"panel active\" id=\"panel-builder\">\n\n    <p class=\"section-label\">Step 1 \u2014 Choose Your Template<\/p>\n    <div class=\"template-grid\">\n      <!-- Template 1: Modern Minimalist -->\n      <div class=\"template-card selected\" id=\"tmpl-1\" onclick=\"selectTemplate(1)\">\n        <div class=\"tmpl-preview tmpl-1\" style=\"position:relative\">\n          <div class=\"t-header\"><\/div>\n          <div style=\"height:6px\"><\/div>\n          <div class=\"t-line\"><\/div>\n          <div class=\"t-line w60\"><\/div>\n          <div class=\"t-divider\"><\/div>\n          <div class=\"t-dot\"><\/div>\n          <div class=\"t-line w80\" style=\"width:80%\"><\/div>\n          <div class=\"t-line w60\" style=\"margin-top:2px\"><\/div>\n          <div class=\"t-divider\"><\/div>\n          <div class=\"t-dot\"><\/div>\n          <div class=\"t-line w40\"><\/div>\n          <div class=\"t-line w60\" style=\"margin-top:2px\"><\/div>\n        <\/div>\n        <div class=\"tmpl-meta\">\n          <div class=\"tmpl-name\">Modern Minimalist<\/div>\n          <div class=\"tmpl-desc\">Clean &#038; professional with purple accents<\/div>\n        <\/div>\n      <\/div>\n\n      <!-- Template 2: Creative Dark -->\n      <div class=\"template-card\" id=\"tmpl-2\" onclick=\"selectTemplate(2)\">\n        <div class=\"tmpl-preview tmpl-2\" style=\"position:relative; overflow:hidden;\">\n          <div class=\"t-sidebar\"><\/div>\n          <div class=\"t-main\">\n            <div style=\"position:absolute; left:0; top:0; width:40%; bottom:0; display:flex; flex-direction:column; align-items:center;\">\n              <div class=\"t-circle\"><\/div>\n              <div class=\"t-ls\" style=\"width:60%\"><\/div>\n              <div class=\"t-ls\" style=\"width:45%\"><\/div>\n              <div style=\"height:10px\"><\/div>\n              <div class=\"t-ls\" style=\"width:70%\"><\/div>\n              <div class=\"t-ls\" style=\"width:55%\"><\/div>\n              <div class=\"t-ls\" style=\"width:65%\"><\/div>\n            <\/div>\n            <div style=\"position:absolute; right:0; top:8px; width:60%; padding-right:8px;\">\n              <div class=\"t-ml bold\"><\/div>\n              <div class=\"t-ml\" style=\"width:80%\"><\/div>\n              <div style=\"height:6px\"><\/div>\n              <div class=\"t-badge\"><\/div>\n              <div class=\"t-ml\"><\/div>\n              <div class=\"t-ml\" style=\"width:70%\"><\/div>\n              <div class=\"t-ml\"><\/div>\n              <div style=\"height:6px\"><\/div>\n              <div class=\"t-badge\"><\/div>\n              <div class=\"t-ml\" style=\"width:90%\"><\/div>\n              <div class=\"t-ml\" style=\"width:75%\"><\/div>\n            <\/div>\n          <\/div>\n        <\/div>\n        <div class=\"tmpl-meta\">\n          <div class=\"tmpl-name\">Creative Dark<\/div>\n          <div class=\"tmpl-desc\">Two-column dark design with sidebar<\/div>\n        <\/div>\n      <\/div>\n\n      <!-- Template 3: Executive Classic -->\n      <div class=\"template-card\" id=\"tmpl-3\" onclick=\"selectTemplate(3)\">\n        <div class=\"tmpl-preview tmpl-3\" style=\"position:relative; display:block;\">\n          <div class=\"t-topband\"><\/div>\n          <div style=\"padding:8px 10px;\">\n            <div class=\"t-name\"><\/div>\n            <div class=\"t-subtitle\"><\/div>\n            <div class=\"t-twoCol\"><div class=\"l\"><\/div><div class=\"r\"><\/div><\/div>\n            <div style=\"height:1px; background:#ddd; margin:5px 0;\"><\/div>\n            <div style=\"display:flex; gap:8px;\">\n              <div style=\"flex:1;\">\n                <div class=\"t-section\"><\/div>\n                <div class=\"t-line\"><\/div>\n                <div class=\"t-line\" style=\"width:70%\"><\/div>\n                <div class=\"t-line\" style=\"width:85%\"><\/div>\n              <\/div>\n              <div style=\"flex:2;\">\n                <div class=\"t-section\"><\/div>\n                <div class=\"t-line\"><\/div>\n                <div class=\"t-line\" style=\"width:90%\"><\/div>\n                <div class=\"t-line\" style=\"width:80%\"><\/div>\n              <\/div>\n            <\/div>\n          <\/div>\n        <\/div>\n        <div class=\"tmpl-meta\">\n          <div class=\"tmpl-name\">Executive Classic<\/div>\n          <div class=\"tmpl-desc\">Two-column layout, traditional &#038; refined<\/div>\n        <\/div>\n      <\/div>\n    <\/div>\n\n    <!-- Personal Info -->\n    <p class=\"section-label\">Step 2 \u2014 Your Information<\/p>\n\n    <div class=\"form-grid\">\n      <div class=\"form-group\">\n        <label>Full Name *<\/label>\n        <input type=\"text\" id=\"f-name\" placeholder=\"e.g. Arjun Reddy\" \/>\n      <\/div>\n      <div class=\"form-group\">\n        <label>Job Title \/ Headline *<\/label>\n        <input type=\"text\" id=\"f-title\" placeholder=\"e.g. Full Stack Developer\" \/>\n      <\/div>\n      <div class=\"form-group\">\n        <label>Email *<\/label>\n        <input type=\"email\" id=\"f-email\" placeholder=\"arjun@example.com\" \/>\n      <\/div>\n      <div class=\"form-group\">\n        <label>Phone<\/label>\n        <input type=\"text\" id=\"f-phone\" placeholder=\"+91 98765 43210\" \/>\n      <\/div>\n      <div class=\"form-group\">\n        <label>Location<\/label>\n        <input type=\"text\" id=\"f-location\" placeholder=\"Hyderabad, India\" \/>\n      <\/div>\n      <div class=\"form-group\">\n        <label>LinkedIn \/ Portfolio URL<\/label>\n        <input type=\"text\" id=\"f-linkedin\" placeholder=\"linkedin.com\/in\/arjunreddy\" \/>\n      <\/div>\n      <div class=\"form-group full\">\n        <label>Professional Summary *<\/label>\n        <textarea id=\"f-summary\" rows=\"3\" placeholder=\"Write 2-3 sentences about your experience, skills, and goals...\"><\/textarea>\n      <\/div>\n    <\/div>\n\n    <!-- Skills -->\n    <div class=\"form-group\" style=\"margin-bottom:1.5rem\">\n      <label>Skills<\/label>\n      <div class=\"skill-input-row\">\n        <input type=\"text\" id=\"skill-input\" placeholder=\"Type a skill and press Enter\" onkeydown=\"addSkillOnEnter(event)\" \/>\n        <button class=\"btn btn-secondary\" style=\"white-space:nowrap\" onclick=\"addSkill()\">+ Add<\/button>\n      <\/div>\n      <div class=\"skill-tags\" id=\"skill-tags\"><\/div>\n    <\/div>\n\n    <!-- Experience -->\n    <p class=\"section-label\">Work Experience<\/p>\n    <div id=\"exp-entries\">\n      <div class=\"exp-entry\" data-idx=\"0\">\n        <div class=\"exp-entry-header\">\n          <span class=\"exp-entry-title\">Experience #1<\/span>\n          <button class=\"remove-btn\" onclick=\"removeEntry(this,'exp-entries')\">Remove<\/button>\n        <\/div>\n        <div class=\"form-grid\">\n          <div class=\"form-group\"><label>Job Title<\/label><input type=\"text\" name=\"exp-jobtitle\" placeholder=\"Software Engineer\" \/><\/div>\n          <div class=\"form-group\"><label>Company<\/label><input type=\"text\" name=\"exp-company\" placeholder=\"Tech Corp\" \/><\/div>\n          <div class=\"form-group\"><label>Duration<\/label><input type=\"text\" name=\"exp-duration\" placeholder=\"Jan 2022 \u2013 Present\" \/><\/div>\n          <div class=\"form-group\"><label>Location<\/label><input type=\"text\" name=\"exp-loc\" placeholder=\"Hyderabad\" \/><\/div>\n          <div class=\"form-group full\"><label>Description \/ Achievements<\/label><textarea name=\"exp-desc\" rows=\"2\" placeholder=\"\u2022 Led development of...\\n\u2022 Improved performance by...\"><\/textarea><\/div>\n        <\/div>\n      <\/div>\n    <\/div>\n    <button class=\"add-btn\" onclick=\"addEntry('exp-entries','Experience')\">+ Add Experience<\/button>\n\n    <!-- Education -->\n    <p class=\"section-label\">Education<\/p>\n    <div id=\"edu-entries\">\n      <div class=\"exp-entry\">\n        <div class=\"exp-entry-header\">\n          <span class=\"exp-entry-title\">Education #1<\/span>\n          <button class=\"remove-btn\" onclick=\"removeEntry(this,'edu-entries')\">Remove<\/button>\n        <\/div>\n        <div class=\"form-grid\">\n          <div class=\"form-group\"><label>Degree<\/label><input type=\"text\" name=\"edu-degree\" placeholder=\"B.Tech Computer Science\" \/><\/div>\n          <div class=\"form-group\"><label>Institution<\/label><input type=\"text\" name=\"edu-inst\" placeholder=\"JNTU Hyderabad\" \/><\/div>\n          <div class=\"form-group\"><label>Year<\/label><input type=\"text\" name=\"edu-year\" placeholder=\"2018 \u2013 2022\" \/><\/div>\n          <div class=\"form-group\"><label>Grade \/ CGPA<\/label><input type=\"text\" name=\"edu-grade\" placeholder=\"8.5 CGPA\" \/><\/div>\n        <\/div>\n      <\/div>\n    <\/div>\n    <button class=\"add-btn\" onclick=\"addEntry('edu-entries','Education')\">+ Add Education<\/button>\n\n    <input type=\"hidden\" id=\"api-key\" value=\"AIzaSyAmJl5XqVbMjvasCmsHOxFORVnOjbjQ-OM\" \/>\n\n    <div class=\"action-bar\">\n      <button class=\"btn btn-primary\" onclick=\"generateResume()\">\u26a1 Generate Resume<\/button>\n      <button class=\"btn btn-success\" onclick=\"downloadResume()\">\u2b07 Download HTML<\/button>\n    <\/div>\n\n    <!-- PREVIEW AREA -->\n    <div id=\"preview-area\" style=\"margin-top:2.5rem; display:none;\">\n      <p class=\"section-label\" style=\"margin-bottom:1rem\">Live Preview<\/p>\n      <div class=\"preview-wrapper\" id=\"resume-preview\"><\/div>\n    <\/div>\n\n    <div class=\"loader\" id=\"builder-loader\">\n      <div class=\"spinner\"><\/div>\n      <p class=\"loader-text\" id=\"builder-loader-text\">Gemini is enhancing your resume&#8230;<\/p>\n    <\/div>\n  <\/div>\n\n  <!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 ANALYZER PANEL \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\n  <div class=\"panel\" id=\"panel-analyzer\">\n\n    <input type=\"hidden\" id=\"api-key-analyze\" value=\"AIzaSyAmJl5XqVbMjvasCmsHOxFORVnOjbjQ-OM\" \/>\n\n    <div class=\"analyze-form-area\">\n      <!-- File Upload Zone -->\n      <div class=\"upload-zone\" id=\"upload-zone\">\n        <div class=\"upload-icon\">\ud83d\udcc1<\/div>\n        <h3>Drag &#038; Drop your Resume here or click to browse<\/h3>\n        <p>Supports PDF, DOCX, and TXT files<\/p>\n        <input type=\"file\" id=\"file-input\" class=\"hidden\" accept=\".pdf,.docx,.txt\" onchange=\"handleFileSelect(event)\" \/>\n      <\/div>\n\n      <p class=\"section-label\">Resume Text<\/p>\n      <div class=\"form-group\">\n        <textarea id=\"resume-text\" rows=\"12\" placeholder=\"Extracted text will appear here. You can also paste or edit the text directly...\"><\/textarea>\n      <\/div>\n      <div class=\"form-group\" style=\"margin-top:1rem\">\n        <label>Target Job Title (optional)<\/label>\n        <input type=\"text\" id=\"target-job\" placeholder=\"e.g. Data Scientist, Product Manager...\" \/>\n      <\/div>\n    <\/div>\n\n    <div class=\"action-bar\" style=\"margin-bottom:2rem\">\n      <button class=\"btn btn-primary\" onclick=\"analyzeResume()\">\ud83d\udd0d Analyze with Gemini<\/button>\n      <button class=\"btn btn-secondary\" onclick=\"clearAnalysis()\">\ud83d\uddd1 Clear<\/button>\n    <\/div>\n\n    <div class=\"loader\" id=\"analyze-loader\">\n      <div class=\"spinner\"><\/div>\n      <p class=\"loader-text\">Gemini is analyzing your resume&#8230;<\/p>\n    <\/div>\n\n    <div id=\"analysis-results\" class=\"hidden\">\n      <p class=\"section-label\" style=\"margin-bottom:1rem\">Analysis Results<\/p>\n\n      <div class=\"score-grid\">\n        <div class=\"score-card\">\n          <div class=\"score-num green\" id=\"score-overall\">\u2013<\/div>\n          <div class=\"score-label\">Overall Score<\/div>\n          <div class=\"score-bar\"><div class=\"score-fill green\" id=\"bar-overall\" style=\"width:0%\"><\/div><\/div>\n        <\/div>\n        <div class=\"score-card\">\n          <div class=\"score-num yellow\" id=\"score-ats\">\u2013<\/div>\n          <div class=\"score-label\">ATS Compatibility<\/div>\n          <div class=\"score-bar\"><div class=\"score-fill yellow\" id=\"bar-ats\" style=\"width:0%\"><\/div><\/div>\n        <\/div>\n        <div class=\"score-card\">\n          <div class=\"score-num green\" id=\"score-impact\">\u2013<\/div>\n          <div class=\"score-label\">Impact Score<\/div>\n          <div class=\"score-bar\"><div class=\"score-fill green\" id=\"bar-impact\" style=\"width:0%\"><\/div><\/div>\n        <\/div>\n        <div class=\"score-card\">\n          <div class=\"score-num red\" id=\"score-clarity\">\u2013<\/div>\n          <div class=\"score-label\">Clarity<\/div>\n          <div class=\"score-bar\"><div class=\"score-fill red\" id=\"bar-clarity\" style=\"width:0%\"><\/div><\/div>\n        <\/div>\n      <\/div>\n\n      <div class=\"feedback-section\">\n        <div class=\"feedback-header\">\n          <span class=\"feedback-icon\">\u2705<\/span>\n          <span class=\"feedback-title\">Strengths<\/span>\n        <\/div>\n        <ul class=\"feedback-list\" id=\"strengths-list\"><\/ul>\n      <\/div>\n\n      <div class=\"feedback-section\">\n        <div class=\"feedback-header\">\n          <span class=\"feedback-icon\">\u26a0\ufe0f<\/span>\n          <span class=\"feedback-title\">Areas to Improve<\/span>\n        <\/div>\n        <ul class=\"feedback-list\" id=\"improve-list\"><\/ul>\n      <\/div>\n\n      <div class=\"feedback-section\">\n        <div class=\"feedback-header\">\n          <span class=\"feedback-icon\">\ud83d\udca1<\/span>\n          <span class=\"feedback-title\">AI Suggestions<\/span>\n        <\/div>\n        <ul class=\"feedback-list\" id=\"suggestions-list\"><\/ul>\n      <\/div>\n\n      <div class=\"feedback-section\">\n        <div class=\"feedback-header\">\n          <span class=\"feedback-icon\">\ud83d\udd11<\/span>\n          <span class=\"feedback-title\">Recommended Keywords to Add<\/span>\n        <\/div>\n        <div id=\"keyword-tags\" style=\"display:flex; flex-wrap:wrap; gap:6px; margin-top:0.5rem;\"><\/div>\n      <\/div>\n    <\/div>\n  <\/div>\n\n<\/div>\n\n<script src='script.js'><\/script>\n<\/body>\n<\/html>\n\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n","protected":false},"excerpt":{"rendered":"<p>ResumeAI \u2013 Build &#038; Analyze Your Resume AI-Powered Resume Tools Build &#038; Analyze YourPerfect Resume Create a professional resume from scratch or analyze an existing one with AI to maximize your chances of landing that dream job. 1 Choose Template 2 Fill Details 3 Generate &#038; Download \u270f\ufe0f Resume Builder \ud83d\udd0d Resume Analyzer Step 1 [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-101","page","type-page","status-publish","hentry"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.6 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Resume Analyzer and Builder: Tips for Success - Getmyjob<\/title>\n<meta name=\"description\" content=\"Build and analyze your resume with AI tools to enhance your job application using the Resume Analyzer and Builder.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/getmyjob.me\/resume-analyzer\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Resume Analyzer and Builder: Tips for Success - Getmyjob\" \/>\n<meta property=\"og:description\" content=\"Build and analyze your resume with AI tools to enhance your job application using the Resume Analyzer and Builder.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/getmyjob.me\/resume-analyzer\/\" \/>\n<meta property=\"og:site_name\" content=\"Getmyjob\" \/>\n<meta property=\"article:modified_time\" content=\"2026-05-27T06:35:08+00:00\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data1\" content=\"1 minute\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/getmyjob.me\\\/resume-analyzer\\\/\",\"url\":\"https:\\\/\\\/getmyjob.me\\\/resume-analyzer\\\/\",\"name\":\"Resume Analyzer and Builder: Tips for Success - Getmyjob\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/getmyjob.me\\\/#website\"},\"datePublished\":\"2026-05-27T03:53:39+00:00\",\"dateModified\":\"2026-05-27T06:35:08+00:00\",\"description\":\"Build and analyze your resume with AI tools to enhance your job application using the Resume Analyzer and Builder.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/getmyjob.me\\\/resume-analyzer\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/getmyjob.me\\\/resume-analyzer\\\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/getmyjob.me\\\/resume-analyzer\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/getmyjob.me\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Resume AI\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/getmyjob.me\\\/#website\",\"url\":\"https:\\\/\\\/getmyjob.me\\\/\",\"name\":\"getmyjob\",\"description\":\"Latest Job Openings &amp; Career Opportunities\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/getmyjob.me\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Resume Analyzer and Builder: Tips for Success - Getmyjob","description":"Build and analyze your resume with AI tools to enhance your job application using the Resume Analyzer and Builder.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/getmyjob.me\/resume-analyzer\/","og_locale":"en_US","og_type":"article","og_title":"Resume Analyzer and Builder: Tips for Success - Getmyjob","og_description":"Build and analyze your resume with AI tools to enhance your job application using the Resume Analyzer and Builder.","og_url":"https:\/\/getmyjob.me\/resume-analyzer\/","og_site_name":"Getmyjob","article_modified_time":"2026-05-27T06:35:08+00:00","twitter_card":"summary_large_image","twitter_misc":{"Est. reading time":"1 minute"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/getmyjob.me\/resume-analyzer\/","url":"https:\/\/getmyjob.me\/resume-analyzer\/","name":"Resume Analyzer and Builder: Tips for Success - Getmyjob","isPartOf":{"@id":"https:\/\/getmyjob.me\/#website"},"datePublished":"2026-05-27T03:53:39+00:00","dateModified":"2026-05-27T06:35:08+00:00","description":"Build and analyze your resume with AI tools to enhance your job application using the Resume Analyzer and Builder.","breadcrumb":{"@id":"https:\/\/getmyjob.me\/resume-analyzer\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/getmyjob.me\/resume-analyzer\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/getmyjob.me\/resume-analyzer\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/getmyjob.me\/"},{"@type":"ListItem","position":2,"name":"Resume AI"}]},{"@type":"WebSite","@id":"https:\/\/getmyjob.me\/#website","url":"https:\/\/getmyjob.me\/","name":"getmyjob","description":"Latest Job Openings &amp; Career Opportunities","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/getmyjob.me\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"}]}},"_links":{"self":[{"href":"https:\/\/getmyjob.me\/wp-json\/wp\/v2\/pages\/101","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/getmyjob.me\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/getmyjob.me\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/getmyjob.me\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/getmyjob.me\/wp-json\/wp\/v2\/comments?post=101"}],"version-history":[{"count":12,"href":"https:\/\/getmyjob.me\/wp-json\/wp\/v2\/pages\/101\/revisions"}],"predecessor-version":[{"id":119,"href":"https:\/\/getmyjob.me\/wp-json\/wp\/v2\/pages\/101\/revisions\/119"}],"wp:attachment":[{"href":"https:\/\/getmyjob.me\/wp-json\/wp\/v2\/media?parent=101"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}