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