From b1ef6a6b8fe7f8181b5786c2db38a825c971b5c8 Mon Sep 17 00:00:00 2001 From: Modo Date: Wed, 25 Oct 2023 23:34:57 +0530 Subject: [PATCH] Rebase changes --- backend/rest_api.py | 10 - frontend/html/dashboard.html | 199 +---- frontend/html/index.html | 33 - frontend/html/register.html | 64 -- frontend/scripts/index.js | 99 +-- frontend/scripts/register.js | 7 +- frontend/styles/dashboard.css | 1577 ++++++++++++++++----------------- frontend/styles/register.css | 277 +----- 8 files changed, 799 insertions(+), 1467 deletions(-) diff --git a/backend/rest_api.py b/backend/rest_api.py index 868ed69..1ac13aa 100644 --- a/backend/rest_api.py +++ b/backend/rest_api.py @@ -19,14 +19,11 @@ def handle_first_launched(): if not path.exists(folder_path): mkdir(folder_path) -<<<<<<< HEAD -======= @app.route('/favicon.ico') def favicon() -> Response: favicon_path: str = path.join(app.root_path, '../frontend/static', 'favicon.ico') return send_file(favicon_path, mimetype='image/vnd.microsoft.icon') ->>>>>>> d7982e1 (Add error message to login, Fix Internal Error 500) @app.route("/index.html") @@ -469,10 +466,3 @@ class QueryHandler: ) return Response(status=200) -import os -from os import path - -@app.route('/favicon.ico') -def favicon(): - favicon_path = os.path.join(app.root_path, 'static', 'favicon.ico') - return send_file(favicon_path, mimetype='image/vnd.microsoft.icon') \ No newline at end of file diff --git a/frontend/html/dashboard.html b/frontend/html/dashboard.html index 0eddd7a..8cc9d7d 100644 --- a/frontend/html/dashboard.html +++ b/frontend/html/dashboard.html @@ -1,12 +1,4 @@ -<<<<<<< HEAD -<<<<<<< HEAD -p -======= ->>>>>>> a260428 (Dashboard Entry Update) -======= - ->>>>>>> 0d9e690db10b6dfbef3d9aa4316e52d1e8cb8f6a @@ -16,11 +8,6 @@ p
-<<<<<<< HEAD -<<<<<<< HEAD -<<<<<<< HEAD -======= ->>>>>>> 0d9e690db10b6dfbef3d9aa4316e52d1e8cb8f6a
@@ -46,10 +33,6 @@ p
-<<<<<<< HEAD -<<<<<<< HEAD -======= ->>>>>>> 0d9e690db10b6dfbef3d9aa4316e52d1e8cb8f6a
@@ -160,10 +143,6 @@ p
-<<<<<<< HEAD -<<<<<<< HEAD -======= ->>>>>>> 0d9e690db10b6dfbef3d9aa4316e52d1e8cb8f6a
@@ -179,183 +158,6 @@ p
-<<<<<<< HEAD -======= -======= - ->>>>>>> 2a10814 (Add Display For Information + Logic) -
- - - -
- -
- -
- -
- -
- -
- -
-
- -
-
-
- - -======= ->>>>>>> 3fbcabc (Add Data Edit Page UI) -
- -
- -
- - -
-
- -
- -
- - -
-
- -
- -
- - -
-
- -
- -
- - -
-
- -
-
- -
- -
- -
- -
- -
- - -
- -
- -
- -
- -
- -
-
- -
- -
-<<<<<<< HEAD -<<<<<<< HEAD ->>>>>>> a260428 (Dashboard Entry Update) -======= - -======= ->>>>>>> 69bfc65 (Add Form Logic) - - -
-
- -
-
- -<<<<<<< HEAD ->>>>>>> b6d960f (Add Add Entry Page & CSS Animations) -======= -======= ->>>>>>> 7afbaba (Finish Frontend) -
-
-
- -
-
-
-
- -
-
- -
-
- ->>>>>>> 19834dd (Add Change Password Function + Dashboard Complete) -======= ->>>>>>> 0d9e690db10b6dfbef3d9aa4316e52d1e8cb8f6a
@@ -363,3 +165,4 @@ p

© 2023 Password Manager

+ diff --git a/frontend/html/index.html b/frontend/html/index.html index 11a94cb..77ff60f 100644 --- a/frontend/html/index.html +++ b/frontend/html/index.html @@ -3,19 +3,7 @@ -<<<<<<< HEAD -<<<<<<< HEAD -<<<<<<< HEAD -======= - ->>>>>>> 22cbef5 (Add all other pages) -======= - ->>>>>>> a260428 (Dashboard Entry Update) -======= - ->>>>>>> 0d9e690db10b6dfbef3d9aa4316e52d1e8cb8f6a Login @@ -37,18 +25,9 @@
-<<<<<<< HEAD -<<<<<<< HEAD -<<<<<<< HEAD -======= Forgot Password
->>>>>>> 22cbef5 (Add all other pages) -======= ->>>>>>> 7afbaba (Finish Frontend) -======= ->>>>>>> 0d9e690db10b6dfbef3d9aa4316e52d1e8cb8f6a Register
@@ -63,19 +42,7 @@
-<<<<<<< HEAD -<<<<<<< HEAD -<<<<<<< HEAD -======= - ->>>>>>> a260428 (Dashboard Entry Update) -======= - ->>>>>>> 464820a (Add Entry List with Functionality) -======= - ->>>>>>> 0d9e690db10b6dfbef3d9aa4316e52d1e8cb8f6a diff --git a/frontend/html/register.html b/frontend/html/register.html index 5387207..f743d65 100644 --- a/frontend/html/register.html +++ b/frontend/html/register.html @@ -3,67 +3,24 @@ -<<<<<<< HEAD -<<<<<<< HEAD - -<<<<<<< HEAD -<<<<<<< HEAD -======= - ->>>>>>> a260428 (Dashboard Entry Update) - - - -======= ->>>>>>> 22cbef5 (Add all other pages) -======= - - - ->>>>>>> d7982e1 (Add error message to login, Fix Internal Error 500) -======= ->>>>>>> 0d9e690db10b6dfbef3d9aa4316e52d1e8cb8f6a Register
-<<<<<<< HEAD -<<<<<<< HEAD -<<<<<<< HEAD -======= ->>>>>>> 0d9e690db10b6dfbef3d9aa4316e52d1e8cb8f6a

Register

-<<<<<<< HEAD -======= -
-

Register

->>>>>>> 22cbef5 (Add all other pages) -======= - - -
-

Register

->>>>>>> d7982e1 (Add error message to login, Fix Internal Error 500) -======= ->>>>>>> 0d9e690db10b6dfbef3d9aa4316e52d1e8cb8f6a
-<<<<<<< HEAD -<<<<<<< HEAD -<<<<<<< HEAD -======= ->>>>>>> 0d9e690db10b6dfbef3d9aa4316e52d1e8cb8f6a
@@ -72,28 +29,7 @@
-<<<<<<< HEAD -<<<<<<< HEAD - -======= -
- -
- ->>>>>>> 22cbef5 (Add all other pages) -======= - -
- -
- ->>>>>>> d7982e1 (Add error message to login, Fix Internal Error 500) -======= ->>>>>>> 7afbaba (Finish Frontend) -======= - ->>>>>>> 0d9e690db10b6dfbef3d9aa4316e52d1e8cb8f6a
diff --git a/frontend/scripts/index.js b/frontend/scripts/index.js index 5bf79c3..91a5c68 100644 --- a/frontend/scripts/index.js +++ b/frontend/scripts/index.js @@ -1,3 +1,5 @@ +const PORT = 5000; + let loginb = document.getElementById("loginb"); loginb.addEventListener("click", validateLogin); @@ -48,34 +50,8 @@ formData.append('password', _password); // console.log(formData) try { -<<<<<<< HEAD -<<<<<<< HEAD -<<<<<<< HEAD - const response = await fetch('http://127.0.0.1:5000/', { - method: 'POST', - headers: { -======= - const response = await fetch('/login', { + const response = await fetch(`http://127.0.0.1:${PORT}/login`, { method: "post", -<<<<<<< HEAD -<<<<<<< HEAD - /*headers: { ->>>>>>> b1b896f (Add api request changes) -======= - /* headers: { ->>>>>>> 22cbef5 (Add all other pages) - 'Content-Type': 'application/json' - }*/ -======= ->>>>>>> d7982e1 (Add error message to login, Fix Internal Error 500) -======= - const response = await fetch('/login', { - method: "post", ->>>>>>> a260428 (Dashboard Entry Update) -======= - const response = await fetch('/login', { - method: "post", ->>>>>>> 0d9e690db10b6dfbef3d9aa4316e52d1e8cb8f6a body: formData }); @@ -97,50 +73,13 @@ formData.append('password', _password); // handleAuthRes(data); -<<<<<<< HEAD -<<<<<<< HEAD - console.log(`Got token: ${token}`) } catch (error) { console.error('Error:', error.message); -======= - } catch (error) { -<<<<<<< HEAD - console.log(error); - if(error instanceof TypeError && error.message === 'Failed to fetch'){ - console.log("Failed Server") - } ->>>>>>> b1b896f (Add api request changes) -======= - console.error('Error:', error.message); ->>>>>>> d7982e1 (Add error message to login, Fix Internal Error 500) -======= - } catch (error) { - console.error('Error:', error.message); ->>>>>>> 0d9e690db10b6dfbef3d9aa4316e52d1e8cb8f6a } } -<<<<<<< HEAD -<<<<<<< HEAD -<<<<<<< HEAD -<<<<<<< HEAD -function handleAuthRes(data) { - if(data.token){ - localStorage.setItem('token', token.data); - console.log("Logged In...") - } else { - console.error('Login Failed:', data.error) - } -} -======= -======= -======= ->>>>>>> 106888c (Add input boxes for Add entry page) -======= - ->>>>>>> 0d9e690db10b6dfbef3d9aa4316e52d1e8cb8f6a const register = document.getElementById("register"); register.addEventListener("click", function(event) { @@ -151,7 +90,7 @@ register.addEventListener("click", function(event) { window.onload = async function() { try { - let response = await fetch('/get_data', { + let response = await fetch(`http://127.0.0.1:${PORT}/get_data`, { method: 'POST', headers: { 'Content-Type': 'application/json' @@ -171,27 +110,6 @@ window.onload = async function() { }; -<<<<<<< HEAD -<<<<<<< HEAD - - - - - - - - - - - - - - ->>>>>>> 22cbef5 (Add all other pages) -======= ->>>>>>> 7afbaba (Finish Frontend) -======= ->>>>>>> 0d9e690db10b6dfbef3d9aa4316e52d1e8cb8f6a // function handleAuthRes(data) { // if(data.token){ // localStorage.setItem('token', data.token); @@ -200,10 +118,5 @@ window.onload = async function() { // console.error('Login Failed:', data.error) // } // } -<<<<<<< HEAD -<<<<<<< HEAD ->>>>>>> b1b896f (Add api request changes) -======= ->>>>>>> a260428 (Dashboard Entry Update) -======= ->>>>>>> 0d9e690db10b6dfbef3d9aa4316e52d1e8cb8f6a + + diff --git a/frontend/scripts/register.js b/frontend/scripts/register.js index bd6d844..33bf13c 100644 --- a/frontend/scripts/register.js +++ b/frontend/scripts/register.js @@ -1,4 +1,3 @@ - const errlabel = document.getElementById('errlabel') function validateRegister() { @@ -29,7 +28,7 @@ async function createUser(username,password) { formData.append("password", password) try { - const response = await fetch('/add_user', { + const response = await fetch(`http://127.0.0.1:${PORT}/add_user`, { method: "POST", body: formData }); @@ -55,7 +54,7 @@ async function Login(username,password){ formData.append('password', password); try { - const response = await fetch('/login', { + const response = await fetch(`http://127.0.0.1:${PORT}/login`, { method: "post", body: formData }); @@ -75,4 +74,4 @@ async function Login(username,password){ } catch (error) { console.error('Error:', error.message); } -} \ No newline at end of file +} diff --git a/frontend/styles/dashboard.css b/frontend/styles/dashboard.css index 5b960aa..18e035d 100644 --- a/frontend/styles/dashboard.css +++ b/frontend/styles/dashboard.css @@ -1,1222 +1,1221 @@ * { - box-sizing: border-box; - margin: none; - } - + box-sizing: border-box; + margin: none; +} + body { - background-color: rgb(255, 255, 255); - display: flex; - margin-top: 25px; - align-items: center; - justify-content: center; - background-image: url("../assets/bg.jpg"); - background-size: cover; - background-position: center; - background-repeat: no-repeat; +background-color: rgb(255, 255, 255); +display: flex; +margin-top: 25px; +align-items: center; +justify-content: center; +background-image: url("../assets/bg.jpg"); +background-size: cover; +background-position: center; +background-repeat: no-repeat; } .wrapper { - display: flex; - width: 90vw; - height: 90vh; - align-items: center; - justify-content: center; +display: flex; +width: 90vw; +height: 90vh; +align-items: center; +justify-content: center; } .innerwrapper { - height: 90%; - width: 90%; - padding: 10px; - position: relative; +height: 90%; +width: 90%; +padding: 10px; +position: relative; } .container { - display: flex; - align-items: center; - background-color: rgb(0, 255, 255,0.2); - backdrop-filter: blur(15px); - border-radius: 30px; - position: relative; - width: 1200px; - height: 600px; - box-shadow: 0px 0px 30px rgba(0, 0, 0, 0.8); - overflow: hidden; - justify-content: center; +display: flex; +align-items: center; +background-color: rgb(0, 255, 255,0.2); +backdrop-filter: blur(15px); +border-radius: 30px; +position: relative; +width: 1200px; +height: 600px; +box-shadow: 0px 0px 30px rgba(0, 0, 0, 0.8); +overflow: hidden; +justify-content: center; } footer{ - position: fixed; - bottom: 0px; - background-color: rgb(12, 12, 12); - height: 50px; - width: 100vw; +position: fixed; +bottom: 0px; +background-color: rgb(12, 12, 12); +height: 50px; +width: 100vw; } footer p{ - color: white; - text-align: center; +color: white; +text-align: center; } /*----------------------------------------------------------------------------------------*/ .contentbox { - display: flex; - position: absolute; - right: 30px; - bottom: 0; - background-color: rgb(0, 255, 255,0.3); - border-radius: 20px; - height: 100%; - width: 45%; - justify-content: center; - align-items: center; - max-height: 100%; - overflow: auto; - box-shadow: 0 0 10px; +display: flex; +position: absolute; +right: 30px; +bottom: 0; +background-color: rgb(0, 255, 255,0.3); +border-radius: 20px; +height: 100%; +width: 45%; +justify-content: center; +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: 15px; - width: 90%; - height: 11%; - background-color: rgb(255, 255, 255, 0.5); - border-radius: 10px; - padding: 10px; - flex-shrink: 0; +display: flex; +justify-content: center; +align-items: center; +position: absolute; +overflow: hidden; +top: 15px; +width: 90%; +height: 11%; +background-color: rgb(255, 255, 255, 0.5); +border-radius: 10px; +padding: 10px; +flex-shrink: 0; } .searchbar input { - 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; - transition: transform 0.3s ease; +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; +transition: transform 0.3s ease; } .searchbar input:hover, .searchbar input:focus{ - transform: scale(1.05); +transform: scale(1.05); } /*----------------------------------------------------------------------------------------*/ .objcontainer { - display: flex; - flex-direction: column; - row-gap: 10px; - position: absolute; - bottom: 20px; - width: 90%; - height: 80%; - background-color: rgb(255, 255, 255, 0.5); - border-radius: 10px; - overflow: auto; - padding-top: 20px; - padding-bottom: 20px; - align-items: center; +display: flex; +flex-direction: column; +row-gap: 10px; +position: absolute; +bottom: 20px; +width: 90%; +height: 80%; +background-color: rgb(255, 255, 255, 0.5); +border-radius: 10px; +overflow: auto; +padding-top: 20px; +padding-bottom: 20px; +align-items: center; } .objcontainer div{ - display: flex; - position: relative; - padding: 20px; - width: 90%; - height: 50px; - background-color: rgb(255, 255, 255, 0.5); - text-align: left; - box-shadow: 0 0 10px black; - border: rgba(0, 255, 255, 0.5) 1px solid; - overflow: hidden; - align-items: center; - flex-shrink: 0; - transition: width 0.3s ease, height 0.3s ease; +display: flex; +position: relative; +padding: 20px; +width: 90%; +height: 50px; +background-color: rgb(255, 255, 255, 0.5); +text-align: left; +box-shadow: 0 0 10px black; +border: rgba(0, 255, 255, 0.5) 1px solid; +overflow: hidden; +align-items: center; +flex-shrink: 0; +transition: width 0.3s ease, height 0.3s ease; } .objcontainer div:hover { - background-color: rgba(255, 255, 255, 0.7); - width: 95%; - height: 60px; +background-color: rgba(255, 255, 255, 0.7); +width: 95%; +height: 60px; } .objcontainer div:not(:hover) { - background-color: rgb(255, 255, 255, 0.5); - width: 90%; - height: 50px; +background-color: rgb(255, 255, 255, 0.5); +width: 90%; +height: 50px; } .objcontainer div button:nth-child(3){ - position: absolute; - right: 30px; - background-color: rgba(0, 160, 160, 0.3); - border-radius: 10px; - padding: 5px; - font-weight: bold; - box-shadow: 0 0 5px; - cursor: pointer; - opacity: 0; - width: 25px; - height: 25px; - background-image: url("../assets/eye.svg"); - background-size: cover; - backdrop-filter: blur(5px); - transition: opacity 0.3s ease; +position: absolute; +right: 30px; +background-color: rgba(0, 160, 160, 0.3); +border-radius: 10px; +padding: 5px; +font-weight: bold; +box-shadow: 0 0 5px; +cursor: pointer; +opacity: 0; +width: 25px; +height: 25px; +background-image: url("../assets/eye.svg"); +background-size: cover; +backdrop-filter: blur(5px); +transition: opacity 0.3s ease; } .objcontainer div button:nth-child(4){ - position: absolute; - right: 70px; - background-color: rgba(0, 160, 160, 0.3); - border-radius: 10px; - padding: 5px; - font-weight: bold; - box-shadow: 0 0 5px; - cursor: pointer; - opacity: 0; - width: 25px; - height: 25px; - background-image: url("../assets/pencil.svg"); - background-size: cover; - backdrop-filter: blur(5px); - transition: opacity 0.3s ease; +position: absolute; +right: 70px; +background-color: rgba(0, 160, 160, 0.3); +border-radius: 10px; +padding: 5px; +font-weight: bold; +box-shadow: 0 0 5px; +cursor: pointer; +opacity: 0; +width: 25px; +height: 25px; +background-image: url("../assets/pencil.svg"); +background-size: cover; +backdrop-filter: blur(5px); +transition: opacity 0.3s ease; } .objcontainer div:hover button{ - opacity: 1; +opacity: 1; } .objcontainer div:not(:hover) button{ - opacity: 0; +opacity: 0; } .objcontainer div button:hover{ - background-color: rgba(143, 143, 143, 0.5); +background-color: rgba(143, 143, 143, 0.5); } /* .objcontainer div button:not(:hover){ - background-color: hsl(0, 0%, 100%, 0.5); +background-color: hsl(0, 0%, 100%, 0.5); } */ .objcontainer div img{ - width: 30px; +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; +padding-left: 20px; +font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif; +font-weight: bold; } .objcontainer div:last-child { - border-radius: 0 0 10px 10px; +border-radius: 0 0 10px 10px; } .objcontainer div:first-child { - border-radius: 10px 10px 0 0; +border-radius: 10px 10px 0 0; } /*----------------------------------------------------------------------------------------*/ .querybox { - display: flex; - justify-content: center; - align-items: center; - position: absolute; - left: 30px; - bottom: 40px; - background-color: rgb(0, 255, 255,0.3); - border-radius: 20px; - height: 70%; - width: 40%; - position: absolute; - bottom: 0; - box-shadow: 0 0 10px; +display: flex; +justify-content: center; +align-items: center; +position: absolute; +left: 30px; +bottom: 40px; +background-color: rgb(0, 255, 255,0.3); +border-radius: 20px; +height: 70%; +width: 40%; +position: absolute; +bottom: 0; +box-shadow: 0 0 10px; } .infobox { - display: flex; - position: relative; - width: 90%; - height: 90%; - background-color: rgb(255, 255, 255, 0.5); - border-radius: 10px; - padding: 20px; - overflow: auto; - justify-content: center; - align-items: center; - /* background-image: url('../assets/icon.jpg'); - background-size: 80% auto; - background-repeat: no-repeat; - background-position: center; */ +display: flex; +position: relative; +width: 90%; +height: 90%; +background-color: rgb(255, 255, 255, 0.5); +border-radius: 10px; +padding: 20px; +overflow: auto; +justify-content: center; +align-items: center; +/* background-image: url('../assets/icon.jpg'); +background-size: 80% auto; +background-repeat: no-repeat; +background-position: center; */ } .infobox img { - transition: transform 0.3s ease; - width: 18vw; - height: 18vw; +transition: transform 0.3s ease; +width: 18vw; +height: 18vw; } .infobox img:hover { - transform: scale(1.105); +transform: scale(1.105); } .infopanel { - display: none; - position: relative; - width: 90%; - height: 90%; - background-color: rgb(255, 255, 255, 0.5); - border-radius: 10px; - flex-direction: column; - padding: 20px; - overflow: auto; +display: none; +position: relative; +width: 90%; +height: 90%; +background-color: rgb(255, 255, 255, 0.5); +border-radius: 10px; +flex-direction: column; +padding: 20px; +overflow: auto; } .infopanel div { - position: relative; - display: flex; - flex-direction: column; - border-radius: 10px; - margin: 5px; - padding: 10px; - background-color: rgb(255, 255, 255, 0.7); - box-shadow: 0 0 10px; +position: relative; +display: flex; +flex-direction: column; +border-radius: 10px; +margin: 5px; +padding: 10px; +background-color: rgb(255, 255, 255, 0.7); +box-shadow: 0 0 10px; } .infopanel div div{ - display: flex; - flex-direction: row; - align-items: center; - box-shadow: 0 0 5px; +display: flex; +flex-direction: row; +align-items: center; +box-shadow: 0 0 5px; } .infopanel > div { - transition: transform 0.3s ease; +transition: transform 0.3s ease; } .infopanel > div:hover{ - transform: scale(1.05); +transform: scale(1.05); } .infopanel > div:not(:hover){ - transform: scale(1); +transform: scale(1); } .infopanel > div > div { - transition: transform 0.3s ease; +transition: transform 0.3s ease; } .infopanel > div > div:hover{ - transform: scale(1.03); +transform: scale(1.03); } .infopanel > div > div:not(:hover){ - transform: scale(1); +transform: scale(1); } .infopanel div label{ - display: inline-block; - font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif; - font-weight: bolder; - font-size: 13px; - text-align: left; - text-overflow: ellipsis; - overflow: hidden; - white-space: nowrap; +display: inline-block; +font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif; +font-weight: bolder; +font-size: 13px; +text-align: left; +text-overflow: ellipsis; +overflow: hidden; +white-space: nowrap; } .infopanel > div:first-child{ - position: relative; - border-radius: 10px; - margin: 5px 5px 15px 5px; - padding: 10px 10px 10px 15px; - background-color: rgb(255, 255, 255, 0.9); - box-shadow: 0 0 10px; - display: flex; - flex-shrink: 0; - height: 45px; - align-items: left; - justify-content: center; - align-items: center; - flex-direction: row; +position: relative; +border-radius: 10px; +margin: 5px 5px 15px 5px; +padding: 10px 10px 10px 15px; +background-color: rgb(255, 255, 255, 0.9); +box-shadow: 0 0 10px; +display: flex; +flex-shrink: 0; +height: 45px; +align-items: left; +justify-content: center; +align-items: center; +flex-direction: row; } .infopanel div:first-child > label{ - /* position: absolute; */ - font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif; - font-weight: bolder; - font-size: 25px; - text-align: left; - width: 70%; +/* position: absolute; */ +font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif; +font-weight: bolder; +font-size: 25px; +text-align: left; +width: 70%; } .infopanel div:first-child > button{ - background-color: rgba(255, 255, 255, 0.5); - border-radius: 5px; - padding: 5px; - cursor: pointer; - width: 25px; - height: 25px; - background-size: cover; - backdrop-filter: blur(10px); - transition: opacity 0.3s ease; - margin: 10px; - border: none; - background-image: url('../assets/link.svg'); +background-color: rgba(255, 255, 255, 0.5); +border-radius: 5px; +padding: 5px; +cursor: pointer; +width: 25px; +height: 25px; +background-size: cover; +backdrop-filter: blur(10px); +transition: opacity 0.3s ease; +margin: 10px; +border: none; +background-image: url('../assets/link.svg'); } .infopanel div:first-child > button:hover{ - filter: brightness(80%); +filter: brightness(80%); } .infopanel div input{ - width: 80%; - height: 30px; - border-radius: 10px; - background-color: rgb(255, 255, 255, 0.7); - border: none; - transition: width 0.1s ease, height 0.1s ease; - box-shadow: 0 0 5px; - margin: 0 0px 0 10px; - padding-left: 10px; +width: 80%; +height: 30px; +border-radius: 10px; +background-color: rgb(255, 255, 255, 0.7); +border: none; +transition: width 0.1s ease, height 0.1s ease; +box-shadow: 0 0 5px; +margin: 0 0px 0 10px; +padding-left: 10px; } .infopanel div input:disabled { - color: black; - font-weight: bold; +color: black; +font-weight: bold; } .infopanel div div button{ - background-color: rgba(255, 255, 255, 0.5); - border-radius: 5px; - padding: 5px; - cursor: pointer; - width: 25px; - height: 25px; - background-size: cover; - backdrop-filter: blur(10px); - background-image: url('../assets/clipboard.svg'); - transition: opacity 0.3s ease; - margin: 10px; - border: none; - transition: background-image 0.4s ease; +background-color: rgba(255, 255, 255, 0.5); +border-radius: 5px; +padding: 5px; +cursor: pointer; +width: 25px; +height: 25px; +background-size: cover; +backdrop-filter: blur(10px); +background-image: url('../assets/clipboard.svg'); +transition: opacity 0.3s ease; +margin: 10px; +border: none; +transition: background-image 0.4s ease; } .infopanel div div button:hover{ - filter: grayscale(30%) brightness(80%); +filter: grayscale(30%) brightness(80%); } .animate{ - animation-name: tick; - animation-duration: 0.3s; - animation-timing-function: ease; +animation-name: tick; +animation-duration: 0.3s; +animation-timing-function: ease; } @keyframes tick { - from { - opacity: 1; - } - to { - opacity: 0; - } +from { + opacity: 1; +} +to { + opacity: 0; +} } /*----------------------------------------------------------------------------------------*/ .buttonbox { - display: flex; - justify-content: space-evenly; - align-items: center; - flex-direction: row; - gap: 20px; - position: absolute; - left: 30px; - top: 0; - background-color: rgb(0, 255, 255,0.3); - border-radius: 20px; - height: 20%; - width: 40%; - box-shadow: 0 0 10px; - padding: 0 10px 0 10px; +display: flex; +justify-content: space-evenly; +align-items: center; +flex-direction: row; +gap: 20px; +position: absolute; +left: 30px; +top: 0; +background-color: rgb(0, 255, 255,0.3); +border-radius: 20px; +height: 20%; +width: 40%; +box-shadow: 0 0 10px; +padding: 0 10px 0 10px; } .buttonpanel { - width: 40%; - height: 70%; - background-color: rgb(255, 255, 255, 0.5); - border-radius: 10px; - display: flex; - align-items: center; - justify-content: center; - padding: 20px; +width: 40%; +height: 70%; +background-color: rgb(255, 255, 255, 0.5); +border-radius: 10px; +display: flex; +align-items: center; +justify-content: center; +padding: 20px; } .buttonbox > div:first-child { - width: 50%; - height: 70%; - background-color: rgb(255, 255, 255, 0.5); - border-radius: 10px; - display: flex; - align-items: center; - justify-content: center; - padding: 5px; - position: relative; +width: 50%; +height: 70%; +background-color: rgb(255, 255, 255, 0.5); +border-radius: 10px; +display: flex; +align-items: center; +justify-content: center; +padding: 5px; +position: relative; } .buttonbox div { - justify-content: space-around; +justify-content: space-around; } .buttonbox > div:first-child > div { - background-color: rgb(255, 255, 255, 0.7); - padding: 5px 10px 5px 10px; - border-radius: 10px; - box-shadow: 0 0 5px; - display: flex; - align-items: center; - flex-direction: row; - gap: 10px; - width: 90%; - height: 90%; - transition: transform 0.3s ease; +background-color: rgb(255, 255, 255, 0.7); +padding: 5px 10px 5px 10px; +border-radius: 10px; +box-shadow: 0 0 5px; +display: flex; +align-items: center; +flex-direction: row; +gap: 10px; +width: 90%; +height: 90%; +transition: transform 0.3s ease; } .buttonbox > div:first-child > div:hover{ - transform: scale(1.05); +transform: scale(1.05); } .buttonbox > div:first-child > div > div:first-child{ - flex-shrink: 0; - background-image: url(../assets/logo.png); - background-size: cover; - width: 30px; - height: 30px; +flex-shrink: 0; +background-image: url(../assets/logo.png); +background-size: cover; +width: 30px; +height: 30px; } .buttonbox > div:first-child label:first-child { - display: block; - color: rgb(0, 0, 0); - font-size: 20px; - font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif; - font-weight: bold; - text-align: center; - white-space: nowrap; - text-overflow: ellipsis; - overflow: hidden; +display: block; +color: rgb(0, 0, 0); +font-size: 20px; +font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif; +font-weight: bold; +text-align: center; +white-space: nowrap; +text-overflow: ellipsis; +overflow: hidden; } .buttonbox > div:first-child > div:hover label:first-child{ - text-overflow: ellipsis; - animation: scrollText linear 5s infinite; - overflow: visible; +text-overflow: ellipsis; +animation: scrollText linear 5s infinite; +overflow: visible; } @keyframes scrollText { - 0%,50%,100% { - transform: translateX(0%); - } - 25% { - transform: translateX(-25%); - } - 75% { - transform: translateX(25%); - } +0%,50%,100% { + transform: translateX(0%); +} +25% { + transform: translateX(-25%); +} +75% { + transform: translateX(25%); +} } .buttonbox > div:first-child a { - display: block; - color: rgb(0, 0, 0); - font-size: 10px; - font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif; - font-weight: bold; - text-align: center; - overflow: hidden; +display: block; +color: rgb(0, 0, 0); +font-size: 10px; +font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif; +font-weight: bold; +text-align: center; +overflow: hidden; } .buttonbox div:first-child > div > div:last-child{ - /* width: 70px; */ - overflow: hidden; +/* width: 70px; */ +overflow: hidden; } .buttonpanel div:last-child { - width: 50px; - height: 50px; - display: flex; - align-items: center; - justify-content: center; +width: 50px; +height: 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; +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; +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; +background-color: rgba(0, 146, 15, 0.7); +width: 40px; +height: 40px; } /*----------------------------------------------------------------------------------------*/ ::-webkit-scrollbar { - width: 10px; - border-radius: 5px; +width: 10px; +border-radius: 5px; } ::-webkit-scrollbar-track { - /* background: hsla(0, 0%, 73%, 0.7); */ - background: transparent; +/* background: hsla(0, 0%, 73%, 0.7); */ +background: transparent; } - + ::-webkit-scrollbar-thumb { - background: hsl(0, 0%, 20%); - border-radius: 5px; +background: hsl(0, 0%, 20%); +border-radius: 5px; } ::-webkit-scrollbar-thumb:hover { - background: hsl(0, 0%, 17%); +background: hsl(0, 0%, 17%); } /*----------------------------------------------------------------------------------------*/ #logout{ - width: 40px; - height: 40px; - position: absolute; - top: 20px; - right: 20px; - border-radius: 10px; - background-image: url(../assets/logout2.svg); - background-size: cover; - background-color: transparent; - border: none; +width: 40px; +height: 40px; +position: absolute; +top: 20px; +right: 20px; +border-radius: 10px; +background-image: url(../assets/logout2.svg); +background-size: cover; +background-color: transparent; +border: none; } #logout:hover{ - background-image: url(../assets/logout2.svg); - opacity: 0.8; +background-image: url(../assets/logout2.svg); +opacity: 0.8; } #logout:not(:hover){ - background-image: url(../assets/logout.svg); - opacity: 0.7; +background-image: url(../assets/logout.svg); +opacity: 0.7; } /*----------------------------------------------------------------------------------------*/ #entrycontainer { - position: absolute; - width: 100%; - height: 100%; - background-color: hsl(0, 0%, 100%, 10%); - display: none; - justify-content: center; - align-items: center; - backdrop-filter: blur(20px); - overflow: hidden; +position: absolute; +width: 100%; +height: 100%; +background-color: hsl(0, 0%, 100%, 10%); +display: none; +justify-content: center; +align-items: center; +backdrop-filter: blur(20px); +overflow: hidden; } .hidden { - display: none; +display: none; } .addentrydiv { - position: relative; - 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; +position: relative; +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:first-child{ - display: flex; - position: absolute; - top: 20px; - right: 20px; - justify-content: center; - align-items: center; - width: 35px; - height: 35px; +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; +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); +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); +width: 30px; +height: 30px; +background-color: rgb(255, 0, 0, 0.8); } /*----------------------------------------------------------------------------------------*/ .confirmdivparent { - position: absolute; - width: 100%; - height: 100%; - background-color: hsl(0, 0%, 100%, 10%); - display: none; - justify-content: center; - align-items: center; - backdrop-filter: blur(20px); - border-radius: 40px; +position: absolute; +width: 100%; +height: 100%; +background-color: hsl(0, 0%, 100%, 10%); +display: none; +justify-content: center; +align-items: center; +backdrop-filter: blur(20px); +border-radius: 40px; } .confirmdiv { - position: relative; - width: 400px; - height: 200px; - background-color: rgb(255, 255, 255, 0.8); - backdrop-filter: blur(5px); - border-radius: 40px; - display: flex; - justify-content: center; - align-items: center; - transition: opacity 0.3s ease; - opacity: 0; +position: relative; +width: 400px; +height: 200px; +background-color: rgb(255, 255, 255, 0.8); +backdrop-filter: blur(5px); +border-radius: 40px; +display: flex; +justify-content: center; +align-items: center; +transition: opacity 0.3s ease; +opacity: 0; } .confirmdivanimate { - animation-name: cdani; - animation-duration: 1s; - animation-timing-function: ease; +animation-name: cdani; +animation-duration: 1s; +animation-timing-function: ease; } @keyframes cdani { - 0% { - opacity: 0; - } - 25%, 75% { - opacity: 1; - } - 100% { - opacity: 0; - } +0% { + opacity: 0; +} +25%, 75% { + opacity: 1; +} +100% { + opacity: 0; +} } .confirmdiv img { - opacity: 0; - width: 40%; - height: 40%; - transition: opacity 1s ease; - transition: transform 0.8s ease; +opacity: 0; +width: 40%; +height: 40%; +transition: opacity 1s ease; +transition: transform 0.8s ease; } .confirmfade { - animation-name: fade; - animation-duration: 1s; - animation-timing-function: ease; +animation-name: fade; +animation-duration: 1s; +animation-timing-function: ease; } @keyframes fade { - 0% { - opacity: 0; - transform: scale(0.9); - } - 50% { - opacity: 1; - transform: scale(1.5); - } - 100% { - opacity: 0; - transform: scale(0.9); - } +0% { + opacity: 0; + transform: scale(0.9); +} +50% { + opacity: 1; + transform: scale(1.5); +} +100% { + opacity: 0; + transform: scale(0.9); +} } /*----------------------------------------------------------------------------------------*/ .popupdivparent{ - position: absolute; - width: 100%; - height: 100%; - background-color: hsl(0, 0%, 100%, 10%); - display: none; - justify-content: center; - align-items: center; - backdrop-filter: blur(20px); - box-sizing: border-box; +position: absolute; +width: 100%; +height: 100%; +background-color: hsl(0, 0%, 100%, 10%); +display: none; +justify-content: center; +align-items: center; +backdrop-filter: blur(20px); +box-sizing: border-box; } .popupdiv { - position: relative; - width: 500px; - height: 300px; - background-color: rgb(255, 255, 255, 0.8); - backdrop-filter: blur(5px); - border-radius: 40px; - display: flex; - justify-content: center; - align-items: center; - transition: opacity 0.3s ease; - opacity: 1; - flex-direction: row; - overflow: hidden; - flex-shrink: 0; +position: relative; +width: 500px; +height: 300px; +background-color: rgb(255, 255, 255, 0.8); +backdrop-filter: blur(5px); +border-radius: 40px; +display: flex; +justify-content: center; +align-items: center; +transition: opacity 0.3s ease; +opacity: 1; +flex-direction: row; +overflow: hidden; +flex-shrink: 0; } #closepopup { - 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; +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; } #closepopup:hover { - width: 35px; - height: 35px; - background-color: rgba(226, 0, 0, 0.5); +width: 35px; +height: 35px; +background-color: rgba(226, 0, 0, 0.5); } .popupdiv > div:first-of-type { - position: absolute; - top: 25px; - right: 25px; - display: flex; - justify-content: center; - align-items: center; - width: 35px; - height: 35px; +position: absolute; +top: 25px; +right: 25px; +display: flex; +justify-content: center; +align-items: center; +width: 35px; +height: 35px; } .popupdivchild { - display: flex; - justify-content: center; - align-items: center; - width: 70%; - height: 70%; - background-color: rgba(55, 16, 229, 0.8); - backdrop-filter: blur(10px); - flex-direction: column; - border-radius: 30px; - box-shadow: 0 0 10px; +display: flex; +justify-content: center; +align-items: center; +width: 70%; +height: 70%; +background-color: rgba(55, 16, 229, 0.8); +backdrop-filter: blur(10px); +flex-direction: column; +border-radius: 30px; +box-shadow: 0 0 10px; } /*----------------------------------------------------------------------------------------*/ .c1f label { - font-size: 25px; - font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif; - font-weight: bold; - text-align: center; - display: block; - color: white; +font-size: 25px; +font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif; +font-weight: bold; +text-align: center; +display: block; +color: white; } .c1f:hover { - transform: scale(1.05); - background-color: rgb(255, 255, 255, 0.8); +transform: scale(1.05); +background-color: rgb(255, 255, 255, 0.8); } .c1f:hover label{ - transform: scale(1.05); - color: rgb(0, 0, 0); +transform: scale(1.05); +color: rgb(0, 0, 0); } .c1f { - height: 50px; - width: 80%; - display: flex; - justify-content: center; - align-items: center; - overflow: hidden; - background-color: rgb(255, 255, 255, 0.5); - border-radius: 10px; - padding: 10px; - box-shadow: 0 0 10px; - transition: transform 0.3s ease; +height: 50px; +width: 80%; +display: flex; +justify-content: center; +align-items: center; +overflow: hidden; +background-color: rgb(255, 255, 255, 0.5); +border-radius: 10px; +padding: 10px; +box-shadow: 0 0 10px; +transition: transform 0.3s ease; } .c1l { - display: flex; - justify-content: center; - align-items: center; - flex-direction: row; - gap: 20px; - margin: 20px; - width: 90%; +display: flex; +justify-content: center; +align-items: center; +flex-direction: row; +gap: 20px; +margin: 20px; +width: 90%; } .c1l button:first-of-type{ - width: 40%; - height: 30px; - flex-shrink: 0; - border-radius: 10px; - background-color: rgba(0, 255, 81, 0.8); - border: none; - margin-top: 5px; - transition: height 0.1s ease, width 0.1s ease; - box-shadow: black 0 0 10px; - font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif; - font-weight: bold; - color: white; +width: 40%; +height: 30px; +flex-shrink: 0; +border-radius: 10px; +background-color: rgba(0, 255, 81, 0.8); +border: none; +margin-top: 5px; +transition: height 0.1s ease, width 0.1s ease; +box-shadow: black 0 0 10px; +font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif; +font-weight: bold; +color: white; } .c1l button:first-of-type:hover{ - color: black; - background-color: rgb(255, 255, 255, 0.9); - width: 42%; - height: 35px; +color: black; +background-color: rgb(255, 255, 255, 0.9); +width: 42%; +height: 35px; } .c1l button:last-of-type{ - width: 40%; - height: 30px; - flex-shrink: 0; - border-radius: 10px; - background-color: rgba(255, 0, 0, 0.8); - border: none; - margin-top: 5px; - transition: height 0.1s ease, width 0.1s ease; - box-shadow: black 0 0 10px; - font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif; - font-weight: bold; - color: white; +width: 40%; +height: 30px; +flex-shrink: 0; +border-radius: 10px; +background-color: rgba(255, 0, 0, 0.8); +border: none; +margin-top: 5px; +transition: height 0.1s ease, width 0.1s ease; +box-shadow: black 0 0 10px; +font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif; +font-weight: bold; +color: white; } .c1l button:last-of-type:hover{ - color: black; - background-color: rgb(255, 255, 255, 0.9); - width: 42%; - height: 35px; +color: black; +background-color: rgb(255, 255, 255, 0.9); +width: 42%; +height: 35px; } /*----------------------------------------------------------------------------------------*/ .c2 { - display: flex; - justify-content: center; - align-items: center; - width: 100%; - height: 100%; - flex-direction: column; - gap: 10px; +display: flex; +justify-content: center; +align-items: center; +width: 100%; +height: 100%; +flex-direction: column; +gap: 10px; } .c2 input{ - width: 80%; - height: 30px; - border-radius: 10px; - background-color: rgb(255, 255, 255, 0.8); - border: none; - padding-left: 10px; - font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; - box-shadow: 0 0 10px; - transition: transform 0.3s ease; +width: 80%; +height: 30px; +border-radius: 10px; +background-color: rgb(255, 255, 255, 0.8); +border: none; +padding-left: 10px; +font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; +box-shadow: 0 0 10px; +transition: transform 0.3s ease; } .c2 button{ - width: 60px; - height: 30px; - border-radius: 10px; - background-color: rgb(255, 255, 255, 0.8); - font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; - border: none; - margin-top: 5px; - transition: transform 0.3s ease; - box-shadow: 0 0 10px; +width: 60px; +height: 30px; +border-radius: 10px; +background-color: rgb(255, 255, 255, 0.8); +font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; +border: none; +margin-top: 5px; +transition: transform 0.3s ease; +box-shadow: 0 0 10px; } .c2 input:hover, .c2 input:focus { - transform: scale(1.05); +transform: scale(1.05); } .c2 button:hover { - transform: scale(1.1); - background-color: rgb(255, 255, 255, 0.9); +transform: scale(1.1); +background-color: rgb(255, 255, 255, 0.9); } .c2 label { - text-align: center; - color: rgb(208, 189, 255); - font-family: Arial, Helvetica, sans-serif; - font-size: 12px; - font-style: bold; - font-weight: bold; - width: 100%; +text-align: center; +color: rgb(208, 189, 255); +font-family: Arial, Helvetica, sans-serif; +font-size: 12px; +font-style: bold; +font-weight: bold; +width: 100%; } /*----------------------------------------------------------------------------------------*/ .fieldcontainer { - width: 80%; - height: 70%; - background-color: white; - display: flex; - position: relative; - overflow: hidden; - border-radius: 20px; - box-shadow: 0 0 5px; +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; +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; +padding-left: 10px; +font-family:'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; +box-shadow: 0 0 10px; } .fieldcontainer input:focus { - outline: none; +outline: none; } .fieldcontainer input::placeholder{ - color: rgb(82, 82, 82); - font-weight: bold; +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; +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; +width: 83%; +height: 35px; } .fieldcontainer form > div:first-child input:not(:hover):not(:focus) { - width: 80%; - height: 30px; +width: 80%; +height: 30px; } .fieldcontainer form > div:first-child button:first-of-type{ - width: 60px; - height: 30px; - border-radius: 10px; - background-color: rgb(255, 255, 255, 0.8); - border: none; - margin-top: 5px; - transition: height 0.1s ease, width 0.1s ease; - background-image: url('../assets/tickp.svg'); - background-size: 80% auto; - background-position: center; - background-repeat: no-repeat; - box-shadow: 0 0 10px; +width: 60px; +height: 30px; +border-radius: 10px; +background-color: rgb(255, 255, 255, 0.8); +border: none; +margin-top: 5px; +transition: height 0.1s ease, width 0.1s ease; +background-image: url('../assets/tickp.svg'); +background-size: 80% auto; +background-position: center; +background-repeat: no-repeat; +box-shadow: 0 0 10px; } .fieldcontainer form > div:first-child button:first-of-type:hover{ - background-color: rgb(255, 255, 255, 0.9); - width: 65px; - height: 35px; +background-color: rgb(255, 255, 255, 0.9); +width: 65px; +height: 35px; } .fieldcontainer form > div:first-child button:nth-of-type(2){ - position: absolute; - width: 25px; - height: 25px; - top: 15px; - right: 15px; - background-image: url(../assets/bin2.svg); - background-size: cover; - background-color: transparent; - border: none; - transition: transform 0.3s ease; - transition: filter 0.2s ease; - display: none; +position: absolute; +width: 25px; +height: 25px; +top: 15px; +right: 15px; +background-image: url(../assets/bin2.svg); +background-size: cover; +background-color: transparent; +border: none; +transition: transform 0.3s ease; +transition: filter 0.2s ease; +display: none; } .fieldcontainer form > div:first-child button:nth-of-type(2):hover{ - /* background-image: url(../assets/binred.svg); */ - filter: brightness(10%); - transform: scale(1.1); +/* background-image: url(../assets/binred.svg); */ +filter: brightness(10%); +transform: scale(1.1); } .fieldcontainer form > div:first-child button:last-child{ - display: none; - width: 60px; - height: 30px; - border-radius: 10px; - background-color: rgba(0, 255, 81, 0.8); - border: none; - margin-top: 5px; - transition: height 0.1s ease, width 0.1s ease; - box-shadow: black 0 0 10px; - font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif; - font-weight: bold; - color: white; +display: none; +width: 60px; +height: 30px; +border-radius: 10px; +background-color: rgba(0, 255, 81, 0.8); +border: none; +margin-top: 5px; +transition: height 0.1s ease, width 0.1s ease; +box-shadow: black 0 0 10px; +font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif; +font-weight: bold; +color: white; } .fieldcontainer form > div:first-child button:last-child:hover{ - color: black; - background-color: rgb(255, 255, 255, 0.9); - width: 65px; - height: 35px; +color: black; +background-color: rgb(255, 255, 255, 0.9); +width: 65px; +height: 35px; } .fieldcontainer label{ - font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; - font-size: 15px; - font-weight: bold; - color: white; +font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; +font-size: 15px; +font-weight: bold; +color: white; } /*----------------------------------------------------------------------------------------*/ .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; +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%; +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; +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; +width: 83%; +height: 35px; } .fieldcontainer form > div:last-child div input[type="text"]:not(:hover):not(:focus){ - width: 80%; - height: 30px; +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; +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; +width: 20px; +height: 20px; } .fieldcontainer form > div:last-child div input[type="checkbox"]:checked { - width: 20px; - height: 20px; +width: 20px; +height: 20px; } .fieldcontainer form > div:last-child div input[type="checkbox"]:not(:hover):not(:checked) { - width: 15px; - height: 15px; +width: 15px; +height: 15px; } /*----------------------------------------------------------------------------------------*/ @media (max-width: 860px) { - .container{ - position: fixed; - width: 774px; - } +.container{ + position: fixed; +} } @media (max-width: 860px) { - .entrycontainer{ - position: fixed; - width: 860px; - } - .addentrydiv{ - position: fixed; - width: 700px; - } - .popupdivparent{ - position: fixed; - width: 860px; - } +.entrycontainer{ + position: fixed; + width: 860px; +} +.addentrydiv{ + position: fixed; + width: 700px; +} +.popupdivparent{ + position: fixed; + width: 860px; +} } @media (max-width: 1080px) { - .infobox img{ - width: 194.4px; - height: 194.4px; - } +.infobox img{ + width: 194.4px; + height: 194.4px; +} } diff --git a/frontend/styles/register.css b/frontend/styles/register.css index ff95cdb..6056731 100644 --- a/frontend/styles/register.css +++ b/frontend/styles/register.css @@ -1,9 +1,4 @@ * { -<<<<<<< HEAD -<<<<<<< HEAD -<<<<<<< HEAD -======= ->>>>>>> 0d9e690db10b6dfbef3d9aa4316e52d1e8cb8f6a box-sizing: border-box; } @@ -205,274 +200,4 @@ footer p{ background-image: url('../assets/download.svg'); background-size: cover; box-shadow: rgb(0, 0, 0) 0px 0px 10px; -<<<<<<< HEAD -} -======= - box-sizing: border-box; - } - - body { - background-color: dimgrey; - display: flex; - margin-top: 25px; - align-items: center; - justify-content: center; - background-image: url("bg.jpg"); - background-size: cover; - background-position: center; - background-repeat: no-repeat; - } - - .wrapper { - display: flex; - width: 90vw; - height: 90vh; - align-items: center; - justify-content: center; - } - - - .container { - display: flex; - background-color: transparent; - backdrop-filter: blur(20px); - justify-content: center; - align-items: center; - width: 450px; - height: 400px; - flex-direction: column; - padding: 70px; - padding-bottom: 90px; - box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.6); - row-gap: 8px; - border-radius: 50px; - } -======= - box-sizing: border-box; -} ->>>>>>> d7982e1 (Add error message to login, Fix Internal Error 500) - -body { - background-color: dimgrey; - display: flex; - margin-top: 25px; - align-items: center; - justify-content: center; - background-image: url("bg.jpg"); - background-size: 200% auto; - background-position: center; - background-repeat: no-repeat; -} - -<<<<<<< HEAD - .idiv { - display: flex; - flex-direction: column; - row-gap: 10px; - justify-content: center; - padding: 7px; - } - - .idiv p{ - padding: none; - margin: none; - display: absolute; - translate: 0px 12px; - } - - #loginb { - background-color: transparent; - color: rgb(255, 255, 255, 0.8); - padding: 7px; - margin-top: 20px; - margin-bottom: 20px; - width: 150px; - box-shadow: 2px 2px 5px rgb(0, 0, 0, 0.5); - translate: 0px -5px; - font-family: 'Pixelify Sans', cursive; - font-size: 20px; - border-radius: 10px; - } - - #loginb:active { - background-color: rgb(155, 155, 155, 0.3); - } ->>>>>>> 22cbef5 (Add all other pages) -======= -.wrapper { - display: flex; - width: 90vw; - height: 90vh; - align-items: center; - justify-content: center; -} - - -.container { - display: flex; - background-color: transparent; - backdrop-filter: blur(20px); - justify-content: center; - align-items: center; - width: 450px; - height: 400px; - flex-direction: column; - padding: 70px; - padding-bottom: 90px; - box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.6); - row-gap: 8px; - border-radius: 50px; -} - -#register { - display: block; - text-align: center; - font-family: 'Pixelify Sans', cursive; - font-size: 50px; - text-shadow: 2px 2px 5px rgb(0, 0, 0); - color: white; - translate: 0px 10px; -} - -.input { - width: 300px; - height: 30px; - background-color: transparent; - color: rgb(255, 255, 255, 0.8); - box-shadow: 2px 2px 3px rgb(0, 0, 0, 0.5); - border: none; - border-top: rgba(255, 255, 255, 0.2) 2px solid; - border-left: rgb(255, 255, 255, 0.2) 2px solid; - border-radius: 10px; - padding-left: 5px; -} - -.idiv p { - color: white; - font-family: 'Pixelify Sans', cursive; - margin-left: 5px; -} - -#username::placeholder { - color: rgb(255, 255, 255, 0.5); - padding-left: 5px; -} - -#password::placeholder { - color: rgb(255, 255, 255, 0.5); - padding-left: 5px; -} - -#conpassword::placeholder { - color: rgb(255, 255, 255, 0.5); - padding-left: 5px; -} - -.idiv input { - translate: 0px -20px; -} - -.idiv { - display: flex; - flex-direction: column; - row-gap: 10px; - justify-content: center; - padding: 7px; -} - -.idiv p{ - padding: none; - margin: none; - display: absolute; - translate: 0px 12px; -} - -#loginb { - background-color: transparent; - color: rgb(255, 255, 255, 0.8); - padding: 7px; - margin-top: 20px; - margin-bottom: 20px; - width: 150px; - box-shadow: 2px 2px 5px rgb(0, 0, 0, 0.5); - translate: 0px -5px; - font-family: 'Pixelify Sans', cursive; - font-size: 20px; - border-radius: 10px; -} - -#loginb:active { - background-color: rgb(155, 155, 155, 0.3); -} - -.help { - width: 100%; - display: flex; - justify-content: space-between; - align-items: center; - -} - - -.help div{ - display: flex; - width: 50%; - justify-content: center; -} - -.error label { - position: absolute; - display: block; - justify-content: center; - translate: -50% 3px; - color: rgba(184, 156, 255, 0.9); - font-family: Arial, Helvetica, sans-serif; - font-size: 12px; - font-style: bold; - font-weight: bold; -} - -a { - text-decoration: none; - color: rgba(255, 255, 255, 0.5); - text-align: center; - font-family: 'Poppins', sans-serif; - font-size: 12px; -} - -a:active { - color: rgb(196, 196, 196, 10); -} - -footer{ - position: fixed; - bottom: 0px; - background-color: rgb(12, 12, 12); - height: 50px; - width: 100vw; -} - -footer p{ - color: white; - text-align: center; -} - -#returnb { - position: absolute; - top: 30px; - left: 30px; - width: 35px; - height: 35px; - border-radius: 15px; - font-family: 'Pixelify Sans', cursive; - color: white; - background-color: transparent; - background-image: url('download.svg'); - background-size: cover; - - box-shadow: rgb(0, 0, 0) 0px 0px 10px; -} ->>>>>>> d7982e1 (Add error message to login, Fix Internal Error 500) -======= -} ->>>>>>> 0d9e690db10b6dfbef3d9aa4316e52d1e8cb8f6a +} \ No newline at end of file