From 393b02d11b129186acaccfc55853dc65394925db Mon Sep 17 00:00:00 2001 From: bivekm01 <2303051051182@paruluniversity.ac.in> Date: Tue, 9 Jun 2026 11:17:49 +0545 Subject: [PATCH] fix: improve track progress visibility and UI interactions --- .gitignore | Bin 2507 -> 2647 bytes static/script.js | 65 ++++++++++++++++++++++++------------------- static/style.css | 62 ++++++++++++++++++++++++++--------------- templates/index.html | 33 +--------------------- 4 files changed, 76 insertions(+), 84 deletions(-) diff --git a/.gitignore b/.gitignore index c83bba18aebe3efb1e9334163dcf695f598d4dec..8f16829d2b8f91044ed24758d985a1d1d19bfed2 100644 GIT binary patch literal 2647 zcmb7G+m72d5cRVG|AT^kGhhmBKcLuVo1j38EV2*nn?O-xnKnfdB;`xLzGrl^wcczK z7_i8>b9iQk57}QjDl$e|a&25K*FqT?yM=M;zy#xJ{`iaHPdxe6Qk1PW6&N|zI~|h? zm({ZWJ!GFun-YaAkawHtN$IVIZeD7eE2(w_t!|?&#H=)V>0F8_NH0p6zRirgf!AnT z>%?X%I_4!=wQFQJ#Jr(e7PT~n!ewH^b}jC#rg>8eQ1nK){|s76v` znLqv(D7GfWwb(~z2hGZ5uvTu`B}A*LM4-YPwLrKd?qi|LDn=yk}G$l018}V5n*|?lt}j_>R3!k8xFQw zK4hbXY^x1r%Go5fMXIv~DbSmMTY^m5!J8OmMNJl75>%19qxACT}wPo|KC>z`x*$Nk}32c~}+!no35vT?bgS4r$eG?)t+j8R( ziIdf4gdh{)yn`~ngU13$w*b7+_COVOoZHs++u5e*u8`S$?#CWTv*Qln;+w?PR)#hw zVBAv>dl?W_PlRs>jIv7l)B<#KYA<=3Ne;BWWNs{=Zlw`EI5Pm`#fIQbC>O} z*SziJ5kR{!b)d`Kkk}uF^Xe}z`9B|BMY9uY*Wq?88gPC({?b{S5r4iX9;w>Ms4JRF z`|`}_e?6M{)v0RXde()zE5FB-FMO7M|X4XZLbzIM+j}i&B+*Gb6o+!Xk z^@IYP(f@$uUvCAu1ZNT=UK+;CoQg}~(z?~WE%CwewWO{lKlR-u7wFEZ=rCJol-!^) zvLC${+aMb{xxmf4PsYd{zTY9?aUP`k&ccKpaaPE|R`Y0>J0ZWL1|0#7?G*>mM_r%a zq<0PTmHf6pbAfq8=!bWDBcIORp_!09>fmfc=m0z^25T=AxSK!G7QKwyYaBY>!2jA> zG_ZH70x;nMZ>0M2(peqTIi0i*?TP`2q7Fu}DQ9=}7EgMMafd+W8k6CUcSQ*Na3p_g zTe%bJ5Q?XMJx-r@+oJ04^G8(rH2$AP6snO2z?!4`Q`@$`W8l9%|43xtuh7T!zWgkz zkHainEpMhGhx>AAN{oI?MxYbVn{ms$-_MGC2bnCnOqQ^bh1O6MtL29QKKN9$l^BrM zp7#x2*ZSVzO^xm?-n`#^xSR6B%Y~l|IX@Kehg!HDm)&!MXV5gW5qIz0tDbt+reWxg|cnYYQPO3~!xFF$LjSE7F_1xE)!&ww+F}p=i%r zvU1ytu#3E>PBfh`hQev)!Y*e44tQ!5`8X+Mval*Rt(xSViIY4mYGgpP{QmbqaWE;a z*mHDt)KgAIj@vAqKR08nEc4jE+Ak!HZkLjNXmc*uN%Urv$_eO#NZQ#ZQG`>g6+g-$ zQcxm^cZ43DLM&d$o#^Q71eb140Tf>08DX{($nPoY*qjqJ#)B%&+Vw^os-?3@Xp7v| zJ>u5ufTBPqZDYk|QPz>g0g2S2%=|%w#2<$i^)`ivC~}sB*Fc5>w|7fbs)I$fDz&$|+&{`SQG z`Q#KW!_=-|a>aTuKJI_bhOTJ8yrAt#twq#|u4H|C%&@+u0i$S$r1x}fC7vvL>~a)~ zKxfpQWvVqgEiJPoy0}`(?gcVvF&{4a4-{~QdO%Mt$zNghw}n`4swJPrQ=frxMMMR1 zzbw=i4LcoqX_K?L&*PZj3?nr)1(A(bvz3{9?>*ZD(bK_&-7Rwx`mumV9LVdf{uv_d zC=vNaW15fEoR25Jr5^olZW%x}TJ`uEIgh*>Gn+Bi2Frsm)81m!(L0O=vU?qz?FlW7 z5kJ{_qL4@N18p#q@_>xv+?v?m2a7@U4(eCAZ+juXJ!Ok80xV9Q>kT>Jd=@(A=|wBW zgWjZU?^@w1Z5K4~?84vLDt9Qe>@dF08{^&CCQJ2xMx$izM+%Y2UhF74_NTT(DJT#= z9Dl;8|1V!$dS86u(5Gp4RhK0OH=j;@i~U?>1mdq_`U2yRqa_{dh`SXKOS}8ic7At%HT1MJCDr0GzI4QUCw| diff --git a/static/script.js b/static/script.js index 577a5c2..09af271 100644 --- a/static/script.js +++ b/static/script.js @@ -580,9 +580,9 @@ updateProfileWidgets(); evt.preventDefault(); //stop the browser from reloading the page on form submit clearAllErrors(); - if (skillsTextInput.value.trim()) { - addSkill(skillsTextInput.value); - skillsTextInput.value = ""; + if (skillsInput.value.trim()) { + addSkill(skillsInput.value); + skillsInput.value = ""; hideSuggestions(); } @@ -707,32 +707,6 @@ updateProfileWidgets(); span.className = "project-tag project-tag--" + normalize(type).replace(/[^a-z0-9_-]/g, "-"); span.textContent = text; return span; - - //takes the array of projects from the api and draws them on the page as cards - //if array is empty it shows the "no results" message instead - function renderResults(projects, message) { - resultsSection.style.display = "block"; - resultsLoadingEl.style.display = "none"; - // 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"; - if (message && emptyMessageEl) emptyMessageEl.textContent = message; - resultsSection.scrollIntoView({ behavior: "smooth" }); - return; - } - - resultsEmptyEl.style.display = "none"; - resultsGrid.style.display = "grid"; - - projects.forEach(function (project) { - resultsGrid.appendChild(buildProjectCard(project)); - }); - - resultsSection.scrollIntoView({ behavior: "smooth" }); - main } function buildProjectCard(project) { @@ -1247,3 +1221,36 @@ updateProfileWidgets(); }); update(); })(); + +(function initScrollSpy() { + var sections = document.querySelectorAll("section[id], header[id]"); + var navLinks = document.querySelectorAll(".nav-link, .nav-mobile-link"); + + if (sections.length === 0 || navLinks.length === 0) return; + + var observerOptions = { + root: null, + rootMargin: "-20% 0px -70% 0px", + threshold: 0 + }; + + var observer = new IntersectionObserver(function (entries) { + entries.forEach(function (entry) { + if (entry.isIntersecting) { + var id = entry.target.getAttribute("id"); + navLinks.forEach(function (link) { + var href = link.getAttribute("href"); + if (href === "#" + id) { + link.classList.add("active"); + } else if (href && href.startsWith("#")) { + link.classList.remove("active"); + } + }); + } + }); + }, observerOptions); + + sections.forEach(function (sec) { + observer.observe(sec); + }); +})(); diff --git a/static/style.css b/static/style.css index a4ababd..eb1bd00 100644 --- a/static/style.css +++ b/static/style.css @@ -662,12 +662,14 @@ html[data-entry-anim="true"] .form-card form > .btn-submit { animat opacity 0.25s ease; } -.nav-link:hover { +.nav-link:hover, +.nav-link.active { color: #ffffff; text-decoration: none; } -.nav-link:hover::after { +.nav-link:hover::after, +.nav-link.active::after { transform: translateX(-50%) scaleX(1); opacity: 1; } @@ -788,12 +790,14 @@ html[data-entry-anim="true"] .form-card form > .btn-submit { animat opacity 0.25s ease; } -.nav-mobile-link:hover { +.nav-mobile-link:hover, +.nav-mobile-link.active { color: #ffffff; text-decoration: none; } -.nav-mobile-link:hover::after { +.nav-mobile-link:hover::after, +.nav-mobile-link.active::after { transform: scaleX(1); opacity: 1; } @@ -3295,16 +3299,19 @@ input[type="text"]:not(.skill-input-wrap input):focus { .profile-card, .badge-card, .achievement-card, +.history-card, .leaderboard-card { - background: rgba(255, 255, 255, 0.04); - border: 1px solid rgba(148, 163, 184, 0.12); + background: var(--surface); + border: 1px solid var(--border); border-radius: 28px; padding: 28px; + box-shadow: var(--shadow-sm); } .profile-card-header, .badge-card-header, .achievement-card-header, +.history-card-header, .leaderboard-card-header { display: flex; align-items: center; @@ -3316,19 +3323,21 @@ input[type="text"]:not(.skill-input-wrap input):focus { .profile-label { display: block; margin-bottom: 8px; - color: rgba(148, 163, 184, 1); + color: var(--text-body); font-size: 0.92rem; + font-weight: 500; } .profile-card h3 { font-size: 3rem; margin: 0; + color: var(--text-heading); } .progress-meter { width: 100%; height: 16px; - background: rgba(148, 163, 184, 0.14); + background: var(--surface-hover); border-radius: 999px; overflow: hidden; margin-bottom: 20px; @@ -3342,9 +3351,10 @@ input[type="text"]:not(.skill-input-wrap input):focus { width: 0; height: 100%; background: linear-gradient(120deg, #6366f1, #22c55e); - color: #fff; + color: #ffffff; font-size: 0.8rem; font-weight: 700; + text-shadow: 0 1px 2px rgba(0,0,0,0.4); transition: width 0.4s ease; } @@ -3366,7 +3376,7 @@ input[type="text"]:not(.skill-input-wrap input):focus { justify-content: space-between; gap: 12px; padding: 14px 0; - border-bottom: 1px solid rgba(148, 163, 184, 0.08); + border-bottom: 1px solid var(--border); } .progress-stats li:last-child, @@ -3379,14 +3389,16 @@ input[type="text"]:not(.skill-input-wrap input):focus { .progress-stats strong, .leaderboard-list span, .achievement-item strong { - color: #e2e8f0; + color: var(--text-body); + font-weight: 500; } .progress-stats span, .leaderboard-list strong, .achievement-item span, .achievement-item small { - color: rgba(148, 163, 184, 1); + color: var(--text-heading); + font-weight: 700; } .progress-badge-grid { @@ -3401,18 +3413,20 @@ input[type="text"]:not(.skill-input-wrap input):focus { gap: 12px; padding: 14px 16px; border-radius: 18px; - background: rgba(148, 163, 184, 0.06); - color: rgba(226, 232, 240, 1); + background: var(--surface-hover); + color: var(--text-heading); + border: 1px solid var(--border); transition: transform 0.2s ease, background 0.2s ease; } .progress-badge--unlocked { background: rgba(34, 197, 94, 0.12); - color: #d1fae5; + color: var(--text-heading); + border-color: rgba(34, 197, 94, 0.3); } .progress-badge--locked { - opacity: 0.6; + opacity: 0.7; } .badge-icon { @@ -3422,7 +3436,7 @@ input[type="text"]:not(.skill-input-wrap input):focus { align-items: center; justify-content: center; border-radius: 999px; - background: rgba(148, 163, 184, 0.14); + background: var(--surface-hover); font-size: 0.88rem; } @@ -3442,7 +3456,7 @@ input[type="text"]:not(.skill-input-wrap input):focus { } .achievement-empty { - color: rgba(148, 163, 184, 1); + color: var(--text-light); padding: 16px 0; } @@ -3452,17 +3466,19 @@ input[type="text"]:not(.skill-input-wrap input):focus { justify-content: center; gap: 8px; background: transparent; - border: 1px solid rgba(148, 163, 184, 0.24); - color: #e2e8f0; + border: 1px solid var(--border); + color: var(--text-body); border-radius: 999px; padding: 12px 18px; cursor: pointer; - transition: background 0.2s ease, border-color 0.2s ease; + font-weight: 500; + transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease; } .btn-ghost:hover { - background: rgba(255, 255, 255, 0.06); - border-color: rgba(148, 163, 184, 0.4); + background: var(--surface-hover); + border-color: var(--text-light); + color: var(--text-heading); } .btn-mark-complete { diff --git a/templates/index.html b/templates/index.html index fd3cb94..94cb268 100644 --- a/templates/index.html +++ b/templates/index.html @@ -921,38 +921,7 @@

About Us

- +