Add Add Entry Page & CSS Animations

2023-10-21 14:42:54 +05:30 · 2023-10-21 14:42:54 +05:30 · b6d960f2b1
commit b6d960f2b1
parent d5ead08328
6 changed files with 256 additions and 27 deletions
--- a/frontend/assets/plus.svg
+++ b/frontend/assets/plus.svg
@ -0,0 +1,4 @@
+<svg width="800px" height="800px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" stroke="white">
+  <path d="M5 12H19" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+  <path d="M12 5L12 19" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
--- a/frontend/assets/x.svg
+++ b/frontend/assets/x.svg
@ -0,0 +1,12 @@
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+
+<!-- Uploaded to: SVG Repo, www.svgrepo.com, Transformed by: SVG Repo Mixer Tools -->
+<svg fill="#ffffff" height="800px" width="800px" version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 460.775 460.775" xml:space="preserve" stroke="#ffffff">
+
+<g id="SVGRepo_bgCarrier" stroke-width="0"/>
+
+<g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"/>
+
+<g id="SVGRepo_iconCarrier"> <path d="M285.08,230.397L456.218,59.27c6.076-6.077,6.076-15.911,0-21.986L423.511,4.565c-2.913-2.911-6.866-4.55-10.992-4.55 c-4.127,0-8.08,1.639-10.993,4.55l-171.138,171.14L59.25,4.565c-2.913-2.911-6.866-4.55-10.993-4.55 c-4.126,0-8.08,1.639-10.992,4.55L4.558,37.284c-6.077,6.075-6.077,15.909,0,21.986l171.138,171.128L4.575,401.505 c-6.074,6.077-6.074,15.911,0,21.986l32.709,32.719c2.911,2.911,6.865,4.55,10.992,4.55c4.127,0,8.08-1.639,10.994-4.55 l171.117-171.12l171.118,171.12c2.913,2.911,6.866,4.55,10.993,4.55c4.128,0,8.081-1.639,10.992-4.55l32.709-32.719 c6.074-6.075,6.074-15.909,0-21.986L285.08,230.397z"/> </g>
+
+</svg>
--- a/frontend/html/dashboard.html
+++ b/frontend/html/dashboard.html
@ -16,7 +16,7 @@

                    <div class="searchbar"> 
                        <input type="text" id="search">
-                        <button></button>
+                        <!-- <button></button> -->
                    </div>

                    <div class="objcontainer"></div>
@ -28,11 +28,25 @@
                </div>

                <div class="buttonbox">
-                    <div class="buttonpanel"></div>
+                    <div class="buttonpanel">
+                        <p>Welcome</p>
+                        <div>
+                            <button id="addentry"></button>
+                        </div>
+                    </div>
                </div>
            </div>

        </div>
+
+        <div id="entrycontainer" class="hidden">
+            <div class="addentrydiv">
+                <div>
+                    <button id="backbtn"></button>
+                </div>
+            </div>
+        </div>
+
    </div>
    <script defer src="../scripts/dashboard.js"></script>
 </body>
--- 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(
            `
-            <div>
-            <img src="${field["url"]}" onerror="this.onerror=null; this.src='../assets/internet.svg'">
+            <div class="fielddiv">
+            <img id ="${field["fieldname"]}" src="${field["url"]}" onerror="this.onerror=null; this.src='../assets/internet.svg'">
            <p>${field["fieldname"]}</p>
             <button id="${field["fieldname"]}" class="entrybutton"> Show </button>
            </div>
            `
            )
+
        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)
--- 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..")
+
+    }
+};



--- 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{

 }

+
+