diff --git a/static/script.js b/static/script.js
index aebc9225..7880f7a5 100644
--- a/static/script.js
+++ b/static/script.js
@@ -15,6 +15,12 @@
var isIndexPage = !!document.getElementById("recommend-form");
// PROJECT_ID is set by the server only on detail pages, so if it's missing we're elsewhere
var isDetailPage = typeof PROJECT_ID !== "undefined";
+var modal = document.getElementById('github-modal-overlay');
+var openModalBtn = document.getElementById('btn-show-github'); // The trigger in your main form
+var closeModalBtn = document.getElementById('btn-close-github');
+var fetchBtn = document.getElementById('btn-fetch-github');
+var githubInput = document.getElementById('github-username');
+var errorMsg = document.getElementById('github-modal-error');
// ============================================================
@@ -350,6 +356,9 @@ if (isIndexPage) {
}
function syncSkillsHiddenInput() {
+ if (!skillsHidden){
+ var skillsHidden = document.getElementById("skills");
+ }
// Keep the hidden in sync for form serialisation
// The API expects a comma-separated string, so join the array that way
skillsHidden.value = selectedSkills.join(", ");
@@ -715,6 +724,66 @@ if (isDetailPage) {
}
} // end isDetailPage
+if (
+ openModalBtn &&
+ closeModalBtn &&
+ modal &&
+ githubInput &&
+ fetchBtn &&
+ errorMsg
+) {
+// 1. Open Github Input Modal
+ openModalBtn.addEventListener('click', (e) => {
+ e.preventDefault();
+ modal.classList.add('active');
+ githubInput.focus();
+ });
+
+ // 2. Close Github Input Modal
+ const closeGithubModal = () => {
+ modal.classList.remove('active');
+ githubInput.value = '';
+ errorMsg.textContent = '';
+ };
+
+ closeModalBtn.addEventListener('click', closeGithubModal);
+
+ // Close on clicking outside the card
+ modal.addEventListener('click', (e) => {
+ if (e.target === modal) closeGithubModal();
+ });
+
+ // 3. Fetch Skills Logic
+ fetchBtn.addEventListener('click', async () => {
+ const username = githubInput.value.trim();
+ if (!username) return;
+
+ fetchBtn.disabled = true;
+ fetchBtn.textContent = 'Syncing...';
+
+ try {
+ const response = await fetch(`https://api.github.com/users/${username}/repos`);
+ if (!response.ok) throw new Error();
+
+ const repos = await response.json();
+ const langs = [...new Set(repos.map(r => r.language).filter(Boolean))];
+
+ if (langs.length > 0) {
+ langs.forEach(lang => {
+ if (typeof addSkill === 'function') addSkill(lang);
+ });
+ closeGithubModal();
+ } else {
+ errorMsg.textContent = "No public languages found.";
+ }
+ } catch (err) {
+ errorMsg.textContent = err.message ?? "Failed to fetch skills";
+ } finally {
+ fetchBtn.disabled = false;
+ fetchBtn.textContent = 'Fetch Skills';
+ }
+ });
+}
/* ---- Scroll-to-top button ---- */
@@ -743,4 +812,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 cb63af27..b9cf4142 100644
--- a/static/style.css
+++ b/static/style.css
@@ -1789,6 +1789,49 @@ select:focus {
.section-sub { margin-bottom: 40px; }
}
+.github-input-reveal input {
+ border: 1px solid var(--border);
+ border-radius: var(--r-xs);
+ font-family: var(--font-body);
+}
+
+.github-input-reveal input:focus {
+ border-color: var(--indigo-400);
+ outline: none;
+ background: var(--white);
+}
+
+#btn-show-github {
+ border: 1px solid transparent;
+ transition: all var(--t);
+ color: var(--indigo-600);
+ background: var(--indigo-50);
+}
+
+#btn-show-github:hover {
+ background: var(--indigo-100);
+ border-color: rgba(79, 110, 247, 0.2);
+}
+
+#github-modal-overlay.active {
+ display: flex !important; /* Overrides the 'none' display */
+ backdrop-filter: blur(4px);
+ animation: fadeIn 0.2s ease;
+}
+
+#github-modal-overlay .sidebar-card {
+ transform: scale(0.9);
+ transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
+}
+
+#github-modal-overlay.active .sidebar-card {
+ transform: scale(1);
+}
+
+@keyframes fadeIn {
+ from { opacity: 0; }
+ to { opacity: 1; }
+}
@media (max-width: 768px) {
diff --git a/templates/index.html b/templates/index.html
index 49556f7d..05ad04c1 100644
--- a/templates/index.html
+++ b/templates/index.html
@@ -337,16 +337,24 @@ Find Your Next Project