From b6d960f2b1d1df71204e2df944a8654c8cffcf6b Mon Sep 17 00:00:00 2001 From: Modo Date: Sat, 21 Oct 2023 14:42:54 +0530 Subject: [PATCH] Add Add Entry Page & CSS Animations --- frontend/assets/plus.svg | 4 + frontend/assets/x.svg | 12 ++ frontend/html/dashboard.html | 18 ++- frontend/scripts/dashboard.js | 27 ++++- frontend/scripts/index.js | 20 ++++ frontend/styles/dashboard.css | 202 ++++++++++++++++++++++++++++++---- 6 files changed, 256 insertions(+), 27 deletions(-) create mode 100644 frontend/assets/plus.svg create mode 100644 frontend/assets/x.svg diff --git a/frontend/assets/plus.svg b/frontend/assets/plus.svg new file mode 100644 index 0000000..06941f6 --- /dev/null +++ b/frontend/assets/plus.svg @@ -0,0 +1,4 @@ + + + + \ No newline at end of file diff --git a/frontend/assets/x.svg b/frontend/assets/x.svg new file mode 100644 index 0000000..a2f3c55 --- /dev/null +++ b/frontend/assets/x.svg @@ -0,0 +1,12 @@ + + + + + + + + + + + + \ No newline at end of file diff --git a/frontend/html/dashboard.html b/frontend/html/dashboard.html index 1803cd4..136c6d8 100644 --- a/frontend/html/dashboard.html +++ b/frontend/html/dashboard.html @@ -16,7 +16,7 @@
- +
@@ -28,11 +28,25 @@
-
+
+

Welcome

+
+ +
+
+ + + diff --git a/frontend/scripts/dashboard.js b/frontend/scripts/dashboard.js index bba312f..4167476 100644 --- a/frontend/scripts/dashboard.js +++ b/frontend/scripts/dashboard.js @@ -33,15 +33,17 @@ const contentbox = document.querySelector('.objcontainer') function updateListGui(field) { let content = contentbox.innerHTML.concat( ` -
- +
+

${field["fieldname"]}

` ) + contentbox.innerHTML = content; + let btns = document.querySelectorAll('.entrybutton') btns.forEach(btn => { btn.addEventListener('click', () => { @@ -51,6 +53,9 @@ function updateListGui(field) { } + + + // const data = { // Amazon: { // url: "https://www.amazon.com", @@ -112,7 +117,7 @@ search.addEventListener('keyup', function() { function getFilterList(keyword,data) { //Gets Filtered Field Values let filterarray = [] for(let field in data){ - if(field.toLowerCase().indexOf(keyword) !== -1){ + if(field.toLowerCase().indexOf(keyword.toLowerCase()) !== -1){ let fieldname = field filterarray.push(fieldname) } @@ -123,6 +128,22 @@ function getFilterList(keyword,data) { //Gets Filtered Fie //----------------------------------------------------------------------------------------- +const addentry = document.getElementById('addentry') +const entrywindow = document.querySelector('#entrycontainer') + +addentry.addEventListener('click', function() { + entrywindow.classList.toggle("hidden"); + entrywindow.style.display = "flex"; +}) + +const exitentrywin = document.getElementById('backbtn') + +exitentrywin.addEventListener('click', function() { + entrywindow.style.display = "none" +}) + +//----------------------------------------------------------------------------------------- + function updateInfoGui(call) { console.log(call) diff --git a/frontend/scripts/index.js b/frontend/scripts/index.js index 747f269..20b4e24 100644 --- a/frontend/scripts/index.js +++ b/frontend/scripts/index.js @@ -82,6 +82,26 @@ register.addEventListener("click", function(event) { }); +window.onload = async function() { + try { + let response = await fetch('/get_data', { + method: 'POST', + headers: { + 'Content-Type': 'application/json' + } + }); + + if(response.ok) { + window.location.href = "../html/dashboard.html"; + } else if(!response.ok) { + const errorMessage = await response.text(); + throw new Error(errorMessage); + } + } catch (error) { + console.error("Not Logged In..") + + } +}; diff --git a/frontend/styles/dashboard.css b/frontend/styles/dashboard.css index ad56d68..850c80b 100644 --- a/frontend/styles/dashboard.css +++ b/frontend/styles/dashboard.css @@ -23,6 +23,13 @@ body { justify-content: center; } +.innerwrapper { + height: 90%; + width: 90%; + padding: 10px; + position: relative; +} + .container { display: flex; align-items: center; @@ -50,6 +57,8 @@ footer p{ text-align: center; } +/*----------------------------------------------------------------------------------------*/ + .contentbox { display: flex; position: absolute; @@ -63,46 +72,53 @@ footer p{ align-items: center; max-height: 100%; overflow: auto; + box-shadow: 0 0 10px; } +/*----------------------------------------------------------------------------------------*/ + .searchbar { display: flex; justify-content: center; align-items: center; position: absolute; overflow: hidden; - top: 20px; + top: 15px; width: 90%; - height: 10%; - background-color: rgb(255, 255, 255, 0.8); - border-radius: 10px 10px 0 0; + height: 11%; + background-color: rgb(255, 255, 255, 0.5); + border-radius: 10px; + padding: 10px; + flex-shrink: 0; } .searchbar input { - width: 95%; - height: 80%; + width: 88%; + height: 65%; border: blue 2px slateblue; box-shadow: none; background-color: rgb(255, 255, 255, 0.5); border-radius: 20px; padding-left: 20px; padding-right: 40px; + position: absolute; + left:20px; } -.searchbar button { +/* .searchbar button { background-image: url("../assets/search.svg"); background-size: cover; background-position: center; display: inline-block; position: absolute; - top: 20%; - right: 25px; + top: 19%; + right: 4px; width: 30px; height: 30px; border: none; background-color: transparent; cursor: pointer; -} +} */ .searchbar button:hover { background-image: url(../assets/search2.svg); @@ -120,6 +136,8 @@ footer p{ box-shadow: none; } +/*----------------------------------------------------------------------------------------*/ + .objcontainer { display: flex; flex-direction: column; @@ -128,8 +146,8 @@ footer p{ bottom: 20px; width: 90%; height: 80%; - background-color: rgb(255, 255, 255, 0.8); - border-radius: 0 0 10px 10px; + background-color: rgb(255, 255, 255, 0.5); + border-radius: 10px; overflow: auto; padding-top: 20px; padding-bottom: 20px; @@ -148,14 +166,20 @@ footer p{ overflow: hidden; align-items: center; flex-shrink: 0; + transition: width 0.3s ease, height 0.3s ease; } + .objcontainer div:hover { background-color: rgb(128, 128, 128, 0.4); + width: 95%; + height: 60px; } .objcontainer div:not(:hover) { background-color: rgb(255, 255, 255, 0.5); + width: 90%; + height: 50px; } .objcontainer div button{ @@ -167,6 +191,16 @@ footer p{ font-weight: bold; box-shadow: 0 0 5px; cursor: pointer; + opacity: 0; + transition: opacity 0.3s ease; +} + +.objcontainer div:hover button{ + opacity: 1; +} + +.objcontainer div:not(:hover) button{ + opacity: 0; } .objcontainer div button:hover{ @@ -187,6 +221,16 @@ footer p{ font-weight: bold; } +.objcontainer div:last-child { + border-radius: 0 0 10px 10px; +} + +.objcontainer div:first-child { + border-radius: 10px 10px 0 0; +} + +/*----------------------------------------------------------------------------------------*/ + .querybox { display: flex; justify-content: center; @@ -200,20 +244,26 @@ footer p{ width: 40%; position: absolute; bottom: 0; + box-shadow: 0 0 10px; } .infopanel { width: 90%; height: 90%; - background-color: rgb(255, 255, 255, 0.8); + background-color: rgb(255, 255, 255, 0.5); border-radius: 10px; } +/*----------------------------------------------------------------------------------------*/ + .buttonpanel { width: 90%; height: 70%; - background-color: rgb(255, 255, 255, 0.8); + background-color: rgb(255, 255, 255, 0.5); border-radius: 10px; + display: flex; + align-items: center; + padding: 20px; } .buttonbox { @@ -227,24 +277,73 @@ footer p{ border-radius: 20px; height: 20%; width: 40%; + box-shadow: 0 0 10px; } +.buttonpanel p { + font-size: 30px; + font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif; + font-weight: bold; +} + +.buttonpanel div { + position: absolute; + width: 50px; + height: 50px; + right: 50px; + display: flex; + align-items: center; + justify-content: center; +} + +#addentry { + width: 40px; + height: 40px; + border-radius: 10px; + background-color: rgba(0, 146, 15, 0.7); + border: none; + box-shadow: 0 0 5px; + background-image: url(../assets/plus.svg); + background-size: 90% auto; + background-position: center; + transition: width 0.1s ease, height 0.1s ease; +} + +#addentry:hover { + background-color: rgba(0, 223, 22, 0.7); + width: 45px; + height: 45px; +} + +#addentry:not(:hover) { + background-color: rgba(0, 146, 15, 0.7); + width: 40px; + height: 40px; +} + +/*----------------------------------------------------------------------------------------*/ + ::-webkit-scrollbar { width: 10px; + border-radius: 5px; } ::-webkit-scrollbar-track { - background: #f1f1f1; + /* background: hsla(0, 0%, 73%, 0.7); */ + background: transparent; } ::-webkit-scrollbar-thumb { - background: hsl(0, 0%, 53%); + background: hsl(0, 0%, 20%); + border-radius: 5px; } ::-webkit-scrollbar-thumb:hover { - background: hsl(0, 0%, 33%); + background: hsl(0, 0%, 17%); } +/*----------------------------------------------------------------------------------------*/ + #logout{ width: 40px; height: 40px; @@ -268,13 +367,70 @@ footer p{ opacity: 0.7; } -.innerwrapper { - height: 90%; - width: 90%; - padding: 10px; - position: relative; +/*----------------------------------------------------------------------------------------*/ + +#entrycontainer { + position: absolute; + width: 100%; + height: 100%; + background-color: hsl(0, 0%, 100%, 10%); + justify-content: center; + align-items: center; + backdrop-filter: blur(20px); } +.hidden { + display: none; +} + +.addentrydiv { + position: relative; + width: 50%; + height: 60%; + background-color: rgb(255, 255, 255, 0.8); + border-radius: 20px; +} +.addentrydiv div{ + display: flex; + position: absolute; + top: 20px; + right: 20px; + justify-content: center; + align-items: center; + width: 35px; + height: 35px; +} + +#backbtn { + width: 30px; + height: 30px; + background-color: rgb(255, 0, 0, 0.8); + background-image: url(../assets/x.svg); + background-size: 50%; + background-position: center; + background-repeat: no-repeat; + border: none; + box-shadow: 0 0 5px; + border-radius: 20px; + transition: width 0.1s ease, height 0.1s ease; +} + +#backbtn:hover { + width: 35px; + height: 35px; + background-color: rgba(226, 0, 0, 0.8); +} + +#backbtn:not(:hover) { + width: 30px; + height: 30px; + background-color: rgb(255, 0, 0, 0.8); +} + + +/*----------------------------------------------------------------------------------------*/ + + @media (max-width: 860px) { .container{ position: fixed; @@ -283,3 +439,5 @@ footer p{ } + +