diff --git a/frontend/assets/search2.svg b/frontend/assets/search2.svg new file mode 100644 index 0000000..dedb2cd --- /dev/null +++ b/frontend/assets/search2.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/frontend/html/dashboard.html b/frontend/html/dashboard.html index 1229bf1..59065b4 100644 --- a/frontend/html/dashboard.html +++ b/frontend/html/dashboard.html @@ -14,7 +14,7 @@
- +
diff --git a/frontend/html/index.html b/frontend/html/index.html index 08f8422..77ff60f 100644 --- a/frontend/html/index.html +++ b/frontend/html/index.html @@ -8,6 +8,7 @@ +
@@ -41,7 +42,7 @@
- + diff --git a/frontend/html/register.html b/frontend/html/register.html index ac91956..c5f368d 100644 --- a/frontend/html/register.html +++ b/frontend/html/register.html @@ -30,7 +30,7 @@ - + diff --git a/frontend/scripts/dashboard.js b/frontend/scripts/dashboard.js index 28b27f7..3bd59eb 100644 --- a/frontend/scripts/dashboard.js +++ b/frontend/scripts/dashboard.js @@ -1,17 +1,7 @@ -const search = document.getElementById('search'); +//-----------------------------------------------------------------------------------------(Getting Data) let globaldata; -search.addEventListener('keyup', function() { - let result = search.value; - if(result == ""){ - updatelist(globaldata) - } else { - console.log(result); - updatelist(globaldata) - } -}); - async function getData() { try { let response = await fetch('/get_data', { @@ -23,9 +13,9 @@ async function getData() { if(response.ok) { let userdata = await response.json(); - console.log(userdata) + //console.log(userdata) globaldata = userdata - updatelist(userdata); + getFieldName(userdata) } else if(!response.ok) { const errorMessage = await response.text(); throw new Error(errorMessage); @@ -35,40 +25,110 @@ async function getData() { } } - -// function addlist(userdata) { -// let masterdata = []; -// for (let field in userdata){ -// masterdata.push(userdata[field]) -// } -// console.log(...masterdata) -// updatelist(masterdata) -// } +//-----------------------------------------------------------------------------------------(Adds Values to Content Box) const contentbox = document.querySelector('.objcontainer') -function updatelist(userdata) { - contentbox.innerHTML = '' - for(let field in userdata){ - let fields = userdata[field]; - for (let data in fields) { - if (fields.hasOwnProperty(data)) { - let value = fields[data]; - updategui(field, data, value) - console.log(field, data, value) - } - - } - } - +function updateListGui(field) { + let content = contentbox.innerHTML.concat( + ` +
+ +

${field["fieldname"]}

+ +
+ ` + ) + contentbox.innerHTML = content; + + let btns = document.querySelectorAll('.entrybutton') + btns.forEach(btn => { + btn.addEventListener('click', () => { + updateInfoGui(btn.id); + }); + }); } -function updategui(title, key, value) { - console.log(`${title},${key},${value}`) - let content = contentbox.innerHTML.concat(`
${title},${key},${value}
`) - contentbox.innerHTML = content; + +// const data = { +// Amazon: { +// url: "https://www.amazon.com", +// Name: "Yash", +// Password: "123" +// }, +// Google: { +// url: "https://www.google.com", +// Name: "XYZ", +// Password: "Secret" +// } +// } + +function getFieldName(data) { //Gets All Field Values + let fieldnamearray = [] + for(let field in data){ + let fieldname = field + fieldnamearray.push(fieldname) + } + getDisplayList(fieldnamearray,data); + //console.log(fieldnamearray) } +function getFaviconUrl(fieldname,data) { + let fielddata = data[fieldname] + let url = fielddata["url"] + url = url.replace("https://",'') + faviconlink = `http://www.google.com/s2/favicons?domain=${url}` + return faviconlink +} + +function getDisplayList(fieldnames,userdata){ + contentbox.innerHTML = '' + for(let i in fieldnames){ + let faviconurl = getFaviconUrl(fieldnames[i],userdata) + let guidata = { + fieldname: fieldnames[i], + url: faviconurl + } + updateListGui(guidata) + } +} + +//----------------------------------------------------------------------------------------- + +const search = document.getElementById('search'); + +search.addEventListener('keyup', function() { + let result = search.value; + if(result == ""){ + getData() + } else { + getFilterList(result,globaldata) + //console.log(result); + + } +}); + +function getFilterList(keyword,data) { //Gets Filtered Field Values + let filterarray = [] + for(let field in data){ + if(field.toLowerCase().indexOf(keyword) !== -1){ + let fieldname = field + filterarray.push(fieldname) + } + } + getDisplayList(filterarray,data); + //console.log(filterarray) + } + +//----------------------------------------------------------------------------------------- + + +function updateInfoGui(call) { + console.log(call) +} + +//----------------------------------------------------------------------------------------- + window.onload = function() { getData(); }; \ No newline at end of file diff --git a/frontend/scripts/index.js b/frontend/scripts/index.js index 343311c..747f269 100644 --- a/frontend/scripts/index.js +++ b/frontend/scripts/index.js @@ -51,7 +51,7 @@ console.log(formData) }); if(response.ok) { - window.location.href = "dashboard.html"; + window.location.href = "../html/dashboard.html"; } else if(!response.ok) { const errorMessage = await response.text(); document.getElementById("errlabel").innerHTML = errorMessage; diff --git a/frontend/styles/dashboard.css b/frontend/styles/dashboard.css index abf9b98..ad1202f 100644 --- a/frontend/styles/dashboard.css +++ b/frontend/styles/dashboard.css @@ -29,8 +29,9 @@ body { background-color: rgb(0, 255, 255,0.2); backdrop-filter: blur(15px); border-radius: 30px; - width: 90vw; - height: 80vh; + position: relative; + width: 1100px; + height: 600px; box-shadow: 0px 0px 30px rgba(0, 0, 0, 0.8); overflow: hidden; } @@ -56,6 +57,8 @@ footer p{ border-radius: 20px; height: 85%; width: 40%; + /* height: 70vh; + width: 40vw; */ justify-content: center; align-items: center; } @@ -84,12 +87,35 @@ footer p{ padding-right: 40px; } -.searchbar img { - display: block; +.searchbar button { + background-image: url("../assets/search.svg"); + background-size: cover; + background-position: center; + display: inline-block; position: absolute; - top: 24%; + top: 20%; right: 25px; - width: 25px; + width: 30px; + height: 30px; + border: none; + background-color: transparent; + cursor: pointer; +} + +.searchbar button:hover { + background-image: url(../assets/search2.svg); +} + +.searchbar button:not(:hover) { + background-image: url(../assets/search.svg); +} + +.searchbar:hover{ + box-shadow: 0, 0, 5px; +} + +.searchbar:not(:hover){ + box-shadow: none; } .objcontainer { @@ -109,14 +135,16 @@ footer p{ } .objcontainer div{ + display: flex; padding: 20px; width: 90%; - height: 200px; + height: 50px; background-color: rgb(255, 255, 255, 0.5); - text-align: center; + text-align: left; box-shadow: 0 0 10px black; border: rgba(0, 255, 255, 0.5) 1px solid; overflow: hidden; + align-items: center; } .objcontainer div:hover { @@ -127,6 +155,35 @@ footer p{ background-color: rgb(255, 255, 255, 0.5); } +.objcontainer div button{ + position: absolute; + right: 40px; + background-color: hsl(0, 0%, 100%, 0.5); + border-radius: 10px; + padding: 5px; + font-weight: bold; + box-shadow: 0 0 5px; + cursor: pointer; +} + +.objcontainer div button:hover{ + background-color: rgb(128, 128, 128, 0.7); +} + +.objcontainer div button:not(:hover){ + background-color: hsl(0, 0%, 100%, 0.5); +} + +.objcontainer div img{ + width: 30px; +} + +.objcontainer div p{ + padding-left: 20px; + font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif; + font-weight: bold; +} + .querybox { display: flex; justify-content: center; @@ -171,4 +228,12 @@ footer p{ ::-webkit-scrollbar-thumb:hover { background: hsl(0, 0%, 33%); +} + +@media (max-width: 860px) { + .container{ + position: fixed; + width: 774px; + } + } \ No newline at end of file diff --git a/frontend/styles/index.css b/frontend/styles/index.css index ded948c..e16d9c6 100644 --- a/frontend/styles/index.css +++ b/frontend/styles/index.css @@ -119,7 +119,6 @@ body { } - .help div{ display: flex; width: 50%;