Repository navigation
Expand file tree
/
Copy pathbuilder.html
More file actions
154 lines (133 loc) · 7.65 KB
/
Copy pathbuilder.html
File metadata and controls
154 lines (133 loc) · 7.65 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">
<title>Resume Builder — ATS-Friendly</title>
<meta name="description" content="Build a professional, ATS-compliant resume in your browser. Live preview, ATS score checker, keyword matcher, PDF export. 100% private — your data never leaves your device.">
<meta name="theme-color" content="#f3f5f8">
<link rel="stylesheet" href="styles.css">
</head>
<body>
<a class="skip-link no-print" href="#main">Skip to main content</a>
<header class="app-header no-print">
<div class="brand">
<span class="brand-mark" aria-hidden="true">◈</span>
<div>
<strong>Resume Builder</strong>
<small>ATS-friendly · 100% private</small>
</div>
</div>
<div class="header-actions">
<a class="btn" href="index.html" aria-label="Back to home page">← Home</a>
<button class="btn" id="btn-sample" type="button">Load sample</button>
<button class="btn" id="btn-clear" type="button">Clear all</button>
<button class="btn" id="btn-copy" type="button">Copy plain text</button>
<button class="btn primary" id="btn-print" type="button">Download PDF</button>
</div>
</header>
<div class="filename-hint no-print" id="filename-hint" role="status"></div>
<main class="layout" id="main">
<h1 class="visually-hidden">Resume Builder — create an ATS-friendly resume</h1>
<!-- ============ EDITOR ============ -->
<section class="editor no-print" id="editor" aria-label="Resume editor">
<div class="card">
<h2>Template</h2>
<p class="hint">All three templates are ATS-safe: single column, real text, standard headings, no graphics.</p>
<div class="template-switch" id="template-switch" role="group" aria-label="Choose a template">
<button type="button" data-template="classic" aria-pressed="true"><strong>Classic</strong><span>Centered header, serif name</span></button>
<button type="button" data-template="modern" aria-pressed="false"><strong>Modern</strong><span>Left-aligned, subtle accent</span></button>
<button type="button" data-template="compact" aria-pressed="false"><strong>Compact</strong><span>Tighter, fits one page</span></button>
</div>
</div>
<div class="card">
<h2>Personal Information</h2>
<div class="grid2">
<label>Full name <input id="p-name" name="full-name" data-personal="name" type="text" placeholder="Arjun Sharma" autocomplete="name"></label>
<label>Job title / target role <input id="p-title" name="job-title" data-personal="title" type="text" placeholder="Senior Software Engineer" autocomplete="organization-title"></label>
<label>Email <input id="p-email" name="email" data-personal="email" type="email" placeholder="you@example.com" autocomplete="email" spellcheck="false"></label>
<label>Phone <input id="p-phone" name="phone" data-personal="phone" type="tel" inputmode="tel" placeholder="+91 98765 43210" autocomplete="tel" spellcheck="false"></label>
<label>Location <input id="p-location" name="location" data-personal="location" type="text" placeholder="Bengaluru, India" autocomplete="off"></label>
<label>LinkedIn URL <input id="p-linkedin" name="linkedin" data-personal="linkedin" type="url" placeholder="linkedin.com/in/yourname" autocomplete="off" spellcheck="false"></label>
<label class="span2">Portfolio / website URL <input id="p-website" name="website" data-personal="website" type="url" placeholder="yourname.dev" autocomplete="off" spellcheck="false"></label>
</div>
</div>
<div class="card">
<h2>Professional Summary <span class="count" id="summary-count">0 words</span></h2>
<p class="hint">3–4 lines, 30–80 words. No “I/me/my” — write in implied first person (“Senior Engineer with…”).</p>
<textarea id="summary" name="summary" rows="4" autocomplete="off" placeholder="Senior Software Engineer with 5+ years of experience building…"></textarea>
</div>
<div class="card">
<h2>Work Experience</h2>
<p class="hint">Reverse chronological. Start every bullet with an action verb, add numbers (%, ₹, team size).</p>
<div id="exp-list"></div>
<button class="btn dashed" id="btn-add-exp" type="button">+ Add position</button>
</div>
<div class="card">
<h2>Education</h2>
<div id="edu-list"></div>
<button class="btn dashed" id="btn-add-edu" type="button">+ Add education</button>
</div>
<div class="card">
<h2>Skills <span class="count" id="skills-count">0 skills</span></h2>
<p class="hint">Comma or line separated. Aim for 8+ skills matching your target role.</p>
<textarea id="skills" name="skills" rows="3" autocomplete="off" placeholder="Java, Spring Boot, Microservices, REST APIs, PostgreSQL…"></textarea>
</div>
<div class="card">
<h2>Projects <span class="tag">optional</span></h2>
<div id="proj-list"></div>
<button class="btn dashed" id="btn-add-proj" type="button">+ Add project</button>
</div>
<div class="card">
<h2>Certifications <span class="tag">optional</span></h2>
<div id="cert-list"></div>
<button class="btn dashed" id="btn-add-cert" type="button">+ Add certification</button>
</div>
<div class="card" id="ats-card">
<h2>ATS Score <span class="count" id="ats-words">0 words</span></h2>
<p class="hint">How applicant-tracking systems are likely to parse your resume. Updates live as you type.</p>
<div class="ats-score-row">
<div class="ats-gauge">
<svg viewBox="0 0 120 120" width="104" height="104" aria-hidden="true" focusable="false">
<circle class="gauge-track" cx="60" cy="60" r="52"></circle>
<circle class="gauge-fill" id="ats-fill" cx="60" cy="60" r="52"></circle>
</svg>
<div class="ats-number" id="ats-number">0</div>
</div>
<div class="ats-meta">
<div class="ats-verdict" id="ats-verdict"></div>
</div>
</div>
<ul class="ats-checks" id="ats-checks"></ul>
</div>
<div class="card">
<h2>Job-Description Keyword Matcher</h2>
<p class="hint">Paste a job description. We’ll extract its keywords and show which ones your resume already covers — and which to add.</p>
<textarea id="jd-input" name="job-description" rows="5" autocomplete="off" placeholder="Paste the job description here…"></textarea>
<button class="btn primary" id="btn-jd" type="button">Analyze keywords</button>
<div id="jd-results" class="jd-results" aria-live="polite" hidden>
<div class="jd-score" id="jd-score"></div>
<h3>Matched keywords</h3>
<div class="chips chips-ok" id="jd-matched"></div>
<h3>Missing keywords <small>— consider adding where honest</small></h3>
<div class="chips chips-miss" id="jd-missing"></div>
</div>
</div>
</section>
<!-- ============ PREVIEW ============ -->
<section class="preview-wrap" aria-label="Resume preview">
<div class="preview-bar no-print">
<span>Live preview</span>
<span class="count" id="preview-words">0 words</span>
</div>
<div id="resume" class="resume template-classic" aria-label="Resume document"></div>
<p class="print-note no-print">Tip: <strong>Download PDF</strong> opens your print dialog — choose “Save as PDF”, A4, default margins.</p>
</section>
</main>
<footer class="app-footer no-print">
<p>Your data stays in this browser (localStorage). Nothing is uploaded anywhere.</p>
</footer>
<div class="visually-hidden" id="live-region" aria-live="polite"></div>
<script src="app.js"></script>
</body>
</html>