Skip to content

Commit a79e9a0

Browse files
komalharshitakomalharshita
authored
Merge pull request #33 from Muskankr/feat/form-tooltips
Add helper tooltips for form fields
2 parents abe720f + 8a10d79 commit a79e9a0

2 files changed

Lines changed: 137 additions & 42 deletions

File tree

‎static/style.css‎

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1654,3 +1654,28 @@ select:focus {
16541654
.container { padding: 0 20px; }
16551655
.section-sub { margin-bottom: 40px; }
16561656
}
1657+
1658+
1659+
1660+
.tooltip {
1661+
display: inline-flex;
1662+
align-items: center;
1663+
justify-content: center;
1664+
margin-left: 6px;
1665+
width: 16px;
1666+
height: 16px;
1667+
border-radius: 50%;
1668+
background: #6366f1;
1669+
color: white;
1670+
font-size: 11px;
1671+
cursor: help;
1672+
font-weight: 700;
1673+
}
1674+
1675+
.form-hint {
1676+
display: block;
1677+
margin-top: 6px;
1678+
font-size: 13px;
1679+
color: #94a3b8;
1680+
line-height: 1.5;
1681+
}

‎templates/index.html‎

Lines changed: 112 additions & 42 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,18 @@
11
<!DOCTYPE html>
22
<html lang="en">
3+
34
<head>
45
<meta charset="UTF-8" />
56
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6-
<meta name="description" content="DevPath recommends real coding projects based on your skills, level, and interests — with full roadmaps and starter code." />
7+
<meta name="description"
8+
content="DevPath recommends real coding projects based on your skills, level, and interests — with full roadmaps and starter code." />
79
<title>DevPath — Find Projects Based On Your Skills</title>
810
<link rel="stylesheet" href="/static/style.css" />
9-
<link href="https://fonts.googleapis.com/css2?family=Sora:wght@400;600;700;800&family=Inter:wght@400;500;600&display=swap" rel="stylesheet" />
11+
<link
12+
href="https://fonts.googleapis.com/css2?family=Sora:wght@400;600;700;800&family=Inter:wght@400;500;600&display=swap"
13+
rel="stylesheet" />
1014
</head>
15+
1116
<body>
1217
<!-- ============================================================
1318
Navigation
@@ -88,7 +93,11 @@ <h1 class="hero-heading">
8893
<div class="hero-visual">
8994
<div class="hero-visual-card hero-visual-card--top">
9095
<div class="hvc-icon hvc-icon--blue">
91-
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="16 18 22 12 16 6"/><polyline points="8 6 2 12 8 18"/></svg>
96+
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"
97+
stroke-linecap="round" stroke-linejoin="round">
98+
<polyline points="16 18 22 12 16 6" />
99+
<polyline points="8 6 2 12 8 18" />
100+
</svg>
92101
</div>
93102
<div class="hvc-text">
94103
<span class="hvc-title">Starter Code Ready</span>
@@ -104,10 +113,12 @@ <h1 class="hero-heading">
104113
<span class="hvm-filename">expense_tracker.py</span>
105114
</div>
106115
<div class="hvm-code">
107-
<span class="hvm-line"><span class="hvm-kw">def</span> <span class="hvm-fn">add_expense</span>(category, amount):</span>
116+
<span class="hvm-line"><span class="hvm-kw">def</span> <span class="hvm-fn">add_expense</span>(category,
117+
amount):</span>
108118
<span class="hvm-line hvm-indent"><span class="hvm-cm"># Save entry to CSV</span></span>
109119
<span class="hvm-line hvm-indent">date <span class="hvm-op">=</span> datetime.now()</span>
110-
<span class="hvm-line hvm-indent"><span class="hvm-kw">with</span> open(DATA_FILE) <span class="hvm-kw">as</span> f:</span>
120+
<span class="hvm-line hvm-indent"><span class="hvm-kw">with</span> open(DATA_FILE) <span
121+
class="hvm-kw">as</span> f:</span>
111122
<span class="hvm-line hvm-indent2">writer.writerow([date, ...])</span>
112123
<span class="hvm-line">&nbsp;</span>
113124
<span class="hvm-line"><span class="hvm-kw">def</span> <span class="hvm-fn">monthly_summary</span>():</span>
@@ -118,7 +129,10 @@ <h1 class="hero-heading">
118129

119130
<div class="hero-visual-card hero-visual-card--bottom">
120131
<div class="hvc-icon hvc-icon--green">
121-
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="22 12 18 12 15 21 9 3 6 12 2 12"/></svg>
132+
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"
133+
stroke-linecap="round" stroke-linejoin="round">
134+
<polyline points="22 12 18 12 15 21 9 3 6 12 2 12" />
135+
</svg>
122136
</div>
123137
<div class="hvc-text">
124138
<span class="hvc-title">7-Step Roadmap</span>
@@ -175,15 +189,21 @@ <h3>Enter Your Skills</h3>
175189
<p>Type your programming skills or click quick-select chips. Add as many as you like.</p>
176190
</div>
177191
<div class="step-connector">
178-
<svg width="32" height="16" viewBox="0 0 32 16"><path d="M0 8 H28 M22 2 L30 8 L22 14" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/></svg>
192+
<svg width="32" height="16" viewBox="0 0 32 16">
193+
<path d="M0 8 H28 M22 2 L30 8 L22 14" stroke="currentColor" stroke-width="2" fill="none"
194+
stroke-linecap="round" stroke-linejoin="round" />
195+
</svg>
179196
</div>
180197
<div class="step-card">
181198
<div class="step-num">02</div>
182199
<h3>Set Your Preferences</h3>
183200
<p>Select your experience level, area of interest, and how much time you can commit.</p>
184201
</div>
185202
<div class="step-connector">
186-
<svg width="32" height="16" viewBox="0 0 32 16"><path d="M0 8 H28 M22 2 L30 8 L22 14" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/></svg>
203+
<svg width="32" height="16" viewBox="0 0 32 16">
204+
<path d="M0 8 H28 M22 2 L30 8 L22 14" stroke="currentColor" stroke-width="2" fill="none"
205+
stroke-linecap="round" stroke-linejoin="round" />
206+
</svg>
187207
</div>
188208
<div class="step-card">
189209
<div class="step-num">03</div>
@@ -207,7 +227,13 @@ <h2 class="section-title">Everything You Need to Start Building</h2>
207227

208228
<div class="feature-card feature-card--pink">
209229
<div class="feature-card-icon">
210-
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M23 21v-2a4 4 0 0 0-3-3.87"/><path d="M16 3.13a4 4 0 0 1 0 7.75"/></svg>
230+
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
231+
stroke-linecap="round" stroke-linejoin="round">
232+
<path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2" />
233+
<circle cx="9" cy="7" r="4" />
234+
<path d="M23 21v-2a4 4 0 0 0-3-3.87" />
235+
<path d="M16 3.13a4 4 0 0 1 0 7.75" />
236+
</svg>
211237
</div>
212238
<h3>Personalized Matches</h3>
213239
<p>Projects are scored against your exact skills, level, and interest — not pulled from a generic list.</p>
@@ -216,7 +242,10 @@ <h3>Personalized Matches</h3>
216242

217243
<div class="feature-card feature-card--yellow">
218244
<div class="feature-card-icon">
219-
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="22 12 18 12 15 21 9 3 6 12 2 12"/></svg>
245+
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
246+
stroke-linecap="round" stroke-linejoin="round">
247+
<polyline points="22 12 18 12 15 21 9 3 6 12 2 12" />
248+
</svg>
220249
</div>
221250
<h3>Step-by-Step Roadmaps</h3>
222251
<p>Each project includes a numbered roadmap so you always know what to build next, without guessing.</p>
@@ -225,10 +254,15 @@ <h3>Step-by-Step Roadmaps</h3>
225254

226255
<div class="feature-card feature-card--purple">
227256
<div class="feature-card-icon">
228-
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="16 18 22 12 16 6"/><polyline points="8 6 2 12 8 18"/></svg>
257+
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
258+
stroke-linecap="round" stroke-linejoin="round">
259+
<polyline points="16 18 22 12 16 6" />
260+
<polyline points="8 6 2 12 8 18" />
261+
</svg>
229262
</div>
230263
<h3>Starter Code Included</h3>
231-
<p>Download a working template for every project. Skip the blank-page problem and start building immediately.</p>
264+
<p>Download a working template for every project. Skip the blank-page problem and start building immediately.
265+
</p>
232266
<a href="#find-project" class="feature-card-link">Get starter code</a>
233267
</div>
234268

@@ -251,9 +285,16 @@ <h2 class="section-title">Find Your Next Project</h2>
251285

252286
<!-- Skills input with chip selector -->
253287
<div class="form-group">
254-
<label for="skills-input">Your Skills</label>
288+
<label for="skills-input">
289+
Your Skills
290+
<span class="tooltip"
291+
title="Add technologies, programming languages, or tools you know like Python, React, Git, SQL, etc.">
292+
ⓘ
293+
</span>
294+
</label>
255295
<div class="skill-input-wrap" id="skill-input-wrap">
256296
<div class="skill-chips-selected" id="skill-chips-selected"></div>
297+
<input type="text" id="skills-input" placeholder="Type a skill and press Enter..." autocomplete="off" />
257298
<input
258299
type="text"
259300
id="skills-input"
@@ -267,7 +308,9 @@ <h2 class="section-title">Find Your Next Project</h2>
267308
</div>
268309
<!-- Hidden field holds the final comma-separated value -->
269310
<input type="hidden" id="skills" name="skills" />
270-
<span class="form-hint">Or click a popular skill below to add it</span>
311+
<span class="form-hint">
312+
Add one or more skills you are comfortable with. Example: Python, React, SQL, Git.
313+
</span>
271314
<div class="form-error-msg" id="skills-error"></div>
272315
</div>
273316

@@ -299,7 +342,13 @@ <h2 class="section-title">Find Your Next Project</h2>
299342
</div>
300343

301344
<div class="form-group">
302-
<label for="interest">Area of Interest</label>
345+
<label for="interest">
346+
Area of Interest
347+
<span class="tooltip"
348+
title="Choose the type of projects you enjoy building or want to learn more about.">
349+
ⓘ
350+
</span>
351+
</label>
303352
<div class="select-wrap">
304353
<select id="interest" name="interest">
305354
<option value="" disabled selected>Select interest</option>
@@ -310,37 +359,51 @@ <h2 class="section-title">Find Your Next Project</h2>
310359
<option value="Games">Games</option>
311360
</select>
312361
</div>
313-
<div class="form-error-msg" id="interest-error"></div>
314-
</div>
315-
</div>
362+
316363

317-
<!-- Time availability -->
318-
<div class="form-group">
319-
<label for="time">Time Availability</label>
320-
<div class="select-wrap">
321-
<select id="time" name="time">
322-
<option value="" disabled selected>How much time can you commit?</option>
323-
<option value="Low">Low — a few hours total</option>
324-
<option value="Medium">Medium — across a weekend</option>
325-
<option value="High">High — a week or more</option>
326-
</select>
327-
</div>
328-
<div class="form-error-msg" id="time-error"></div>
364+
<span class="form-hint">
365+
Pick the domain you want to explore such as Web Development, Automation, or Games.
366+
</span>
367+
<div class="form-error-msg" id="interest-error"></div>
329368
</div>
369+
</div>
330370

331-
<!-- General error (shown above the button) -->
332-
<p class="form-error-general" id="form-error-general"></p>
371+
<!-- Time availability -->
372+
<div class="form-group">
373+
<label for="time">
374+
Time Availability
375+
<span class="tooltip"
376+
title="Estimate how much time you can realistically dedicate to building the project.">
377+
ⓘ
378+
</span>
379+
</label>
380+
<div class="select-wrap">
381+
<select id="time" name="time">
382+
<option value="" disabled selected>How much time can you commit?</option>
383+
<option value="Low">Low — a few hours total</option>
384+
<option value="Medium">Medium — across a weekend</option>
385+
<option value="High">High — a week or more</option>
386+
</select>
387+
</div>
388+
<span class="form-hint">
389+
Include coding, debugging, learning, and reviewing time in your estimate.
390+
</span>
391+
<div class="form-error-msg" id="time-error"></div>
392+
</div>
333393

334-
<!-- Submit button -->
335-
<button type="submit" class="btn-submit" id="submit-btn">
336-
<span id="btn-label">Generate My Projects</span>
337-
<span id="btn-loading" style="display:none;">Finding matches...</span>
338-
</button>
394+
<!-- General error (shown above the button) -->
395+
<p class="form-error-general" id="form-error-general"></p>
339396

340-
</form>
341-
</div>
397+
<!-- Submit button -->
398+
<button type="submit" class="btn-submit" id="submit-btn">
399+
<span id="btn-label">Generate My Projects</span>
400+
<span id="btn-loading" style="display:none;">Finding matches...</span>
401+
</button>
402+
403+
</form>
342404
</div>
343405
</div>
406+
</div>
344407
</section>
345408

346409
<!-- ============================================================
@@ -364,11 +427,17 @@ <h2 class="section-title">Recommended Projects</h2>
364427
<div id="results-empty" style="display:none;">
365428
<div class="empty-state">
366429
<div class="empty-icon">
367-
<svg width="52" height="52" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/></svg>
430+
<svg width="52" height="52" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"
431+
stroke-linecap="round" stroke-linejoin="round">
432+
<circle cx="11" cy="11" r="8" />
433+
<line x1="21" y1="21" x2="16.65" y2="16.65" />
434+
</svg>
368435
</div>
369436
<h3>No Projects Found</h3>
370437
<p id="empty-message">Try adjusting your skills or selecting a different interest area.</p>
371-
<button class="btn-try-again" onclick="document.getElementById('find-project').scrollIntoView({behavior:'smooth'})">Try Different Inputs</button>
438+
<button class="btn-try-again"
439+
onclick="document.getElementById('find-project').scrollIntoView({behavior:'smooth'})">Try Different
440+
Inputs</button>
372441
</div>
373442
</div>
374443

@@ -443,4 +512,5 @@ <h4 class="footer-col-title">About</h4>
443512
<script src="/static/data/skills.js"></script>
444513
<script src="/static/script.js"></script>
445514
</body>
446-
</html>
515+
516+
</html>

0 commit comments

Comments
 (0)