From 22c0f04cdeace621e15b79a67f02134237aeed32 Mon Sep 17 00:00:00 2001 From: Modo Date: Sat, 21 Oct 2023 19:57:29 +0530 Subject: [PATCH] Add input boxes for Add entry page --- frontend/html/dashboard.html | 39 +++++- frontend/scripts/dashboard.js | 13 ++ frontend/scripts/index.js | 7 ++ frontend/styles/dashboard.css | 218 ++++++++++++++++++++++++++++++---- 4 files changed, 253 insertions(+), 24 deletions(-) diff --git a/frontend/html/dashboard.html b/frontend/html/dashboard.html index 9ba2d89..622ca8f 100644 --- a/frontend/html/dashboard.html +++ b/frontend/html/dashboard.html @@ -185,10 +185,16 @@ p
-

Welcome

+ +
+

Welcome,

+

+
+
+
@@ -200,9 +206,40 @@ p diff --git a/frontend/scripts/dashboard.js b/frontend/scripts/dashboard.js index 4167476..3b4e7bf 100644 --- a/frontend/scripts/dashboard.js +++ b/frontend/scripts/dashboard.js @@ -2,6 +2,7 @@ //-----------------------------------------------------------------------------------------(Getting Data) let globaldata; + async function getData() { try { let response = await fetch('/get_data', { @@ -149,6 +150,14 @@ function updateInfoGui(call) { console.log(call) } +const greettext = document.querySelector('#greetname') +const masterusername = localStorage.getItem("username"); +console.log(masterusername) + +function greet(){ + greettext.textContent = masterusername; +} + //----------------------------------------------------------------------------------------- async function logOut() { @@ -183,4 +192,8 @@ logoutbtn.addEventListener('click', () => { window.onload = function() { getData(); + greet() + + entrywindow.classList.toggle("hidden"); + entrywindow.style.display = "flex"; }; \ No newline at end of file diff --git a/frontend/scripts/index.js b/frontend/scripts/index.js index 098fdd0..f54555e 100644 --- a/frontend/scripts/index.js +++ b/frontend/scripts/index.js @@ -35,10 +35,13 @@ function validateLogin() { } } + async function getAuth() { let _username = document.getElementById("username").value; let _password = document.getElementById("password").value; +localStorage.setItem("username", _username); + formData = new FormData(); formData.append('user_name', _username); formData.append('password', _password); @@ -108,6 +111,7 @@ console.log(formData) } +<<<<<<< HEAD <<<<<<< HEAD <<<<<<< HEAD function handleAuthRes(data) { @@ -120,6 +124,9 @@ function handleAuthRes(data) { } ======= ======= +======= + +>>>>>>> 106888c (Add input boxes for Add entry page) const register = document.getElementById("register"); register.addEventListener("click", function(event) { diff --git a/frontend/styles/dashboard.css b/frontend/styles/dashboard.css index 850c80b..b5cf69e 100644 --- a/frontend/styles/dashboard.css +++ b/frontend/styles/dashboard.css @@ -171,7 +171,7 @@ footer p{ .objcontainer div:hover { - background-color: rgb(128, 128, 128, 0.4); + background-color: rgba(255, 255, 255, 0.7); width: 95%; height: 60px; } @@ -204,7 +204,7 @@ footer p{ } .objcontainer div button:hover{ - background-color: rgb(128, 128, 128, 0.7); + background-color: rgba(143, 143, 143, 0.5); } .objcontainer div button:not(:hover){ @@ -256,16 +256,6 @@ footer p{ /*----------------------------------------------------------------------------------------*/ -.buttonpanel { - width: 90%; - height: 70%; - background-color: rgb(255, 255, 255, 0.5); - border-radius: 10px; - display: flex; - align-items: center; - padding: 20px; -} - .buttonbox { display: flex; justify-content: center; @@ -280,13 +270,44 @@ footer p{ 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 { + width: 90%; + height: 70%; + background-color: rgb(255, 255, 255, 0.5); + border-radius: 10px; + display: flex; + align-items: center; + padding: 20px; } -.buttonpanel div { +.buttonpanel div:first-child { + display: flex; + flex-direction: column; + position: absolute; + width: 50%; + height: 50px; + left: 30px; +} + +.buttonpanel p:first-child { + color: rgb(0, 0, 0); + position: absolute; + bottom: 0px; + left: 10px; + font-size: 25px; + font-family: Impact, fantasy; +} + +.buttonpanel p:last-child { + position: absolute; + color: rgb(0, 0, 0); + top: -1px; + left: 11px; + font-size: 25px; + font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; +} + +.buttonpanel div:last-child { position: absolute; width: 50px; height: 50px; @@ -320,7 +341,6 @@ footer p{ width: 40px; height: 40px; } - /*----------------------------------------------------------------------------------------*/ ::-webkit-scrollbar { @@ -374,9 +394,11 @@ footer p{ width: 100%; height: 100%; background-color: hsl(0, 0%, 100%, 10%); + display: flex; justify-content: center; align-items: center; backdrop-filter: blur(20px); + overflow: hidden; } .hidden { @@ -385,12 +407,17 @@ footer p{ .addentrydiv { position: relative; - width: 50%; - height: 60%; - background-color: rgb(255, 255, 255, 0.8); - border-radius: 20px; + width: 700px; + height: 400px; + background-color: rgb(255, 255, 255, 0.6); + backdrop-filter: blur(5px); + border-radius: 40px; + display: flex; + justify-content: center; + align-items: center; } -.addentrydiv div{ + +.addentrydiv > div:first-child{ display: flex; position: absolute; top: 20px; @@ -428,6 +455,141 @@ footer p{ } +/*----------------------------------------------------------------------------------------*/ + +.fieldcontainer { + width: 80%; + height: 70%; + background-color: white; + display: flex; + position: relative; + overflow: hidden; + border-radius: 20px; + box-shadow: 0 0 5px; +} + +.fieldcontainer form > div:first-child { + position: absolute; + width: 50%; + height: 100%; + background-color: rgba(55, 16, 229, 0.8); + display: flex; + align-items: center; + justify-content: center; + flex-direction: column; + row-gap: 20px; +} + +.fieldcontainer input { + padding-left: 10px; + font-family:'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; + box-shadow: 0 0 10px; +} + +.fieldcontainer input:focus { + outline: none; +} + +.fieldcontainer input::placeholder{ + color: rgb(82, 82, 82); + font-weight: bold; +} + +.fieldcontainer form > div:first-child input{ + margin-top: 20px; + width: 80%; + height: 30px; + border-radius: 10px; + background-color: rgb(255, 255, 255, 0.8); + border: none; + transition: width 0.1s ease, height 0.1s ease; +} + +.fieldcontainer form > div:first-child input:hover, .fieldcontainer form > div:first-child input:focus { + width: 83%; + height: 35px; +} + +.fieldcontainer form > div:first-child input:not(:hover):not(:focus) { + width: 80%; + height: 30px; +} + +.fieldcontainer form > div:first-child button{ + width: 60px; + height: 30px; + border-radius: 10px; + background-color: rgb(255, 255, 255, 0.8); + border: none; + margin-top: 30px; +} + +/*----------------------------------------------------------------------------------------*/ + + +.fieldcontainer form > div:last-child { + position: absolute; + right: 0; + width: 50%; + height: 100%; + background-color: rgb(34, 0, 255, 0.2); + display: flex; + align-items: center; + justify-content: center; + flex-direction: column; + row-gap: 20px; +} + +.fieldcontainer form > div:last-child div { + display: flex; + flex-direction: row; + align-items: center; + width: 100%; +} + +.fieldcontainer form > div:last-child div input[type="text"]{ + width: 80%; + height: 30px; + border-radius: 10px; + background-color: rgb(255, 255, 255, 0.8); + border: none; + transition: width 0.1s ease, height 0.1s ease; +} + +.fieldcontainer form > div:last-child div input[type="text"]:enabled:hover, .fieldcontainer form > div:last-child div input[type="text"]:enabled:focus{ + width: 83%; + height: 35px; +} + +.fieldcontainer form > div:last-child div input[type="text"]:not(:hover):not(:focus){ + width: 80%; + height: 30px; +} + +.fieldcontainer form > div:last-child div input[type="checkbox"]{ + margin-right: 10px; + margin-left: 10px; + width: 15px; + height: 15px; + border: none; + transition: width 0.1s ease, height 0.1s ease; +} + +.fieldcontainer form > div:last-child div input[type="checkbox"]:hover { + width: 20px; + height: 20px; +} + +.fieldcontainer form > div:last-child div input[type="checkbox"]:checked { + width: 20px; + height: 20px; +} + +.fieldcontainer form > div:last-child div input[type="checkbox"]:not(:hover):not(:checked) { + width: 15px; + height: 15px; +} + /*----------------------------------------------------------------------------------------*/ @@ -436,7 +598,17 @@ footer p{ position: fixed; width: 774px; } +} +@media (max-width: 860px) { + .entrycontainer{ + position: fixed; + width: 860px; + } + .addentrydiv{ + position: fixed; + width: 700px; + } }