Skip to content

Added Contact Us page with navigation links and responsive UI #354

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
Suhas334 wants to merge 3 commits into from
Closed

Added Contact Us page with navigation links and responsive UI #354

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
92c2273
Added Contact Us page with navigation links and responsive UI
Suhas334 May 20, 2026
59b32fb
Address PR feedback: refactor contact page layout, CSS, and dark mode
Suhas334 Jun 2, 2026
fb6950b
Merge branch 'main' into feat/contact-us-page
Suhas334 Jun 2, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 5 additions & 0 deletions routes/main_routes.py
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -33,6 +33,11 @@ def index():
stats = get_project_stats()
return render_template("index.html", stats=stats)

@main.route("/contact")
def contact():
"""Render the Contact Us page."""
return render_template("contact.html")

@main.route("/health")
def health_check():
"""
Expand Down
20 changes: 3 additions & 17 deletions static/script.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -731,16 +731,10 @@ if (clearFiltersBtn) {
renderResults(data.projects || [], data.message);
})
.catch(function () {

setLoadingState(false);
//combine form values into an object to send to server/api
var payload = {
// Prefer the hidden input value; fall back to raw text box if hidden input is empty
skills: skillsHidden.value.trim() || skillsTextInput.value.trim(),
level: document.getElementById("level").value,
interest: document.getElementById("interest").value,
time: document.getElementById("time").value
};
showError("A network error occurred. Please try again.");
});
});
});

// Manages the loading state of the form and results section(whats visible or not)
Expand Down Expand Up @@ -778,12 +772,6 @@ if (clearFiltersBtn) {
// Clear out any cards from a previous search before showing new ones
resultsGrid.innerHTML = "";

if (!projects || projects.length === 0) {
resultsGrid.style.display = "none";
resultsEmptyEl.style.display = "block";
resultsGrid.style.display = "none";
resultsEmptyEl.style.display = "block";
if (message && emptyMessageEl) emptyMessageEl.textContent = message;
if (!projects || projects.length === 0) { //if no projects returned from api, show the "no results" message and hide the grid
resultsGrid.style.display = "none";
resultsEmptyEl.style.display = "block";
Expand Down Expand Up @@ -1130,8 +1118,6 @@ if (
fetchBtn.textContent = 'Fetch Skills';
}
});
}

} // end github modal handlers

/* ---- Scroll-to-top button ---- */
Expand Down
263 changes: 263 additions & 0 deletions templates/contact.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,263 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description"
content="DevPath recommends real coding projects based on your skills, level, and interests — with full roadmaps and starter code." />
<title>Contact Us — DevPath</title>
<script>
document.documentElement.setAttribute("data-entry-anim", "true");
</script>
<link rel="icon" href="/static/favicon.svg" type="image/svg+xml" />
<!--
Anti-FOUC theme script — MUST come before the stylesheet.
Reads localStorage synchronously and sets html[data-theme] so the
browser applies the correct CSS variables on the very first paint.
Falls back to the OS prefers-color-scheme if no preference is saved.
-->
<script>
(function () {
try {
/* Default to light mode; only honour a value the user explicitly saved */
var saved = localStorage.getItem('devpath-theme');
document.documentElement.dataset.theme = saved || 'light';
} catch (e) { /* localStorage blocked in some private modes */ }
}());
</script>
<link rel="stylesheet" href="/static/style.css" />
<link href="https://fonts.googleapis.com/css2?family=Sora:wght@400;600;700;800&family=Inter:wght@400;500;600&display=swap" rel="stylesheet" />
</head>
<body>
<!-- ============================================================
Navigation
============================================================ -->
<nav class="navbar" id="navbar" aria-label="Main navigation">
<div class="nav-inner">
<a href="/" class="nav-logo">Dev<span class="nav-logo-accent">Path</span></a>
<div class="nav-links">
<a href="/" class="nav-link">Home</a>
<a href="/contact" class="nav-link">Contact</a>
<a href="/#how-it-works" class="nav-link">How It Works</a>
<a href="/#features" class="nav-link">Features</a>
<a href="/#find-project" class="nav-link">Find Project</a>
<a href="https://github.com/komalharshita/DevPath" target="_blank" rel="noopener noreferrer" class="nav-btn-outline">GitHub</a>
<!-- Dark/light mode toggle — aria-pressed and aria-label are set
dynamically by initTheme() in script.js on every page load -->
<button class="theme-toggle" id="theme-toggle-desktop"
aria-pressed="false"
aria-label="Switch to dark mode">
<!-- Moon icon: shown in light mode (clicking switches to dark) -->
<svg class="icon-moon" width="16" height="16" viewBox="0 0 24 24"
fill="none" stroke="currentColor" stroke-width="2"
stroke-linecap="round" stroke-linejoin="round"
aria-hidden="true">
<path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"/>
</svg>
<!-- Sun icon: shown in dark mode (clicking switches to light) -->
<svg class="icon-sun" width="16" height="16" viewBox="0 0 24 24"
fill="none" stroke="currentColor" stroke-width="2"
stroke-linecap="round" stroke-linejoin="round"
aria-hidden="true">
<circle cx="12" cy="12" r="5"/>
<line x1="12" y1="1" x2="12" y2="3"/>
<line x1="12" y1="21" x2="12" y2="23"/>
<line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/>
<line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/>
<line x1="1" y1="12" x2="3" y2="12"/>
<line x1="21" y1="12" x2="23" y2="12"/>
<line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/>
<line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/>
</svg>
</button>
</div>
<!-- Mobile hamburger toggle -->
<button class="nav-mobile-toggle" id="nav-mobile-toggle"
aria-label="Toggle navigation"
aria-expanded="false"
aria-controls="nav-mobile-menu">
<span></span><span></span><span></span>
</button>
</div>
<!-- Mobile menu — includes upstream's #home link and HEAD's theme toggle + accessibility attrs -->
<div class="nav-mobile-menu" id="nav-mobile-menu" role="menu">
<a href="/" class="nav-mobile-link" role="menuitem">Home</a>
<a href="/contact" class="nav-mobile-link" role="menuitem">Contact</a>
<a href="/#how-it-works" class="nav-mobile-link" role="menuitem">How It Works</a>
<a href="/#features" class="nav-mobile-link" role="menuitem">Features</a>
<a href="/#find-project" class="nav-mobile-link" role="menuitem">Find Project</a>
<a href="https://github.com/komalharshita/DevPath" target="_blank" rel="noopener noreferrer" class="nav-mobile-link" role="menuitem">GitHub</a>
<!-- Theme toggle in mobile menu — same .theme-toggle class so
the JS engine updates both this and the desktop button together -->
<button class="nav-mobile-link theme-toggle" id="theme-toggle-mobile"
style="background:none;border:none;text-align:left;cursor:pointer;display:flex;align-items:center;gap:10px;width:100%;padding:10px 0;font-size:0.95rem;font-weight:500;color:rgba(255,255,255,0.8);"
aria-pressed="false"
aria-label="Switch to dark mode"
role="menuitem">
<svg class="icon-moon" width="16" height="16" viewBox="0 0 24 24"
fill="none" stroke="currentColor" stroke-width="2"
stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
<path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"/>
</svg>
<svg class="icon-sun" width="16" height="16" viewBox="0 0 24 24"
fill="none" stroke="currentColor" stroke-width="2"
stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
<circle cx="12" cy="12" r="5"/>
<line x1="12" y1="1" x2="12" y2="3"/>
<line x1="12" y1="21" x2="12" y2="23"/>
<line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/>
<line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/>
<line x1="1" y1="12" x2="3" y2="12"/>
<line x1="21" y1="12" x2="23" y2="12"/>
<line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/>
<line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/>
</svg>
<span class="theme-toggle-label">Dark Mode</span>
</button>
</div>
</nav>
<section class="contact-section">

<div class="contact-container">

<div class="contact-header">

<h1>Contact Us</h1>

<p>
Have questions, suggestions, or want to contribute to DevPath?
Connect with the community and help improve the platform.
</p>

</div>

<div class="contact-grid">

<div class="contact-card">

<div class="contact-icon">
💻
</div>

<h3>GitHub Repository</h3>

<p>
Explore the project source code, contribute features,
and collaborate with contributors.
</p>

<a
href="https://github.com/komalharshita/DevPath"
target="_blank" rel="noopener noreferrer"
class="contact-btn"
>
Visit GitHub
</a>

</div>

<div class="contact-card">

<div class="contact-icon">
🐛
</div>

<h3>Report Issues</h3>

<p>
Found a bug or have a feature request?
Open an issue and help improve DevPath.
</p>

<a
href="https://github.com/komalharshita/DevPath/issues"
target="_blank" rel="noopener noreferrer"
class="contact-btn"
>
Open Issues
</a>

</div>

<div class="contact-card">

<div class="contact-icon">
🚀
</div>

<h3>Community Support</h3>

<p>
Join the open-source community and connect
with other developers and contributors.
</p>

<a
href="https://github.com/komalharshita/DevPath"
target="_blank" rel="noopener noreferrer"
class="contact-btn"
>
Join Community
</a>

</div>

</div>

</div>

</section>
<!-- ============================================================
Footer
============================================================ -->
<footer class="footer">
<div class="footer-inner">
<div class="footer-col footer-col--brand">
<span class="footer-logo">Dev<span class="footer-logo-accent">Path</span></span>
<p class="footer-tagline">Open source. Built for learners, by learners.</p>
<p class="footer-tagline">Helping developers find meaningful projects to build their skills.</p>
</div>

<div class="footer-col">
<h4 class="footer-col-title">Quick Links</h4>
<ul class="footer-links-list">
<li><a href="/#home">Home</a></li>
<li><a href="/#how-it-works">How It Works</a></li>
<li><a href="/#features">Features</a></li>
<li><a href="/#find-project">Find Project</a></li>
</ul>
</div>

<div class="footer-col">
<h4 class="footer-col-title">Resources</h4>
<ul class="footer-links-list">
<li><a href="/project/1">Sample Project</a></li>
<li><a href="https://github.com/komalharshita/DevPath" target="_blank" rel="noopener noreferrer">GitHub</a></li>
<li><a href="https://github.com/komalharshita/DevPath/blob/main/CONTRIBUTING.md" target="_blank" rel="noopener noreferrer">Contributing Guide</a></li>
<li><a href="https://github.com/komalharshita/DevPath/issues" target="_blank" rel="noopener noreferrer">Report an Issue</a></li>
</ul>
</div>

<div class="footer-col">
<h4 class="footer-col-title">About Us</h4>
<ul class="footer-links-list">
<li><a href="/contact">Contact Us</a></li>
<li><a href="/#our-story">Our Story</a></li>
<li><a href="https://github.com/komalharshita/DevPath" target="_blank" rel="noopener noreferrer">Open Source</a></li>
<li><a href="https://github.com/komalharshita/DevPath/blob/main/LICENSE" target="_blank" rel="noopener noreferrer">License</a></li>
</ul>
</div>
</div>

<div class="footer-bottom">
<p>DevPath is open source. Licensed under the MIT License.</p>
<div class="footer-bottom-links">
<a href="/#our-story">About Us</a>
<a href="https://github.com/komalharshita/DevPath/blob/main/LICENSE" target="_blank" rel="noopener noreferrer">Project License</a>
</div>
</div>
</footer>
<script src="/static/data/skills.js"></script>
<script src="/static/script.js"></script>
</body>
</html>
3 changes: 3 additions & 0 deletions templates/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,6 +25,7 @@
<a href="/" class="nav-logo">Dev<span class="nav-logo-accent">Path</span></a>
<div class="nav-links">
<a href="#home" class="nav-link">Home</a>
<a href="/contact" class="nav-link">Contact</a>
<a href="#how-it-works" class="nav-link">How It Works</a>
<a href="#features" class="nav-link">Features</a>
<a href="#find-project" class="nav-link">Find Project</a>
Expand Down Expand Up @@ -70,6 +71,7 @@
<!-- Mobile menu — includes upstream's #home link and HEAD's theme toggle + accessibility attrs -->
<div class="nav-mobile-menu" id="nav-mobile-menu" role="menu">
<a href="#home" class="nav-mobile-link" role="menuitem">Home</a>
<a href="/contact" class="nav-mobile-link" role="menuitem">Contact</a>
<a href="#how-it-works" class="nav-mobile-link" role="menuitem">How It Works</a>
<a href="#features" class="nav-mobile-link" role="menuitem">Features</a>
<a href="#find-project" class="nav-mobile-link" role="menuitem">Find Project</a>
Expand Down Expand Up @@ -698,6 +700,7 @@ <h4 class="footer-col-title">Resources</h4>
<div class="footer-col">
<h4 class="footer-col-title">About Us</h4>
<ul class="footer-links-list">
<li><a href="/contact">Contact Us</a></li>
<li><a href="#our-story">Our Story</a></li>
<li><a href="https://github.com/komalharshita/DevPath" target="_blank" rel="noopener noreferrer">Open Source</a></li>
<li><a href="https://github.com/komalharshita/DevPath/blob/main/LICENSE" target="_blank" rel="noopener noreferrer">License</a></li>
Expand Down
Loading