diff --git a/PHP Projects/Remainder-Web-App/README.md b/PHP Projects/Remainder-Web-App/README.md new file mode 100644 index 0000000000..44d8387eb8 --- /dev/null +++ b/PHP Projects/Remainder-Web-App/README.md @@ -0,0 +1 @@ +# Remainder-Web-App \ No newline at end of file diff --git a/PHP Projects/Remainder-Web-App/connection.php b/PHP Projects/Remainder-Web-App/connection.php new file mode 100644 index 0000000000..d756089970 --- /dev/null +++ b/PHP Projects/Remainder-Web-App/connection.php @@ -0,0 +1,18 @@ + \ No newline at end of file diff --git a/PHP Projects/Remainder-Web-App/index.php b/PHP Projects/Remainder-Web-App/index.php new file mode 100644 index 0000000000..8d9a228e01 --- /dev/null +++ b/PHP Projects/Remainder-Web-App/index.php @@ -0,0 +1,173 @@ + + + + + + + + + + + + + + + + + + + Remainder + + + + +
+
+
+

+
+
+
+ Sample image +
+
+
+
+ +
+ +
+ +
+ +
+ Forgot password? +
+ +
+

+ Don't have an account? + Register +

+
+ +
+ + + + +
+ +
+
+
+
+ +
+ +
+
+
+ +
+
+ +
+

Login Successfully

+
+ + + +
+
+
+ +
+
+
+ +
+
+ +
+

Login Failed

+
+ +
+
+
+ + + + + + + + + + \ No newline at end of file diff --git a/PHP Projects/Remainder-Web-App/javascript/home.php b/PHP Projects/Remainder-Web-App/javascript/home.php new file mode 100644 index 0000000000..fb02218264 --- /dev/null +++ b/PHP Projects/Remainder-Web-App/javascript/home.php @@ -0,0 +1,77 @@ +const str = document.querySelector("#homeHeader > h2"); +const dayDesc = document.querySelector("#dayDesc"); +let txt = "Welcome to the Reminder Application <>" +let txtlen = txt.length; +let pos = -1; +let t = setInterval(move, 200); +function move() { + pos++; + str.innerHTML += txt.charAt(pos); + if (pos == txtlen) { + clearInterval(t); + } +} +function dayName(n){ + switch (n) { + case 0: + return "Sunday"; + case 1: + return "Monday"; + case 2: + return "Tuesday"; + case 3: + return "Wednesday"; + case 4: + return "Thrusday"; + case 5: + return "Friday"; + case 6: + return "Saturday"; + default: + break; + } + +} +function monthName(n){ + switch (n) { + case 0: + return "January"; + case 1: + return "February"; + case 2: + return "March"; + case 3: + return "April"; + case 4: + return "May"; + case 5: + return "June"; + case 6: + return "July"; + case 7: + return "August"; + case 8: + return "September"; + case 9: + return "October"; + case 10: + return "November"; + case 11: + return "December"; + default: + break; + } + +} +function postfixDate(n){ + if(n==1) + return "th"; + else if(n==2) + return "nd"; + else if(n==3) + return "rd"; + else + return "th" +} +let date = new Date(); +dayDesc.innerText=`Today is ${dayName(date.getDay())}, ${date.getDate()}${postfixDate(date.getDate())} Of ${monthName(date.getMonth())}.` diff --git a/PHP Projects/Remainder-Web-App/javascript/login.php b/PHP Projects/Remainder-Web-App/javascript/login.php new file mode 100644 index 0000000000..f61c98bad2 --- /dev/null +++ b/PHP Projects/Remainder-Web-App/javascript/login.php @@ -0,0 +1,76 @@ +const inputContainer = document.querySelectorAll('.inputContainer') +const cancelPopUp = document.getElementById('cancelPopUp') +const successPopUp = document.getElementById('successPopUp') + +//Inputs +const loginUserName = document.getElementById('username') +const loginPassword = document.getElementById('password') + +const testUserName = "abcd" +const testloginPassword = "abcd" + +const str = document.querySelector("#loginHeader > h2"); +let txt = "Welcome to Remainder app !" +let txtlen = txt.length; +let pos = -1; +let t = setInterval(move, 200); +function move() { + pos++; + str.innerHTML += txt.charAt(pos); + if (pos == txtlen) { + clearInterval(t); + } +} + + + +const popUp = (op) => { + if (op === "cancel") { + cancelPopUp.style.display = "flex" + } + if (op === "login") { + if (loginUserName.value == testUserName && loginPassword.value == testloginPassword) + successPopUp.style.display = "flex"; + else if ((loginUserName.value == "") && (loginPassword.value == "")) + alert("Please Enter username and password") + else if (loginUserName.value == "") + alert("Please enter username") + else if (loginPassword.value == "") + alert("Please enter password") + else + cancelPopUp.style.display = "flex"; + } + if (op === "signup") { + let emptyCheck = isEmpty() + if (emptyCheck === false) { + const loginrepassword = document.getElementById("repassword").value + if (loginPassword.value !== loginrepassword && loginrepassword !== "") { + alert("Password Mismatch !"); + } + else { + window.open("./pages/home.php"); + } + } + } +} + +const closePopUp = (op) => { + document.getElementById(op).style.display = "none" +} + +const retry = (op) => { + inputContainer.forEach((element) => { + element.value = "" + }) + document.getElementById(op).style.display = "none" +} +const isEmpty = () => { + for (let i = 0; i < inputContainer.length; i++) { + const element = inputContainer[i]; + if (element.value === "") { + alert("Form imcomplete") + return true + } + } + return false +} \ No newline at end of file diff --git a/PHP Projects/Remainder-Web-App/javascript/main.php b/PHP Projects/Remainder-Web-App/javascript/main.php new file mode 100644 index 0000000000..39e0ba8c8b --- /dev/null +++ b/PHP Projects/Remainder-Web-App/javascript/main.php @@ -0,0 +1,18 @@ +const formBtn = document.querySelectorAll('.formBtn') +formBtn.forEach((element) => { + element.addEventListener("click", (e) => { + e.preventDefault(); + + }) +}) + + +const dropDownIcon = document.querySelector(".dropDownIcon") +const navLoginSignUp = document.querySelector(".navLoginSignUp") + +dropDownIcon.addEventListener("click",function () { + if(navLoginSignUp.style.display==="flex") + navLoginSignUp.style.display="none" + else + navLoginSignUp.style.display="flex" +}) \ No newline at end of file diff --git a/PHP Projects/Remainder-Web-App/javascript/set.php b/PHP Projects/Remainder-Web-App/javascript/set.php new file mode 100644 index 0000000000..e69de29bb2 diff --git a/PHP Projects/Remainder-Web-App/pages/deleteRemainder.php b/PHP Projects/Remainder-Web-App/pages/deleteRemainder.php new file mode 100644 index 0000000000..ca36ed1900 --- /dev/null +++ b/PHP Projects/Remainder-Web-App/pages/deleteRemainder.php @@ -0,0 +1,107 @@ + + + + + + + + + + + + + + + + + + + Remainder + + + + + +
+
+
+
+
Modify Remainder
+
+
+ + +
+
+ + +
+
+
+ + +
    +
    • +
    • +
    • +
+
+
+
+ + +
+ +
+ +
+ +
+ + + + + + + + + \ No newline at end of file diff --git a/PHP Projects/Remainder-Web-App/pages/disableRemainder.php b/PHP Projects/Remainder-Web-App/pages/disableRemainder.php new file mode 100644 index 0000000000..95ee32a465 --- /dev/null +++ b/PHP Projects/Remainder-Web-App/pages/disableRemainder.php @@ -0,0 +1,120 @@ + + + + + + + + + + + + + + + + + + + Remainder + + + + + +
+
+
+
+
Disable Remainder
+
+
+ + +
+
+ + +
+
+
+ + +
    +
    • +
    • +
    • +
+
+
+
+ + +
+ +
+ + +
+
+
+
+
+ + + + + + + + + \ No newline at end of file diff --git a/PHP Projects/Remainder-Web-App/pages/enableRemainder.php b/PHP Projects/Remainder-Web-App/pages/enableRemainder.php new file mode 100644 index 0000000000..95a78e5e59 --- /dev/null +++ b/PHP Projects/Remainder-Web-App/pages/enableRemainder.php @@ -0,0 +1,150 @@ + + + + + + + + + + + + + + + + + + + Remainder + + + + + +
+
+
+
+
Enable Remainder
+
+
+ + +
+
+ + +
+
+
+ + +
    +
    • +
    • +
    • +
+
+
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ +
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+
+ + +
+
+
+
+
+ + + + + + + + + \ No newline at end of file diff --git a/PHP Projects/Remainder-Web-App/pages/home.php b/PHP Projects/Remainder-Web-App/pages/home.php new file mode 100644 index 0000000000..9f9ccb5fc8 --- /dev/null +++ b/PHP Projects/Remainder-Web-App/pages/home.php @@ -0,0 +1,167 @@ + + + + + + + + + + + + + + + + + + + Remainder + + + + + +
+

+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+

Set Remainder

+
+
+

+ You can set remainder by just clicking on the below set button. +

+ +
+
+
+
+
+ +
+
+

Modify Remainder

+
+
+

+ You can modify remainder by just clicking on the below modify button. +

+ +
+
+
+ +
+
+
+
+ +
+
+

Disable Remainder

+
+
+

+ You can disable remainder by just clicking on the below disable button. +

+ +
+
+
+
+
+ +
+
+

Delete Remainder

+
+
+

+ You can delete remainder by just clicking on the below delete button. +

+ +
+
+
+
+
+
+
+ +
+
+

Enable Remainder

+
+
+

+ You can enable remainder by just clicking on the below enable button. +

+ +
+
+
+
+
+ +
+
+

view Remainder

+
+
+

+ You can view your remainder by just clicking on the below view button. +

+ +
+
+
+
+
+
+
+
+
+ + + + + + + + \ No newline at end of file diff --git a/PHP Projects/Remainder-Web-App/pages/modifyRemainder.php b/PHP Projects/Remainder-Web-App/pages/modifyRemainder.php new file mode 100644 index 0000000000..698308f109 --- /dev/null +++ b/PHP Projects/Remainder-Web-App/pages/modifyRemainder.php @@ -0,0 +1,150 @@ + + + + + + + + + + + + + + + + + + + Remainder + + + + + +
+
+
+
+
Modify Remainder
+
+
+ + +
+
+ + +
+
+
+ + +
    +
    • +
    • +
    • +
+
+
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ +
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+
+ + +
+
+
+
+
+ + + + + + + + + \ No newline at end of file diff --git a/PHP Projects/Remainder-Web-App/pages/setRemainder.php b/PHP Projects/Remainder-Web-App/pages/setRemainder.php new file mode 100644 index 0000000000..711fa247ac --- /dev/null +++ b/PHP Projects/Remainder-Web-App/pages/setRemainder.php @@ -0,0 +1,168 @@ + + + + + + + + + + + + + + + + + + + Remainder + + + +
+ + + +
+
+
+
+
Set Remainder
+
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ +
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+
+ + +
+
+
+
+
+ +
+

+ Copyright © 2023. All rights reserved. +

+
+ +
+
+
+
+ +
+
+ +
+

Sign up Successfully

+
+ + + +
+
+
+ + + + + + \ No newline at end of file diff --git a/PHP Projects/Remainder-Web-App/pages/viewRemainder.php b/PHP Projects/Remainder-Web-App/pages/viewRemainder.php new file mode 100644 index 0000000000..be8e50d856 --- /dev/null +++ b/PHP Projects/Remainder-Web-App/pages/viewRemainder.php @@ -0,0 +1,194 @@ + + + + + + + + + + + + + + + + + + + Remainder + + + + + +
+
+
View Remainder
+
+
+
+ + +
+
+ + +
+
+
+ + +
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Remainder NameRemainder SubjectRemainder DescriptionEmail AddressContact NoSMS NoRecurrence Frequency +
+ checkbox +
+
+
+ +
+ 		SitAmetConsecteturSitAmetAmetConsectetur
+
+ +
+ 		SitAmetConsecteturSitAmetAmetConsectetur
+
+ +
+ 		SitAmetConsecteturSitAmetAmetConsectetur
+
+ +
+ 		SitAmetConsecteturSitAmetAmetConsectetur
+
+ +
+ + + + +
+ +
+ + + + + + + + \ No newline at end of file diff --git a/PHP Projects/Remainder-Web-App/signup.php b/PHP Projects/Remainder-Web-App/signup.php new file mode 100644 index 0000000000..720de639ba --- /dev/null +++ b/PHP Projects/Remainder-Web-App/signup.php @@ -0,0 +1,164 @@ + + + + + + + + + + + + + + + + + + + Remainder + + + + +
+
+
+

+
+
+
+ Sample image +
+
+
+ +
+ +
+ +
+ +
+ +
+ +
+ +
+ +
+ +
+ +
+ +
+

+ Already have an account? + Sign Up +

+
+ +
+ + + + + + +
+ +
+
+
+
+
+

+ Copyright © 2023. All rights reserved. +

+
+
+ +
+
+
+ +
+
+ +
+

Sign up Successfully

+
+ + + +
+
+
+ +
+
+
+ +
+
+ +
+

Login Failed

+
+ +
+
+
+ + + + + + + + + \ No newline at end of file diff --git a/PHP Projects/Remainder-Web-App/style/responsive.css b/PHP Projects/Remainder-Web-App/style/responsive.css new file mode 100644 index 0000000000..591563c649 --- /dev/null +++ b/PHP Projects/Remainder-Web-App/style/responsive.css @@ -0,0 +1,210 @@ +@media only screen and (max-device-width: 1440px) { + .formContainer { + max-width: 35vw; + min-height: auto; + } + + .inputContainer { + height: 100%; + min-height: 8vh; + } + + .row { + height: 100%; + min-height: 65vh; + } + +} + +@media only screen and (max-device-width: 1024px) { + .loginContent { + height: 100%; + max-height: 84%; + } + + .imgContainer { + max-width: 45vw; + } + + .formContainer { + max-width: 45vw; + } + .row { + height: 100%; + min-height: 90vh; + } + #homeHeader h2{ + margin: 2vh 0 0 0; + font-size: 3.2rem; + } + .newRmimgContainer{ + display: none; + } + +} + +@media only screen and (max-device-width: 767px) { + #loginHeader h2 { + height: 10vh; + font-size: 2rem; + display: flex; + align-items: flex-end; + justify-content: center; + + } + + .imgContainer { + display: none; + } + + .loginContent { + height: 100%; + min-height: 85vh; + } + + .loginBtnContainer { + flex-direction: column-reverse; + height: 100%; + min-height: 20vh; + } + + .formContainer { + padding: 15px 0px; + height: auto; + width: 100%; + min-height: auto; + max-height: auto; + min-width: 74vw; + display: flex; + align-items: center; + justify-content: center; + box-shadow: 0 10px 16px 0 rgb(0 0 0 / 20%), 0 6px 20px 0 rgb(0 0 0 / 19%); + } + + .formContainer form { + height: 100%; + min-height: 50vh; + width: 100%; + max-width: 85%; + display: flex; + flex-direction: column; + justify-content: space-evenly; + justify-content: space-evenly; + } + + .loginBtnContainer { + max-height: 10vh; + } + + .inputContainer { + height: 100%; + max-height: 8vh; + } + #homeHeader h2{ + font-size: 2.5rem; + } + #dayDesc{ + min-height: auto; + font-size: 2.5rem; + } + .our_solution_category .solution_cards_box { + flex-direction: row; + } + + .navHome{ + flex-direction: column; + } + .navHome div{ + width: 100%; + } + .dropDownIcon{ + display: block; + font-size: 2rem; + } + .navHome div:nth-child(1){ + display: flex; + align-items: center; + justify-content: space-between; + } + .navLoginSignUp button:nth-child(2){ + white-space: nowrap; + } + .navLoginSignUp{ + flex-direction: column; + } + .navLoginSignUp{ + width: auto; + height: 100%; + min-height: 22vh; + justify-content: space-evenly; + display: none; + } + .navHome{ + min-height: auto; + } +} + +@media (max-width: 629px) { + .our_solution_category .solution_cards_box { + flex-direction: column; + } +} +@media (max-width: 450px) { + .h-custom { + height: 100%; + } + #dayDesc{ + margin-top: 30px; + } + footer p{ + font-size: 1.4rem; + } + #homeHeader { + padding: 0 10px; + } + .setCheckBox{ + flex-direction: column; + } + .setCheckBox div{ + padding-left: 25px; + } + .newRmContent{ + max-width: calc(100vw - 25px); + margin: 25px; + } + +} + +@media screen and (min-width: 320px) { + .sol_card_top_3 { + position: relative; + top: 0; + } + + .our_solution_category { + width: 100%; + margin: 0 auto; + } + + .our_solution_category .solution_cards_box { + flex: auto; + } +} + +@media only screen and (min-width: 768px) { + .our_solution_category .solution_cards_box { + flex: 1; + } +} + +@media only screen and (min-width: 1024px) { + .sol_card_top_3 { + position: relative; + top: 3rem; + } + + .our_solution_category { + width: 50%; + margin: 0 auto; + } +} \ No newline at end of file diff --git a/PHP Projects/Remainder-Web-App/style/style.css b/PHP Projects/Remainder-Web-App/style/style.css new file mode 100644 index 0000000000..dd57148946 --- /dev/null +++ b/PHP Projects/Remainder-Web-App/style/style.css @@ -0,0 +1,729 @@ +* { + margin: 0; + padding: 0; + box-sizing: border-box; +} + +:root { + --blue: rgb(74, 74, 239); + --white: #ffffff; + --primary-color: #645bff; + --secondary-color: #fff; + --hover-color: #111; +} + + +/* Login CSS */ + +.divider:after, +.divider:before { + content: ""; + flex: 1; + height: 1px; + background: #eee; +} + +.h-custom { + height: calc(100vh - 5vh); + display: flex; + flex-direction: column; + justify-content: space-between; +} + +.loginContainer { + height: 100%; + max-height: 70vh; +} + +#loginHeader h2 { + margin: 0; + font-size: 4rem; + text-align: center; + font-family: sans-serif; + height: 100%; + min-height: 5vh; +} + +.loginContent { + display: flex; + align-items: center; + justify-content: space-between; +} + +.imgContainer { + width: 100%; + max-width: 50vw; +} + +.formContainer { + width: 100%; + max-width: 30vw; +} + +.imgContainer img { + max-width: -webkit-fill-available; +} + +.inputContainer { + height: 100%; + min-height: 5vh; + font-size: 1.7rem; + margin-bottom: 3vh; +} + +.loginBtnContainer { + display: flex; + align-items: center; + justify-content: space-evenly; +} + +.cancelBtn, +.loginBtn { + width: 150px; + height: 50px; + cursor: pointer; + display: flex; + align-items: center; + border: none; + border-radius: 5px; + box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.15); +} + +.cancelBtn { + background: red; +} + +.loginBtn { + background: var(--blue); +} + +.cancelBtn, +.cancelBtn span, +.loginBtn, +.loginBtn span { + transition: 200ms; +} + +.cancelBtn .text, +.loginBtn .text { + transform: translateX(35px); + color: white; + font-weight: bold; +} + +.cancelBtn .icon, +.loginBtn .icon { + position: absolute; + border-left: 1px solid #c41b1b; + transform: translateX(110px); + height: 40px; + width: 40px; + display: flex; + align-items: center; + justify-content: center; +} + +.loginBtn .icon { + border-left: 1px solid #003461; +} + +.cancelBtn:hover { + background: #ff3636; +} + +.loginBtn:hover { + background: var(--blue); +} + +.cancelBtn:hover .text, +.loginBtn:hover .text { + color: transparent; +} + +.cancelBtn:hover .icon, +.loginBtn:hover .icon { + width: 150px; + border-left: none; + transform: translateX(0); +} + +.cancelBtn:focus, +.loginBtn:focus { + outline: none; +} + +.cancelBtn:active .icon svg, +.loginBtn:active .icon svg { + transform: scale(0.8); +} + +.loginBtnIcon { + font-size: 2rem; + color: white; +} + +input::-webkit-outer-spin-button, +input::-webkit-inner-spin-button { + -webkit-appearance: none; + margin: 0; +} + +.loginSignUp { + color: var(--blue); + text-decoration: none; + cursor: pointer; + text-decoration: underline; +} + +.alertContainer { + background: rgb(0 0 0 / 40%); + position: absolute; + height: 100%; + width: 100%; + top: 0; + display: none; + align-items: center; + justify-content: center; +} + +.crossIconContainer { + display: flex; + justify-content: flex-end; + font-size: 2rem; + cursor: pointer; +} + +.alert { + background-color: white; + height: 100%; + width: 100%; + max-width: 45vw; + max-height: 38vh; + display: flex; + flex-direction: column; + justify-content: space-between; +} + +.alertSymbol { + width: -webkit-fill-available; + display: flex; + align-items: center; + justify-content: center; + height: 100%; + max-height: 10vh; +} + +.alertSymbol img { + width: 100%; + max-width: 5vw; +} + +.loginInfo { + font-size: 2rem; + text-align: center; + font-weight: 600; +} + +.alertTextBtn { + height: 100%; + width: 100%; + min-height: 5vh; + max-width: 30%; +} + +.alertBtnContainer { + display: flex; + justify-content: end; +} + +.alertBtnContainer a{ + text-decoration: none; +} + +.alertTextBtn { + outline: 0; + border: 0; + display: flex; + flex-direction: column; + width: 100%; + max-width: 140px; + height: 50px; + border-radius: 0.5em; + box-shadow: 0 0.625em 1em 0 rgba(30, 143, 255, 0.35); + overflow: hidden; +} + +.alertTextBtn div { + transform: translateY(0px); + width: 100%; +} + +.alertTextBtn p { + margin: 0; +} + +.alertTextBtn, +.alertTextBtn div { + transition: 0.6s cubic-bezier(.16, 1, .3, 1); +} + +.alertTextBtn div span { + display: flex; + align-items: center; + justify-content: center; + height: 50px; + padding: 0.75em 1.125em; +} + +.alertTextBtn div:nth-child(1) { + background-color: #1e90ff; +} + +.alertTextBtn div:nth-child(2) { + background-color: #21dc62; +} + +.alertTextBtn:hover { + box-shadow: 0 0.625em 1em 0 rgba(33, 220, 98, 0.35); +} + +.alertTextBtn:hover div { + transform: translateY(-50px); +} + +.alertTextBtn p { + font-size: 17px; + font-weight: bold; + color: #ffffff; +} + +.alertTextBtn:active { + transform: scale(0.95); +} + +footer { + height: 5vh; + display: flex; + align-items: center; + justify-content: center; + background-color: var(--blue); +} + +footer p { + margin: 0; + font-size: 1.8rem; + color: var(--white); +} + +/* Home Page */ +#homeHeader { + min-height: 10vh; + display: flex; + align-items: center; + justify-content: center; +} + +#homeHeader h2 { + /* margin: 0; */ + font-size: 4rem; + text-align: center; + font-family: sans-serif; + height: 100%; + min-height: 5vh; + /* margin: 3vh 0; */ +} + +#dayDesc { + font-size: 3rem; + text-align: center; + height: 100%; + min-height: 10vh; + display: flex; + justify-content: center; + align-items: center; +} + +#homeMain { + min-height: 85vh; +} + +.section_our_solution .row { + align-items: center; +} + +.our_solution_category { + display: flex; + flex-direction: row; + flex-wrap: wrap; + min-width: 80vw; +} + +.our_solution_category .solution_cards_box { + display: flex; + flex-direction: column; + justify-content: center; +} + +.solution_cards_box .solution_card { + flex: 0 50%; + background: #fff; + box-shadow: 0 2px 4px 0 rgba(136, 144, 195, 0.2), + 0 5px 15px 0 rgba(37, 44, 97, 0.15); + border-radius: 15px; + margin: 25px; + padding: 10px 15px; + position: relative; + z-index: 1; + overflow: hidden; + min-height: 225px; + transition: 0.7s; +} + +.solution_cards_box .solution_card:hover { + background: #309df0; + color: #fff; + transform: scale(1.1); + z-index: 9; +} + +.solution_cards_box .solution_card:hover::before { + background: rgb(85 108 214 / 10%); +} + +.solution_cards_box .solution_card:hover .solu_title h3, +.solution_cards_box .solution_card:hover .solu_description p { + color: #fff; +} + +.solution_cards_box .solution_card:before { + content: ""; + position: absolute; + background: rgb(85 108 214 / 5%); + width: 170px; + height: 400px; + z-index: -1; + transform: rotate(42deg); + right: -56px; + top: -23px; + border-radius: 35px; +} + +.solution_cards_box .solution_card:hover .solu_description button { + background: #fff !important; + color: #309df0; +} + +.solution_card .solu_title h3 { + color: #212121; + font-size: 1.7rem; + font-weight: 600; + margin-top: 13px; + margin-bottom: 13px; +} + +.solution_card .solu_description p { + font-size: 15px; + margin-bottom: 15px; +} + +.solution_card .solu_description button { + border: 0; + border-radius: 15px; + background: linear-gradient(140deg, + #42c3ca 0%, + #42c3ca 50%, + #42c3cac7 75%) !important; + color: #fff; + font-weight: 500; + font-size: 1.8rem; + padding: 5px 16px; + height: 100%; + min-height: 4vh; +} + +.our_solution_content h1 { + text-transform: capitalize; + margin-bottom: 1rem; + font-size: 2.5rem; +} + +.hover_color_bubble { + position: absolute; + background: rgb(54 81 207 / 15%); + width: 100rem; + height: 100rem; + left: 0; + right: 0; + z-index: -1; + top: 16rem; + border-radius: 50%; + transform: rotate(-36deg); + left: -18rem; + transition: 0.7s; +} + +.solution_cards_box .solution_card:hover .hover_color_bubble { + top: 0rem; +} + +.solution_cards_box .solution_card .so_top_icon { + width: 60px; + height: 60px; + border-radius: 50%; + background: #fff; + overflow: hidden; + display: flex; + align-items: center; + justify-content: center; +} + +.solution_cards_box .solution_card .so_top_icon img { + width: 40px; + height: 50px; + object-fit: contain; +} + +.sol_card_top_3 { + margin: 0 2vw; +} + +.row { + width: 100%; + margin: 0; +} + +.navHome { + height: 100%; + min-height: 10vh; + background: var(--blue); + display: flex; + align-items: center; + justify-content: space-between; + padding: 0 2vw; +} + +.navLogo { + font-size: 2.5rem; + font-weight: 600; + font-family: sans-serif; + color: white; +} + +.navLoginSignUp { + height: 100%; + width: 100%; + max-width: 250px; + display: flex; + justify-content: space-between; +} + +.navLoginSignUp button { + box-sizing: border-box; + border: 0; + border-radius: 20px; + color: var(--secondary-color); + padding: 1em 1.8em; + background: var(--primary-color); + display: flex; + transition: 0.2s background; + align-items: center; + gap: 0.6em; + font-weight: bold; +} + +.navLoginSignUp button .arrow-wrapper { + display: flex; + justify-content: center; + align-items: center; +} + +.navLoginSignUp button .arrow { + margin-top: 1px; + width: 10px; + background: var(--primary-color); + height: 2px; + position: relative; + transition: 0.2s; +} + +.navLoginSignUp button .arrow::before { + content: ""; + box-sizing: border-box; + position: absolute; + border: solid var(--secondary-color); + border-width: 0 2px 2px 0; + display: inline-block; + top: -3px; + right: 3px; + transition: 0.2s; + padding: 3px; + transform: rotate(-45deg); +} + +.navLoginSignUp button:hover { + background-color: var(--hover-color); +} + +.navLoginSignUp button:hover .arrow { + background: var(--secondary-color); +} + +.navLoginSignUp button:hover .arrow:before { + right: 0; +} + +.cardsContainer { + margin-bottom: 5vh; +} + +.dropDownIcon { + display: none; + color: var(--white); +} + +.dropDownIcon:hover { + color: (var(--hover-color)); +} + +/* new remainder */ +.newRmMain { + height: 100%; + min-height: 85vh; + display: flex; + align-items: center; + justify-content: center; +} + +.newRmContent { + height: 100%; + width: 100%; + min-height: 65vh; + max-width: 65%; + background-color: #cad3ff; + display: flex; +} + +.newRmformContainer { + width: 100%; +} + +.newRmimgContainer { + display: flex; + justify-content: center; + align-items: center; +} + +.newRmimgContainer img { + max-height: 65vh; +} +.newRmTextContainer { + display: flex; + align-items: center; + justify-content: center; + height: 100%; + max-height: 5vh; + margin-bottom: 5vh; +} + +.newRmText { + width: 100%; + max-width: fit-content; + height: 100%; + border: 2px double rgb(0, 166, 255); + display: flex; + align-items: center; + justify-content: center; + padding: 0 5px; + +} + +.newRmformContainer { + padding: 15px; +} + +.setCheckBox { + display: flex; + justify-content: space-between; +} + +.newRmformContainer form div { + margin-bottom: 15px; +} + +/* View remainder */ +.viewHeading{ + min-height: 10vh; +} +.viewHeading span{ + height: 100%; + width: 100%; + min-height: 5vh; + min-width: 12vw; + font-size: 2rem; + padding: 5px; +} +.viewDate{ + display: flex; + align-items: center; + margin-bottom: 2vh; + margin-left: 10px; +} +.viewDate div:nth-child(2){ + margin-left: 15vw; +} +.viewTable{ + margin-top: 10px; +} +.viewSubject{ + margin-left: 10px; +} +.viewRmMain{ + height: 100%; + width: 100%; + min-height: 85vh; + display: flex; + flex-direction: column; + justify-content: space-evenly; +} +.viewBody{ + min-inline-size: fit-content; +} + +/* +input:required { + border: 1px solid rgb(255, 137, 137); +} +input:required:invalid { + +} + +input:required:valid { + border: 1px solid black; + color: black; +} */ +/* +input:invalid:focus:not(:placeholder-shown) { + animation: none; +} + +input:focus:not(:invalid):not(:placeholder-shown) { + animation: shake 0.5s; +} + +@keyframes shake { + 10%, 90% { + transform: translateX(-5px); + } + + 20%, 80% { + transform: translateX(5px); + } + + 30%, 50%, 70% { + transform: translateX(-3px); + } + + 40%, 60% { + transform: translateX(3px); + } +} */