From 253dbe6dbf8b3f2234897d373ff9fb6accc317b8 Mon Sep 17 00:00:00 2001 From: Soham Rayate Date: Tue, 2 Jun 2026 19:31:48 +0530 Subject: [PATCH] Fix merge conflicts and restore dark mode functionality --- static/script.js | 98 +++++++-------------- static/style.css | 201 +++++++++++++++++++++++++++++++++++++++++++ templates/index.html | 40 +++++++++ 3 files changed, 273 insertions(+), 66 deletions(-) diff --git a/static/script.js b/static/script.js index bb0f30e9..e866af4b 100644 --- a/static/script.js +++ b/static/script.js @@ -478,98 +478,70 @@ if (clearFiltersBtn) { // ---------------------------------------------------------- form.addEventListener("submit", function (evt) { - evt.preventDefault(); //stop the browser from reloading the page on form submit - clearAllErrors() - - if (skillsTextInput.value.trim()) { - addSkill(skillsTextInput.value); - skillsTextInput.value = ""; - hideSuggestions(); - } - - if (!validateForm()) return; //stop - anything missing/invalid - - setLoadingState(true); - - // Allow browser to paint spinner before request starts - requestAnimationFrame(function () { - - var payload = { - skills: skillsHidden.value.trim() || skillsTextInput.value.trim(), - level: document.getElementById("level").value, - interest: document.getElementById("interest").value, - time: document.getElementById("time").value - }; + evt.preventDefault(); - fetch("/api/recommend", { - method: "POST", - headers: { "Content-Type": "application/json" }, - body: JSON.stringify(payload) - }) - .then(function (res) { - return res.json(); - }) - .then(function (data) { - - setLoadingState(false); + clearAllErrors(); - if (data.error) { - var generalErr = document.getElementById("form-error-general"); + if (skillsTextInput.value.trim()) { + addSkill(skillsTextInput.value); + skillsTextInput.value = ""; + hideSuggestions(); + } - if (generalErr) { - generalErr.textContent = data.error; - } + if (!validateForm()) return; - return; - } + setLoadingState(true); - renderResults(data.projects || [], data.message); - }) - .catch(function () { + requestAnimationFrame(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 }; - //post the data to backend api as JSON, then handle the response fetch("/api/recommend", { method: "POST", - headers: { "Content-Type": "application/json" }, - body: JSON.stringify(payload) //convert object to json string + headers: { + "Content-Type": "application/json" + }, + body: JSON.stringify(payload) }) - .then(function (res) { return res.json(); }) //parse the response as JSON + .then(function (res) { + return res.json(); + }) .then(function (data) { + setLoadingState(false); + if (data.error) { var generalErr = document.getElementById("form-error-general"); if (generalErr) { - generalErr.textContent = - "Something went wrong. Please try again."; + generalErr.textContent = data.error; } - }); - }); - if (data.error) { - var generalErr = document.getElementById("form-error-general"); - if (generalErr) generalErr.textContent = data.error; + return; } + renderResults(data.projects || [], data.message); }) .catch(function (err) { - // this runs if the network request itself fails + setLoadingState(false); + var generalErr = document.getElementById("form-error-general"); - if (generalErr) generalErr.textContent = "Something went wrong. Please try again."; + + if (generalErr) { + generalErr.textContent = + "Something went wrong. Please try again."; + } + console.error("API request failed:", err); }); }); +}); // Manages the loading state of the form and results section(whats visible or not) function setLoadingState(isLoading) { @@ -609,14 +581,8 @@ if (clearFiltersBtn) { 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"; // Show a friendly custom message when the user selected an interest var selectedInterest = document.getElementById("interest")?.value; @@ -964,4 +930,4 @@ function scrollToTop() { if (scrollTopBtn) { window.addEventListener('scroll', handleScroll); scrollTopBtn.addEventListener('click', scrollToTop); -} +} \ No newline at end of file diff --git a/static/style.css b/static/style.css index b399ee5f..36f17d2b 100644 --- a/static/style.css +++ b/static/style.css @@ -2983,4 +2983,205 @@ select:focus { flex: 1; white-space: pre; color: #e6edf3; +} + +@media (prefers-reduced-motion: reduce) { + html:focus-within { + scroll-behavior: auto; + } + + *, + *::before, + *::after { + animation-duration: 0.01ms !important; + animation-iteration-count: 1 !important; + transition-duration: 0.01ms !important; + } +} + +.theme-toggle { + width: 42px; + height: 42px; + border-radius: 12px; + border: 1px solid rgba(255,255,255,0.15); + background: rgba(255,255,255,0.08); + color: white; + cursor: pointer; + font-size: 1rem; + transition: all 0.25s ease; +} + +.theme-toggle:hover { + background: rgba(255,255,255,0.18); + transform: translateY(-2px); +} + +/* ============================================================ + WORKING DARK MODE +============================================================ */ + +[data-theme="dark"] body { + background: #0f172a !important; + color: #f8fafc !important; +} + +[data-theme="dark"] .navbar, +[data-theme="dark"] .hero, +[data-theme="dark"] .stats-section, +[data-theme="dark"] .features-section, +[data-theme="dark"] .how-section, +[data-theme="dark"] .form-section, +[data-theme="dark"] .results-section, +[data-theme="dark"] .cta-section, +[data-theme="dark"] .footer, +[data-theme="dark"] .skill-strip { + background: #0f172a !important; + color: #f8fafc !important; +} + +[data-theme="dark"] .feature-card, +[data-theme="dark"] .form-card, +[data-theme="dark"] .project-card, +[data-theme="dark"] .step-card, +[data-theme="dark"] .stat-card, +[data-theme="dark"] .hero-visual-main, +[data-theme="dark"] .hero-visual-card { + background: #1e293b !important; + color: #f8fafc !important; +} + +[data-theme="dark"] h1, +[data-theme="dark"] h2, +[data-theme="dark"] h3, +[data-theme="dark"] p, +[data-theme="dark"] span, +[data-theme="dark"] a, +[data-theme="dark"] label { + color: #f8fafc !important; +} + +/* ============================================================ + Form Dark Mode Fixes +============================================================ */ + +[data-theme="dark"] .recommendation-form, +[data-theme="dark"] .recommendation-card, +[data-theme="dark"] .input-group, +[data-theme="dark"] .select-wrapper, +[data-theme="dark"] .skill-input-wrapper { + background: #1e293b !important; + color: #f8fafc !important; +} + +[data-theme="dark"] input, +[data-theme="dark"] select, +[data-theme="dark"] textarea { + background: #0f172a !important; + color: #f8fafc !important; + border: 1px solid #334155 !important; +} + +[data-theme="dark"] input::placeholder, +[data-theme="dark"] textarea::placeholder { + color: #94a3b8 !important; +} + +[data-theme="dark"] .skill-chip, +[data-theme="dark"] .skill-tag, +[data-theme="dark"] .ss-item { + background: #334155 !important; + color: #f8fafc !important; +} + +[data-theme="dark"] .recommendation-section, +[data-theme="dark"] .form-container { + background: #0f172a !important; +} + +/* ============================================================ + Final Dark Mode Cleanup +============================================================ */ + +[data-theme="dark"] button, +[data-theme="dark"] .btn, +[data-theme="dark"] .btn-secondary, +[data-theme="dark"] .clear-btn, +[data-theme="dark"] .github-import-btn { + background: #334155 !important; + color: #f8fafc !important; + border-color: #475569 !important; +} + +[data-theme="dark"] input, +[data-theme="dark"] select { + background: #0f172a !important; + color: #f8fafc !important; + border: 1px solid #475569 !important; +} + +[data-theme="dark"] .skills-container, +[data-theme="dark"] .skills-list, +[data-theme="dark"] .skill-suggestions { + background: transparent !important; +} + +[data-theme="dark"] .form-card *, +[data-theme="dark"] .recommendation-form * { + border-color: #475569; +} + +[data-theme="dark"] { + background: #020617; + color: #f8fafc; +} + +[data-theme="dark"] body { + background: #020617; + color: #f8fafc; +} + +[data-theme="dark"] .form-section, +[data-theme="dark"] .results-section, +[data-theme="dark"] .how-section, +[data-theme="dark"] .features-section { + background: #020617; +} + +[data-theme="dark"] .form-card { + background: #1e293b; + border: 1px solid #475569; +} + +[data-theme="dark"] .skill-input-wrap, +[data-theme="dark"] input, +[data-theme="dark"] select { + background: #0f172a !important; + color: #f8fafc !important; + border-color: #475569 !important; +} + +[data-theme="dark"] input::placeholder { + color: #94a3b8; +} + +[data-theme="dark"] label, +[data-theme="dark"] .form-hint, +[data-theme="dark"] .section-title, +[data-theme="dark"] .section-sub { + color: #f8fafc; +} + +[data-theme="dark"] .skill-chip { + background: #334155; + color: #f8fafc; + border-color: #64748b; +} + +[data-theme="dark"] .project-card, +[data-theme="dark"] .feature-card, +[data-theme="dark"] .step-card, +[data-theme="dark"] .stat-card { + background: #1e293b; + color: #f8fafc; + border-color: #475569; } \ No newline at end of file diff --git a/templates/index.html b/templates/index.html index e90b7946..9f3151b5 100644 --- a/templates/index.html +++ b/templates/index.html @@ -28,6 +28,14 @@ Features Find Project GitHub +