From edded03fd8d16d8cd966486135006b7c2d5cef04 Mon Sep 17 00:00:00 2001 From: HarshTheSharma Date: Wed, 29 Oct 2025 20:07:06 -0700 Subject: [PATCH 1/3] created manage page with login prompt --- src/index.html | 8 +++--- src/manage/handler.js | 59 +++++++++++++++++++++++++++++++++++++++++++ src/manage/index.html | 47 ++++++++++++++++++++++++++++++++++ src/manage/style.css | 27 ++++++++++++++++++++ 4 files changed, 137 insertions(+), 4 deletions(-) create mode 100644 src/manage/handler.js create mode 100644 src/manage/index.html create mode 100644 src/manage/style.css diff --git a/src/index.html b/src/index.html index 2da2783..33f76c9 100644 --- a/src/index.html +++ b/src/index.html @@ -17,12 +17,12 @@ flex-direction: column; align-items: center; gap: 18px; - padding: 0 16px 40px; /* removed the 28px top padding */ + padding: 0 16px 40px; } /* --- Top Bar pinned to very top --- */ .topbar { - position: fixed; /* keeps it pinned even when scrolling */ + position: fixed; top: 0; left: 0; width: 100%; @@ -33,7 +33,7 @@ justify-content: space-between; padding: 10px 22px; box-sizing: border-box; - z-index: 1000; /* ensures it stays above everything else */ + z-index: 1000; } .logo { @@ -171,7 +171,7 @@
- +
diff --git a/src/manage/handler.js b/src/manage/handler.js new file mode 100644 index 0000000..f57aadd --- /dev/null +++ b/src/manage/handler.js @@ -0,0 +1,59 @@ +console.log('manage page handler.js loaded'); + +function q(s,p=document){return p.querySelector(s);} + +const overlay=q('#loginOverlay'); +const err=q('#loginError'); +const loginBtn=q('#loginBtn'); +const signupLink=q('#signupLink'); + +// modify these functions to hook up with database/backend +async function login(u,p){return u==='local'&&p==='local';} +async function fetchPosts(){return[{id:'1',title:'Sample Skill Swap',author:'Harsh'}];} +async function createPost(p){console.log('createPost',p);} +async function deletePost(id){console.log('deletePost',id);} + +function addPost(p){ + const list=q('#managePostsList'); + const row=document.createElement('div'); + row.className='post-row'; + row.innerHTML=`
${p.title}
${p.author||''}
`; + row.querySelector('button').addEventListener('click',async()=>{await deletePost(p.id);row.remove();}); + list.prepend(row); +} + +function renderPosts(arr){q('#managePostsList').innerHTML='';arr.forEach(addPost);} + +function setupLogin(){ + loginBtn.addEventListener('click',async()=>{ + const u=q('#loginUser').value.trim(); + const p=q('#loginPass').value.trim(); + if(await login(u,p)){ + overlay.style.display='none'; + renderPosts(await fetchPosts()); + }else{ + err.textContent='Invalid credentials.'; + } + }); + q('#loginPass').addEventListener('keydown',e=>{if(e.key==='Enter')loginBtn.click();}); + signupLink.addEventListener('click',e=>{e.preventDefault();console.log('signup link clicked');}); +} + +function setupCreate(){ + q('#createPostBtn').addEventListener('click',async()=>{ + const post={ + id:crypto.randomUUID?crypto.randomUUID():String(Date.now()), + title:q('#postTitle').value.trim(), + author:q('#postAuthor').value.trim() + }; + const st=q('#createStatus'); + if(!post.title){st.textContent='Title required.';return;} + await createPost(post); + addPost(post); + st.textContent='Post created (local).'; + ['#postTitle','#postAuthor','#postDesired','#postOffered','#postContact'].forEach(s=>{const el=q(s);if(el)el.value='';}); + }); +} + +function init(){setupLogin();setupCreate();} +if(document.readyState==='loading')document.addEventListener('DOMContentLoaded',init);else init(); diff --git a/src/manage/index.html b/src/manage/index.html new file mode 100644 index 0000000..94d1af5 --- /dev/null +++ b/src/manage/index.html @@ -0,0 +1,47 @@ + + + + + + Skill Swap – Manage Posts + + + + +
+ + +
+ +
+ +
+ +
+
+

Create Post

+ + + + + + +

+
+ +
+

Your Posts

+
+
+
+ + + + diff --git a/src/manage/style.css b/src/manage/style.css new file mode 100644 index 0000000..dd06955 --- /dev/null +++ b/src/manage/style.css @@ -0,0 +1,27 @@ +:root{--radius:16px;--border:2px solid #222;--fg:#111;--bg:#fafafa;} +*{box-sizing:border-box;font-family:'Patrick Hand',system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;} +body{margin:0;background:var(--bg);color:var(--fg);} +.topbar{position:fixed;top:0;left:0;width:100%;border-bottom:var(--border);background:#fff;display:flex;align-items:center;justify-content:space-between;padding:10px 22px;z-index:1000;} +.logo{font-size:1.8rem;font-weight:800;letter-spacing:.5px;cursor:pointer;} +.link-btn{background:transparent;border:none;font-weight:600;cursor:pointer;font-size:1rem;padding:4px 8px;} +main{width:min(1100px,96vw);margin:0 auto;padding:80px 0 40px;display:flex;flex-direction:column;gap:20px;} +.panel{background:#fff;border:var(--border);border-radius:var(--radius);padding:14px;} +.panel h3{margin:0 0 10px;} +.panel input,.panel textarea{width:100%;margin-bottom:8px;border:var(--border);border-radius:14px;padding:4px 8px;background:#fff;font:inherit;line-height:1.2;} +.panel textarea{resize:vertical;min-height:60px;} +::placeholder{color:#444;opacity:.85;} +.btn-primary{width:100%;background:#000;color:#fff;border:none;border-radius:14px;padding:6px 0;font-weight:700;cursor:pointer;} +.login-overlay{position:fixed;inset:0;background:rgba(250,250,250,.92);display:flex;align-items:center;justify-content:center;backdrop-filter:blur(2px);z-index:2000;} +.login-box{background:#fff;border:var(--border);border-radius:16px;width:min(340px,94vw);padding:16px;display:flex;flex-direction:column;gap:10px;} +.login-box input{border:var(--border);border-radius:10px;padding:6px 8px;} +.login-box button{background:#000;color:#fff;border:none;border-radius:10px;padding:6px 10px;font-weight:700;cursor:pointer;} +.error-msg{color:#c21;} +.signup-note{margin:2px 0 0;text-align:center;font-size:.95rem;} +.signup-note a{color:#000;text-decoration:underline;font-weight:700;cursor:pointer;} +#managePostsList{display:flex;flex-direction:column;gap:10px;margin-top:10px;} +.post-row{background:#fff;border:1px dashed #aaa;border-radius:14px;padding:8px 10px;display:flex;justify-content:space-between;align-items:center;gap:14px;} +.post-row strong{font-size:1.1rem;} +.post-row small{opacity:.75;} +.danger-btn{background:#fff;border:2px solid #b11;border-radius:10px;padding:3px 10px;cursor:pointer;font-weight:600;} +.danger-btn:hover{background:#b11;color:#fff;} + From 78bc9f5add0620332664f45fb144bfba77f68d35 Mon Sep 17 00:00:00 2001 From: HarshTheSharma Date: Wed, 5 Nov 2025 12:39:05 -0800 Subject: [PATCH 2/3] adjusted css in order to remove resizability from contact input box in the management page. --- src/manage/style.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/manage/style.css b/src/manage/style.css index dd06955..6ac6068 100644 --- a/src/manage/style.css +++ b/src/manage/style.css @@ -8,7 +8,7 @@ main{width:min(1100px,96vw);margin:0 auto;padding:80px 0 40px;display:flex;flex- .panel{background:#fff;border:var(--border);border-radius:var(--radius);padding:14px;} .panel h3{margin:0 0 10px;} .panel input,.panel textarea{width:100%;margin-bottom:8px;border:var(--border);border-radius:14px;padding:4px 8px;background:#fff;font:inherit;line-height:1.2;} -.panel textarea{resize:vertical;min-height:60px;} +.panel textarea{resize:none;min-height:60px;} ::placeholder{color:#444;opacity:.85;} .btn-primary{width:100%;background:#000;color:#fff;border:none;border-radius:14px;padding:6px 0;font-weight:700;cursor:pointer;} .login-overlay{position:fixed;inset:0;background:rgba(250,250,250,.92);display:flex;align-items:center;justify-content:center;backdrop-filter:blur(2px);z-index:2000;} From ee4f22d6c37d33000431a483b5e6328b87f70a00 Mon Sep 17 00:00:00 2001 From: Harsh <71364679+HarshTheSharma@users.noreply.github.com> Date: Wed, 5 Nov 2025 13:12:38 -0800 Subject: [PATCH 3/3] Delete src/manage/handler.js --- src/manage/handler.js | 59 ------------------------------------------- 1 file changed, 59 deletions(-) delete mode 100644 src/manage/handler.js diff --git a/src/manage/handler.js b/src/manage/handler.js deleted file mode 100644 index f57aadd..0000000 --- a/src/manage/handler.js +++ /dev/null @@ -1,59 +0,0 @@ -console.log('manage page handler.js loaded'); - -function q(s,p=document){return p.querySelector(s);} - -const overlay=q('#loginOverlay'); -const err=q('#loginError'); -const loginBtn=q('#loginBtn'); -const signupLink=q('#signupLink'); - -// modify these functions to hook up with database/backend -async function login(u,p){return u==='local'&&p==='local';} -async function fetchPosts(){return[{id:'1',title:'Sample Skill Swap',author:'Harsh'}];} -async function createPost(p){console.log('createPost',p);} -async function deletePost(id){console.log('deletePost',id);} - -function addPost(p){ - const list=q('#managePostsList'); - const row=document.createElement('div'); - row.className='post-row'; - row.innerHTML=`
${p.title}
${p.author||''}
`; - row.querySelector('button').addEventListener('click',async()=>{await deletePost(p.id);row.remove();}); - list.prepend(row); -} - -function renderPosts(arr){q('#managePostsList').innerHTML='';arr.forEach(addPost);} - -function setupLogin(){ - loginBtn.addEventListener('click',async()=>{ - const u=q('#loginUser').value.trim(); - const p=q('#loginPass').value.trim(); - if(await login(u,p)){ - overlay.style.display='none'; - renderPosts(await fetchPosts()); - }else{ - err.textContent='Invalid credentials.'; - } - }); - q('#loginPass').addEventListener('keydown',e=>{if(e.key==='Enter')loginBtn.click();}); - signupLink.addEventListener('click',e=>{e.preventDefault();console.log('signup link clicked');}); -} - -function setupCreate(){ - q('#createPostBtn').addEventListener('click',async()=>{ - const post={ - id:crypto.randomUUID?crypto.randomUUID():String(Date.now()), - title:q('#postTitle').value.trim(), - author:q('#postAuthor').value.trim() - }; - const st=q('#createStatus'); - if(!post.title){st.textContent='Title required.';return;} - await createPost(post); - addPost(post); - st.textContent='Post created (local).'; - ['#postTitle','#postAuthor','#postDesired','#postOffered','#postContact'].forEach(s=>{const el=q(s);if(el)el.value='';}); - }); -} - -function init(){setupLogin();setupCreate();} -if(document.readyState==='loading')document.addEventListener('DOMContentLoaded',init);else init();