Stars
Issues
Open PRs
Closed PRs
Featured In
Project Overview
Tech Stack
Discussing the current state of the code
Submitting a fix
Proposing new features
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+
-
@@ -295,7 +406,7 @@ SERVICES
-
+
Nearest Labs
Test labs and clinics near you.
@@ -329,59 +440,55 @@ Services
Our services are for your good health. We are with you at every digital step.
-
-
+
Clinics/Labs
- Locate the best healthcare facilities around you hassle-free.
+ Locate the best healthcare facilities around you hassle-free.From routine check-ups to specialized treatments, find the right clinic or lab that meets your needs. Our database is updated regularly to ensure you have the most accurate information.
-
+
Pharmacy
- Get your prescribed medicines delivered at your doorstep.
+ Get your prescribed medicines delivered at your doorstep.Our pharmacy service ensures you never miss a dose with timely reminders and easy refill options. Enjoy the convenience of home delivery and exclusive discounts on a wide range of medicines.
-
+
Daily Feed
- Access to heath benefits like bootcamps, vaccination drives and much more
- .
+ Access to heath benefits like bootcamps, vaccination drives and much more.Stay informed about the latest health trends, wellness tips, and upcoming events in your area. Participate in community health initiatives and boost your wellbeing.
+
-
+
Blood Bank
- Know the blood banks and blood groups available around you. No one should suffer ỉn emergencies.
+ Know the blood banks and blood groups available around you. No one should suffer ỉn emergencies.Find the nearest blood donation centers, check blood availability, and get information on how to donate or request blood in urgent situations.
-
+
Disabled Person
- Convenient medical care is here. Wheelchair accessible hospitals and clinics, find all in one go.
+ Convenient medical care is here. Wheelchair accessible hospitals and clinics, find all in one go.Access resources and support tailored to the needs of individuals with disabilities, ensuring a seamless healthcare experience for everyone.
-
+
Health Post
- Weekly, monthly, yearly or each day, however you like it!
+ Weekly, monthly, yearly or each day, however you like it! Subscribe to our health post for expert articles, tips, and insights to help you make informed health decisions.
-
-
-
@@ -800,7 +907,7 @@ Quick Links
@@ -941,7 +1048,7 @@ RAPIDOC Newsletter
-
+
+
diff --git a/js/login.js b/js/login.js
new file mode 100644
index 00000000..270bd7f6
--- /dev/null
+++ b/js/login.js
@@ -0,0 +1,113 @@
+const signUpButton = document.getElementById("signUp");
+const signInButton = document.getElementById("signIn");
+const container = document.getElementById("container");
+let uppass = [];
+let inpass = [];
+let userImgPassInput = [];
+signUpButton.addEventListener("click", () => {
+ container.classList.add("right-panel-active");
+ inpass = [];
+ uppass = [];
+});
+
+signInButton.addEventListener("click", () => {
+ container.classList.remove("right-panel-active");
+ inpass = [];
+ uppass = [];
+});
+// adding and removing border
+function upimg(element) {
+ var Image = element.querySelector("img");
+ if (Image) {
+ if (Image.classList.contains("clicked")) {
+ Image.classList.remove("clicked");
+ uppass.splice(uppass.indexOf(element.id), 1);
+ } else {
+ Image.classList.add("clicked");
+ uppass.push(element.id);
+ }
+ }
+}
+
+function inimg(element) {
+ var Image = element.querySelector("img");
+ if (Image) {
+ if (Image.classList.contains("clicked")) {
+ Image.classList.remove("clicked");
+ } else {
+ Image.classList.add("clicked");
+ }
+ }
+}
+// element image recognition
+function signup() {
+ sessionStorage.setItem("upname", document.getElementById("upmail").value);
+ sessionStorage.setItem("uppass", uppass);
+ sessionStorage.setItem("userpass", document.getElementById("s-pass").value);
+ var myText = "Account Created Succesfully";
+ alert(myText);
+}
+// image pattern authentication
+var v2 = new Boolean(false);
+function signin() {
+ userImgPassInput = [];
+ const userEmailInput = document.getElementById("inmail").value;
+ const userPassInput = document.getElementById("l-pass").value;
+ const userImgPass = sessionStorage.getItem("uppass");
+ const userEmail = sessionStorage.getItem("upname");
+ const userPass = sessionStorage.getItem("userpass");
+ const clickedImage = document.getElementsByClassName("clicked");
+ for (let index = 0; index < clickedImage.length; index++) {
+ userImgPassInput.push(clickedImage[index].parentElement.id);
+ }
+ console.log(userPass, userPassInput);
+ if (!graphicMode) {
+ if (
+ userImgPass === userImgPassInput.toString() &&
+ userEmailInput === userEmail
+ ) {
+ var myText = "Login is successful";
+ alert(myText);
+ NewTab();
+ } else {
+ var myText = "Login Failed";
+ alert(myText);
+ }
+ } else {
+ if (
+ userImgPass === userImgPassInput.toString() &&
+ userEmailInput === userEmail &&
+ userPassInput.toString() == userPass.toString()
+ ) {
+ var myText = "Login is successful";
+ alert(myText);
+ NewTab();
+ } else {
+ var myText = "Login Failed";
+ alert(myText);
+ }
+ }
+}
+
+function NewTab() {
+ window.open("index.html", "_blank");
+}
+
+// TIMEPASS KA CODE //
+// const inpassBtn = document.getElementsByClassName("inpass");
+// const timepassBtn = document.getElementsByClassName("timepass");
+// graphicMode = true;
+// for (let index = 0; index < timepassBtn.length; index++) {
+// timepassBtn[index].addEventListener("click", function (event) {
+// console.log(event.target);
+// if (graphicMode) {
+// graphicMode = false;
+// inpassBtn[0].style.display = "none";
+// inpassBtn[1].style.display = "none";
+// } else {
+// graphicMode = true;
+// inpassBtn[0].style.display = "block";
+// inpassBtn[1].style.display = "block";
+// }
+// });
+// }
\ No newline at end of file
diff --git a/log/favicon.ico b/log/favicon.ico
new file mode 100644
index 00000000..09cbadfe
Binary files /dev/null and b/log/favicon.ico differ
diff --git a/log/image.gif b/log/image.gif
new file mode 100644
index 00000000..1eb81938
Binary files /dev/null and b/log/image.gif differ
diff --git a/log/login.css b/log/login.css
new file mode 100644
index 00000000..d933b3ba
--- /dev/null
+++ b/log/login.css
@@ -0,0 +1,314 @@
+@import url("https://fonts.googleapis.com/css2?family=Poppins");
+
+* {
+ box-sizing: border-box;
+}
+
+body {
+ display: flex;
+ background-color: #f6f5f7;
+ justify-content: center;
+ align-items: center;
+ flex-direction: column;
+ font-family: "Poppins", sans-serif;
+ overflow: hidden;
+ height: 100vh;
+}
+
+h1 {
+ font-weight: 700;
+ letter-spacing: -1.5px;
+ margin: 0;
+ margin-bottom: 15px;
+}
+
+h1.title {
+ font-size: 45px;
+ line-height: 45px;
+ margin: 0;
+ text-shadow: 0 0 10px rgba(16, 64, 74, 0.5);
+}
+
+p {
+ font-size: 14px;
+ font-weight: 100;
+ line-height: 20px;
+ letter-spacing: 0.5px;
+ margin: 20px 0 30px;
+ text-shadow: 0 0 10px rgba(16, 64, 74, 0.5);
+}
+
+span {
+ font-size: 14px;
+ margin-top: 25px;
+}
+
+a {
+ color: #333;
+ font-size: 14px;
+ text-decoration: none;
+ margin: 15px 0;
+ transition: 0.3s ease-in-out;
+}
+
+a:hover {
+ color: #4bb6b7;
+}
+
+.content {
+ display: flex;
+ width: 100%;
+ height: 50px;
+ align-items: center;
+ justify-content: space-around;
+}
+
+.content .checkbox {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+}
+
+.content input {
+ accent-color: #333;
+ width: 12px;
+ height: 12px;
+}
+
+.content label {
+ font-size: 14px;
+ user-select: none;
+ padding-left: 5px;
+}
+
+button {
+ position: relative;
+ border-radius: 20px;
+ border: 1px solid #4bb6b7;
+ background-color: #4bb6b7;
+ color: #fff;
+ font-size: 15px;
+ font-weight: 700;
+ margin: 10px;
+ padding: 12px 80px;
+ letter-spacing: 1px;
+ text-transform: capitalize;
+ transition: 0.3s ease-in-out;
+}
+
+button:hover {
+ letter-spacing: 3px;
+}
+
+button:active {
+ transform: scale(0.95);
+}
+
+button:focus {
+ outline: none;
+}
+
+button.ghost {
+ background-color: rgba(225, 225, 225, 0.2);
+ border: 2px solid #fff;
+ color: #fff;
+}
+
+button.ghost i{
+ position: absolute;
+ opacity: 0;
+ transition: 0.3s ease-in-out;
+}
+
+button.ghost i.register{
+ right: 70px;
+}
+
+button.ghost i.login{
+ left: 70px;
+}
+
+button.ghost:hover i.register{
+ right: 40px;
+ opacity: 1;
+}
+
+button.ghost:hover i.login{
+ left: 40px;
+ opacity: 1;
+}
+
+form {
+ background-color: #fff;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ flex-direction: column;
+ padding: 0 50px;
+ height: 100%;
+ text-align: center;
+}
+
+input {
+ background-color: #eee;
+ border-radius: 10px;
+ border: none;
+ padding: 12px 15px;
+ margin: 8px 0;
+ width: 100%;
+}
+
+.container {
+ background-color: #fff;
+ border-radius: 25px;
+ box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22);
+ position: relative;
+ overflow: hidden;
+ width: 768px;
+ max-width: 100%;
+ min-height: 500px;
+}
+
+.form-container {
+ position: absolute;
+ top: 0;
+ height: 100%;
+ transition: all 0.6s ease-in-out;
+}
+
+.login-container {
+ left: 0;
+ width: 50%;
+ z-index: 2;
+}
+
+.container.right-panel-active .login-container {
+ transform: translateX(100%);
+}
+
+.register-container {
+ left: 0;
+ width: 50%;
+ opacity: 0;
+ z-index: 1;
+}
+
+.container.right-panel-active .register-container {
+ transform: translateX(100%);
+ opacity: 1;
+ z-index: 5;
+ animation: show 0.6s;
+}
+
+@keyframes show {
+ 0%,
+ 49.99% {
+ opacity: 0;
+ z-index: 1;
+ }
+
+ 50%,
+ 100% {
+ opacity: 1;
+ z-index: 5;
+ }
+}
+
+.overlay-container {
+ position: absolute;
+ top: 0;
+ left: 50%;
+ width: 50%;
+ height: 100%;
+ overflow: hidden;
+ transition: transform 0.6s ease-in-out;
+ z-index: 100;
+}
+
+.container.right-panel-active .overlay-container {
+ transform: translate(-100%);
+}
+
+.overlay {
+ background-image: url('image.gif');
+ background-repeat: no-repeat;
+ background-size: cover;
+ background-position: 0 0;
+ color: #fff;
+ position: relative;
+ left: -100%;
+ height: 100%;
+ width: 200%;
+ transform: translateX(0);
+ transition: transform 0.6s ease-in-out;
+}
+
+.overlay::before {
+ content: "";
+ position: absolute;
+ left: 0;
+ right: 0;
+ top: 0;
+ bottom: 0;
+ background: linear-gradient(
+ to top,
+ rgba(46, 94, 109, 0.4) 40%,
+ rgba(46, 94, 109, 0)
+ );
+}
+
+.container.right-panel-active .overlay {
+ transform: translateX(50%);
+}
+
+.overlay-panel {
+ position: absolute;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ flex-direction: column;
+ padding: 0 40px;
+ text-align: center;
+ top: 0;
+ height: 100%;
+ width: 50%;
+ transform: translateX(0);
+ transition: transform 0.6s ease-in-out;
+}
+
+.overlay-left {
+ transform: translateX(-20%);
+}
+
+.container.right-panel-active .overlay-left {
+ transform: translateX(0);
+}
+
+.overlay-right {
+ right: 0;
+ transform: translateX(0);
+}
+
+.container.right-panel-active .overlay-right {
+ transform: translateX(20%);
+}
+
+.social-container {
+ margin: 20px 0;
+}
+
+.social-container a {
+ border: 1px solid #dddddd;
+ border-radius: 50%;
+ display: inline-flex;
+ justify-content: center;
+ align-items: center;
+ margin: 0 5px;
+ height: 40px;
+ width: 40px;
+ transition: 0.3s ease-in-out;
+}
+
+.social-container a:hover {
+ border: 1px solid #4bb6b7;
+}
\ No newline at end of file
diff --git a/log/script.js b/log/script.js
new file mode 100644
index 00000000..cdde04e0
--- /dev/null
+++ b/log/script.js
@@ -0,0 +1,43 @@
+document.addEventListener("DOMContentLoaded", function() {
+ const registerButton = document.getElementById("register");
+ const loginButton = document.getElementById("login");
+ const container = document.getElementById("container");
+ const registerForm = document.getElementById("registerForm");
+ const loginForm = document.getElementById("loginForm");
+
+ registerButton.addEventListener("click", (event) => {
+ event.preventDefault();
+ container.classList.add("right-panel-active");
+ registerForm.scrollIntoView({ behavior: "smooth" });
+ });
+
+ loginButton.addEventListener("click", (event) => {
+ event.preventDefault();
+ container.classList.remove("right-panel-active");
+ loginForm.scrollIntoView({ behavior: "smooth" });
+ });
+
+ registerForm.addEventListener("submit", (event) => {
+ event.preventDefault();
+ // Your registration logic goes here
+
+ // Simulate registration success
+ document.getElementById("registerMessage").style.display = "block";
+ setTimeout(() => {
+ container.classList.remove("right-panel-active");
+ loginForm.scrollIntoView({ behavior: "smooth" });
+ }, 2000);
+ });
+
+ loginForm.addEventListener("submit", (event) => {
+ event.preventDefault();
+ // Your login logic goes here
+
+ // Simulate login success
+ alert("Login successful!");
+ // Redirect to the homepage after login
+ setTimeout(() => {
+ window.location.href = "index.html"; // Change "index.html" to your desired URL
+ }, 1000); // Redirect after 1 second (1000 milliseconds)
+ });
+});
diff --git a/login.html b/login.html
new file mode 100644
index 00000000..d02fe988
--- /dev/null
+++ b/login.html
@@ -0,0 +1,93 @@
+
+
+
+
+
+
+ RAPIDOC
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/style.css b/style.css
index 9e74ab59..cc67eecf 100644
--- a/style.css
+++ b/style.css
@@ -34,6 +34,20 @@ h6 {
transition: all 0.3s ease 0s;
color: white;
}
+button {
+ position: relative;
+ border-radius: 10px;
+ border: 1px solid #4bb6b7;
+ background-color: #4bb6b7;
+ color: #fff;
+ font-size: 15px;
+ font-weight: 700;
+ margin: 8px;
+ padding: 8px 50px;
+ letter-spacing: 1px;
+ text-transform: capitalize;
+ transition: 0.3s ease-in-out;
+}
.nav_link li a:hover {
color: #55a5ea;
@@ -124,6 +138,7 @@ h6 {
padding: 20px;
margin-bottom: 20px;
border-radius: 10px;
+ z-index: -1;
}
@@ -141,11 +156,13 @@ h6 {
transition: 0.3s;
font-size: 16px;
font-weight: 600;
+ z-index: -1;
display: inline-block;
}
.appointment-btn:hover {
background: #55a5ea;
+ z-index: -1;
color: #fff;
}
@@ -459,6 +476,7 @@ section {
}
.featured-services .icon-box {
+ z-index: -1;
width: 230px;
height: 270px;
margin-left: 15px;
@@ -476,6 +494,7 @@ section {
}
.featured-services .icon-box::before {
+ z-index: -1;
content: '';
position: absolute;
background: #000;
@@ -488,16 +507,19 @@ section {
}
.featured-services .icon-box:hover::before {
+ z-index: -1;
background: #3fbcc051;
top: 0px;
border-radius: 50px;
}
.featured-services .icon1 {
+ z-index: -1;
margin-bottom: 15px;
}
.featured-services .icon1 i {
+ z-index: -1;
font-size: 48px;
line-height: 1;
color: #3fbcc0a4;
@@ -505,10 +527,12 @@ section {
}
.featured-services .icon2 {
+ z-index: -1;
margin-bottom: 15px;
}
.featured-services .icon2 i {
+ z-index: -1;
font-size: 48px;
line-height: 1;
color: #55a5ea;
@@ -516,10 +540,12 @@ section {
}
.featured-services .icon3 {
+ z-index: -1;
margin-bottom: 15px;
}
.featured-services .icon3 i {
+ z-index: -1;
font-size: 48px;
line-height: 1;
color: #55a5ea;
@@ -527,10 +553,12 @@ section {
}
.featured-services .icon4 {
+ z-index: -1;
margin-bottom: 15px;
}
.featured-services .icon4 i {
+ z-index: -1;
font-size: 48px;
line-height: 1;
color: #55a5ea;
@@ -578,12 +606,14 @@ section {
/*################----About----################*/
.about .icon-boxes h4 {
+ z-index: -1;
font-size: 18px;
color: #55a5ea;
margin-bottom: 15px;
}
.about .icon-boxes h3 {
+ z-index: -1;
font-size: 28px;
font-weight: 700;
color: #55a5ea;
@@ -591,6 +621,7 @@ section {
}
.about .icon-box {
+ z-index: -1;
background: #111111;
border-radius: 10px;
margin-top: 35px;
@@ -599,6 +630,7 @@ section {
}
.about .icon-box .icon {
+ z-index: -1;
float: left;
display: flex;
align-items: center;
@@ -611,20 +643,24 @@ section {
}
.about .icon-box .icon i {
+ z-index: -1;
color: #3fbcc0a4;
font-size: 32px;
}
.about .icon-box:hover .icon {
+ z-index: -1;
background: #55a5ea;
border-color: #55a5ea;
}
.about .icon-box:hover .icon i {
+ z-index: -1;
color: #fff;
}
.about .icon-box .title {
+ z-index: -1;
margin-left: 85px;
font-weight: 700;
@@ -633,6 +669,7 @@ section {
}
.about .icon-box .title a {
+ z-index: -1;
color: #fff;
transition: 0.3s;
font-size: 18px;
@@ -640,16 +677,19 @@ section {
}
.about .icon-box .title a:hover {
+ z-index: -1;
color: #55a5ea;
}
.about .icon-box .description {
+ z-index: -1;
margin-left: 85px;
line-height: 24px;
font-size: 14px;
}
.about .video-box {
+ z-index: -1;
background: url("../img/about.png") center center no-repeat;
background-size: cover;
height: 300px;
@@ -658,6 +698,7 @@ section {
.about .play-btn {
width: 94px;
+ z-index: -1;
height: 94px;
background: radial-gradient(#55a5ea 50%, rgba(4, 196, 234, 0.4) 52%);
border-radius: 50%;
@@ -669,6 +710,7 @@ section {
}
.about .play-btn::after {
+ z-index: -1;
content: '';
position: absolute;
left: 50%;
@@ -684,6 +726,7 @@ section {
}
.about .play-btn::before {
+ z-index: -1;
content: '';
position: absolute;
width: 120px;
@@ -697,12 +740,14 @@ section {
}
.about .play-btn:hover::after {
+ z-index: -1;
border-left: 15px solid #55a5ea;
transform: scale(20);
}
.about .play-btn:hover::before {
content: '';
+ z-index: -1;
position: absolute;
left: 50%;
top: 50%;
@@ -748,10 +793,13 @@ section {
/*################----Counts----################*/
.counts {
/* padding-top: 30px; */
+
justify-content: center;
}
+
.counts .count-box {
+ z-index: -1;
box-shadow: -10px -5px 40px 0 rgba(0, 0, 0, 0.1);
padding: 50px 80px;
margin: 5%;
@@ -811,6 +859,7 @@ section {
}
.counts .count-box p {
+ z-index: -1;
padding: 30px 0 0 0;
/* margin: 0; */
font-family: "Roboto", sans-serif;
@@ -819,6 +868,7 @@ section {
}
.counts .count-box a {
+ z-index: -1;
font-weight: 600;
display: block;
/* margin-top: 10px; */
@@ -895,8 +945,13 @@ section {
line-height: 24px;
font-size: 14px;
margin-bottom: 0;
+}
-
+.services .container {
+ display: grid;
+ grid-template-columns: repeat(3, 1fr);
+ /* gap: 20px; */
+ margin-top: 8px;
}
.services .icon-box:hover {
@@ -921,6 +976,31 @@ section {
color: #111111;
}
+/* Styles for medium screens */
+@media (max-width: 991px) {
+ .services .container {
+ grid-template-columns: repeat(2, 1fr);
+ }
+}
+
+/* Styles for smaller screens */
+@media (max-width: 767px) {
+ .services .container {
+ grid-template-columns: 1fr;
+ }
+}
+
+/* Additional smaller adjustments */
+@media (max-width: 575px) {
+ .services .icon-box {
+ padding: 20px;
+ }
+ .services .icon i {
+ font-size: 30px;
+ }
+}
+
+
/*################----Appointments----################*/
SERVICES
-
+
@@ -329,59 +440,55 @@
Nearest Labs
Test labs and clinics near you.
@@ -329,59 +440,55 @@
Services
Our services are for your good health. We are with you at every digital step.
-
-
+
-
Clinics/Labs
-Locate the best healthcare facilities around you hassle-free.
+Locate the best healthcare facilities around you hassle-free.From routine check-ups to specialized treatments, find the right clinic or lab that meets your needs. Our database is updated regularly to ensure you have the most accurate information.
+
-
Pharmacy
-Get your prescribed medicines delivered at your doorstep.
+Get your prescribed medicines delivered at your doorstep.Our pharmacy service ensures you never miss a dose with timely reminders and easy refill options. Enjoy the convenience of home delivery and exclusive discounts on a wide range of medicines.
+
-
Daily Feed
-Access to heath benefits like bootcamps, vaccination drives and much more - .
+Access to heath benefits like bootcamps, vaccination drives and much more.Stay informed about the latest health trends, wellness tips, and upcoming events in your area. Participate in community health initiatives and boost your wellbeing. +
+
- RAPIDOC
+
+
+
+
+
+
Blood Bank
-Know the blood banks and blood groups available around you. No one should suffer ỉn emergencies.
+Know the blood banks and blood groups available around you. No one should suffer ỉn emergencies.Find the nearest blood donation centers, check blood availability, and get information on how to donate or request blood in urgent situations.
+
-
@@ -800,7 +907,7 @@ Disabled Person
-Convenient medical care is here. Wheelchair accessible hospitals and clinics, find all in one go.
+Convenient medical care is here. Wheelchair accessible hospitals and clinics, find all in one go.Access resources and support tailored to the needs of individuals with disabilities, ensuring a seamless healthcare experience for everyone.
+
-
-
- Health Post
-Weekly, monthly, yearly or each day, however you like it!
+Weekly, monthly, yearly or each day, however you like it! Subscribe to our health post for expert articles, tips, and insights to help you make informed health decisions.
Quick Links
@@ -941,7 +1048,7 @@RAPIDOC Newsletter
- + + diff --git a/js/login.js b/js/login.js new file mode 100644 index 00000000..270bd7f6 --- /dev/null +++ b/js/login.js @@ -0,0 +1,113 @@ +const signUpButton = document.getElementById("signUp"); +const signInButton = document.getElementById("signIn"); +const container = document.getElementById("container"); +let uppass = []; +let inpass = []; +let userImgPassInput = []; +signUpButton.addEventListener("click", () => { + container.classList.add("right-panel-active"); + inpass = []; + uppass = []; +}); + +signInButton.addEventListener("click", () => { + container.classList.remove("right-panel-active"); + inpass = []; + uppass = []; +}); +// adding and removing border +function upimg(element) { + var Image = element.querySelector("img"); + if (Image) { + if (Image.classList.contains("clicked")) { + Image.classList.remove("clicked"); + uppass.splice(uppass.indexOf(element.id), 1); + } else { + Image.classList.add("clicked"); + uppass.push(element.id); + } + } +} + +function inimg(element) { + var Image = element.querySelector("img"); + if (Image) { + if (Image.classList.contains("clicked")) { + Image.classList.remove("clicked"); + } else { + Image.classList.add("clicked"); + } + } +} +// element image recognition +function signup() { + sessionStorage.setItem("upname", document.getElementById("upmail").value); + sessionStorage.setItem("uppass", uppass); + sessionStorage.setItem("userpass", document.getElementById("s-pass").value); + var myText = "Account Created Succesfully"; + alert(myText); +} +// image pattern authentication +var v2 = new Boolean(false); +function signin() { + userImgPassInput = []; + const userEmailInput = document.getElementById("inmail").value; + const userPassInput = document.getElementById("l-pass").value; + const userImgPass = sessionStorage.getItem("uppass"); + const userEmail = sessionStorage.getItem("upname"); + const userPass = sessionStorage.getItem("userpass"); + const clickedImage = document.getElementsByClassName("clicked"); + for (let index = 0; index < clickedImage.length; index++) { + userImgPassInput.push(clickedImage[index].parentElement.id); + } + console.log(userPass, userPassInput); + if (!graphicMode) { + if ( + userImgPass === userImgPassInput.toString() && + userEmailInput === userEmail + ) { + var myText = "Login is successful"; + alert(myText); + NewTab(); + } else { + var myText = "Login Failed"; + alert(myText); + } + } else { + if ( + userImgPass === userImgPassInput.toString() && + userEmailInput === userEmail && + userPassInput.toString() == userPass.toString() + ) { + var myText = "Login is successful"; + alert(myText); + NewTab(); + } else { + var myText = "Login Failed"; + alert(myText); + } + } +} + +function NewTab() { + window.open("index.html", "_blank"); +} + +// TIMEPASS KA CODE // +// const inpassBtn = document.getElementsByClassName("inpass"); +// const timepassBtn = document.getElementsByClassName("timepass"); +// graphicMode = true; +// for (let index = 0; index < timepassBtn.length; index++) { +// timepassBtn[index].addEventListener("click", function (event) { +// console.log(event.target); +// if (graphicMode) { +// graphicMode = false; +// inpassBtn[0].style.display = "none"; +// inpassBtn[1].style.display = "none"; +// } else { +// graphicMode = true; +// inpassBtn[0].style.display = "block"; +// inpassBtn[1].style.display = "block"; +// } +// }); +// } \ No newline at end of file diff --git a/log/favicon.ico b/log/favicon.ico new file mode 100644 index 00000000..09cbadfe Binary files /dev/null and b/log/favicon.ico differ diff --git a/log/image.gif b/log/image.gif new file mode 100644 index 00000000..1eb81938 Binary files /dev/null and b/log/image.gif differ diff --git a/log/login.css b/log/login.css new file mode 100644 index 00000000..d933b3ba --- /dev/null +++ b/log/login.css @@ -0,0 +1,314 @@ +@import url("https://fonts.googleapis.com/css2?family=Poppins"); + +* { + box-sizing: border-box; +} + +body { + display: flex; + background-color: #f6f5f7; + justify-content: center; + align-items: center; + flex-direction: column; + font-family: "Poppins", sans-serif; + overflow: hidden; + height: 100vh; +} + +h1 { + font-weight: 700; + letter-spacing: -1.5px; + margin: 0; + margin-bottom: 15px; +} + +h1.title { + font-size: 45px; + line-height: 45px; + margin: 0; + text-shadow: 0 0 10px rgba(16, 64, 74, 0.5); +} + +p { + font-size: 14px; + font-weight: 100; + line-height: 20px; + letter-spacing: 0.5px; + margin: 20px 0 30px; + text-shadow: 0 0 10px rgba(16, 64, 74, 0.5); +} + +span { + font-size: 14px; + margin-top: 25px; +} + +a { + color: #333; + font-size: 14px; + text-decoration: none; + margin: 15px 0; + transition: 0.3s ease-in-out; +} + +a:hover { + color: #4bb6b7; +} + +.content { + display: flex; + width: 100%; + height: 50px; + align-items: center; + justify-content: space-around; +} + +.content .checkbox { + display: flex; + align-items: center; + justify-content: center; +} + +.content input { + accent-color: #333; + width: 12px; + height: 12px; +} + +.content label { + font-size: 14px; + user-select: none; + padding-left: 5px; +} + +button { + position: relative; + border-radius: 20px; + border: 1px solid #4bb6b7; + background-color: #4bb6b7; + color: #fff; + font-size: 15px; + font-weight: 700; + margin: 10px; + padding: 12px 80px; + letter-spacing: 1px; + text-transform: capitalize; + transition: 0.3s ease-in-out; +} + +button:hover { + letter-spacing: 3px; +} + +button:active { + transform: scale(0.95); +} + +button:focus { + outline: none; +} + +button.ghost { + background-color: rgba(225, 225, 225, 0.2); + border: 2px solid #fff; + color: #fff; +} + +button.ghost i{ + position: absolute; + opacity: 0; + transition: 0.3s ease-in-out; +} + +button.ghost i.register{ + right: 70px; +} + +button.ghost i.login{ + left: 70px; +} + +button.ghost:hover i.register{ + right: 40px; + opacity: 1; +} + +button.ghost:hover i.login{ + left: 40px; + opacity: 1; +} + +form { + background-color: #fff; + display: flex; + align-items: center; + justify-content: center; + flex-direction: column; + padding: 0 50px; + height: 100%; + text-align: center; +} + +input { + background-color: #eee; + border-radius: 10px; + border: none; + padding: 12px 15px; + margin: 8px 0; + width: 100%; +} + +.container { + background-color: #fff; + border-radius: 25px; + box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22); + position: relative; + overflow: hidden; + width: 768px; + max-width: 100%; + min-height: 500px; +} + +.form-container { + position: absolute; + top: 0; + height: 100%; + transition: all 0.6s ease-in-out; +} + +.login-container { + left: 0; + width: 50%; + z-index: 2; +} + +.container.right-panel-active .login-container { + transform: translateX(100%); +} + +.register-container { + left: 0; + width: 50%; + opacity: 0; + z-index: 1; +} + +.container.right-panel-active .register-container { + transform: translateX(100%); + opacity: 1; + z-index: 5; + animation: show 0.6s; +} + +@keyframes show { + 0%, + 49.99% { + opacity: 0; + z-index: 1; + } + + 50%, + 100% { + opacity: 1; + z-index: 5; + } +} + +.overlay-container { + position: absolute; + top: 0; + left: 50%; + width: 50%; + height: 100%; + overflow: hidden; + transition: transform 0.6s ease-in-out; + z-index: 100; +} + +.container.right-panel-active .overlay-container { + transform: translate(-100%); +} + +.overlay { + background-image: url('image.gif'); + background-repeat: no-repeat; + background-size: cover; + background-position: 0 0; + color: #fff; + position: relative; + left: -100%; + height: 100%; + width: 200%; + transform: translateX(0); + transition: transform 0.6s ease-in-out; +} + +.overlay::before { + content: ""; + position: absolute; + left: 0; + right: 0; + top: 0; + bottom: 0; + background: linear-gradient( + to top, + rgba(46, 94, 109, 0.4) 40%, + rgba(46, 94, 109, 0) + ); +} + +.container.right-panel-active .overlay { + transform: translateX(50%); +} + +.overlay-panel { + position: absolute; + display: flex; + align-items: center; + justify-content: center; + flex-direction: column; + padding: 0 40px; + text-align: center; + top: 0; + height: 100%; + width: 50%; + transform: translateX(0); + transition: transform 0.6s ease-in-out; +} + +.overlay-left { + transform: translateX(-20%); +} + +.container.right-panel-active .overlay-left { + transform: translateX(0); +} + +.overlay-right { + right: 0; + transform: translateX(0); +} + +.container.right-panel-active .overlay-right { + transform: translateX(20%); +} + +.social-container { + margin: 20px 0; +} + +.social-container a { + border: 1px solid #dddddd; + border-radius: 50%; + display: inline-flex; + justify-content: center; + align-items: center; + margin: 0 5px; + height: 40px; + width: 40px; + transition: 0.3s ease-in-out; +} + +.social-container a:hover { + border: 1px solid #4bb6b7; +} \ No newline at end of file diff --git a/log/script.js b/log/script.js new file mode 100644 index 00000000..cdde04e0 --- /dev/null +++ b/log/script.js @@ -0,0 +1,43 @@ +document.addEventListener("DOMContentLoaded", function() { + const registerButton = document.getElementById("register"); + const loginButton = document.getElementById("login"); + const container = document.getElementById("container"); + const registerForm = document.getElementById("registerForm"); + const loginForm = document.getElementById("loginForm"); + + registerButton.addEventListener("click", (event) => { + event.preventDefault(); + container.classList.add("right-panel-active"); + registerForm.scrollIntoView({ behavior: "smooth" }); + }); + + loginButton.addEventListener("click", (event) => { + event.preventDefault(); + container.classList.remove("right-panel-active"); + loginForm.scrollIntoView({ behavior: "smooth" }); + }); + + registerForm.addEventListener("submit", (event) => { + event.preventDefault(); + // Your registration logic goes here + + // Simulate registration success + document.getElementById("registerMessage").style.display = "block"; + setTimeout(() => { + container.classList.remove("right-panel-active"); + loginForm.scrollIntoView({ behavior: "smooth" }); + }, 2000); + }); + + loginForm.addEventListener("submit", (event) => { + event.preventDefault(); + // Your login logic goes here + + // Simulate login success + alert("Login successful!"); + // Redirect to the homepage after login + setTimeout(() => { + window.location.href = "index.html"; // Change "index.html" to your desired URL + }, 1000); // Redirect after 1 second (1000 milliseconds) + }); +}); diff --git a/login.html b/login.html new file mode 100644 index 00000000..d02fe988 --- /dev/null +++ b/login.html @@ -0,0 +1,93 @@ + + + + + + +
+
+
+
+
+
+
+
diff --git a/style.css b/style.css
index 9e74ab59..cc67eecf 100644
--- a/style.css
+++ b/style.css
@@ -34,6 +34,20 @@ h6 {
transition: all 0.3s ease 0s;
color: white;
}
+button {
+ position: relative;
+ border-radius: 10px;
+ border: 1px solid #4bb6b7;
+ background-color: #4bb6b7;
+ color: #fff;
+ font-size: 15px;
+ font-weight: 700;
+ margin: 8px;
+ padding: 8px 50px;
+ letter-spacing: 1px;
+ text-transform: capitalize;
+ transition: 0.3s ease-in-out;
+}
.nav_link li a:hover {
color: #55a5ea;
@@ -124,6 +138,7 @@ h6 {
padding: 20px;
margin-bottom: 20px;
border-radius: 10px;
+ z-index: -1;
}
@@ -141,11 +156,13 @@ h6 {
transition: 0.3s;
font-size: 16px;
font-weight: 600;
+ z-index: -1;
display: inline-block;
}
.appointment-btn:hover {
background: #55a5ea;
+ z-index: -1;
color: #fff;
}
@@ -459,6 +476,7 @@ section {
}
.featured-services .icon-box {
+ z-index: -1;
width: 230px;
height: 270px;
margin-left: 15px;
@@ -476,6 +494,7 @@ section {
}
.featured-services .icon-box::before {
+ z-index: -1;
content: '';
position: absolute;
background: #000;
@@ -488,16 +507,19 @@ section {
}
.featured-services .icon-box:hover::before {
+ z-index: -1;
background: #3fbcc051;
top: 0px;
border-radius: 50px;
}
.featured-services .icon1 {
+ z-index: -1;
margin-bottom: 15px;
}
.featured-services .icon1 i {
+ z-index: -1;
font-size: 48px;
line-height: 1;
color: #3fbcc0a4;
@@ -505,10 +527,12 @@ section {
}
.featured-services .icon2 {
+ z-index: -1;
margin-bottom: 15px;
}
.featured-services .icon2 i {
+ z-index: -1;
font-size: 48px;
line-height: 1;
color: #55a5ea;
@@ -516,10 +540,12 @@ section {
}
.featured-services .icon3 {
+ z-index: -1;
margin-bottom: 15px;
}
.featured-services .icon3 i {
+ z-index: -1;
font-size: 48px;
line-height: 1;
color: #55a5ea;
@@ -527,10 +553,12 @@ section {
}
.featured-services .icon4 {
+ z-index: -1;
margin-bottom: 15px;
}
.featured-services .icon4 i {
+ z-index: -1;
font-size: 48px;
line-height: 1;
color: #55a5ea;
@@ -578,12 +606,14 @@ section {
/*################----About----################*/
.about .icon-boxes h4 {
+ z-index: -1;
font-size: 18px;
color: #55a5ea;
margin-bottom: 15px;
}
.about .icon-boxes h3 {
+ z-index: -1;
font-size: 28px;
font-weight: 700;
color: #55a5ea;
@@ -591,6 +621,7 @@ section {
}
.about .icon-box {
+ z-index: -1;
background: #111111;
border-radius: 10px;
margin-top: 35px;
@@ -599,6 +630,7 @@ section {
}
.about .icon-box .icon {
+ z-index: -1;
float: left;
display: flex;
align-items: center;
@@ -611,20 +643,24 @@ section {
}
.about .icon-box .icon i {
+ z-index: -1;
color: #3fbcc0a4;
font-size: 32px;
}
.about .icon-box:hover .icon {
+ z-index: -1;
background: #55a5ea;
border-color: #55a5ea;
}
.about .icon-box:hover .icon i {
+ z-index: -1;
color: #fff;
}
.about .icon-box .title {
+ z-index: -1;
margin-left: 85px;
font-weight: 700;
@@ -633,6 +669,7 @@ section {
}
.about .icon-box .title a {
+ z-index: -1;
color: #fff;
transition: 0.3s;
font-size: 18px;
@@ -640,16 +677,19 @@ section {
}
.about .icon-box .title a:hover {
+ z-index: -1;
color: #55a5ea;
}
.about .icon-box .description {
+ z-index: -1;
margin-left: 85px;
line-height: 24px;
font-size: 14px;
}
.about .video-box {
+ z-index: -1;
background: url("../img/about.png") center center no-repeat;
background-size: cover;
height: 300px;
@@ -658,6 +698,7 @@ section {
.about .play-btn {
width: 94px;
+ z-index: -1;
height: 94px;
background: radial-gradient(#55a5ea 50%, rgba(4, 196, 234, 0.4) 52%);
border-radius: 50%;
@@ -669,6 +710,7 @@ section {
}
.about .play-btn::after {
+ z-index: -1;
content: '';
position: absolute;
left: 50%;
@@ -684,6 +726,7 @@ section {
}
.about .play-btn::before {
+ z-index: -1;
content: '';
position: absolute;
width: 120px;
@@ -697,12 +740,14 @@ section {
}
.about .play-btn:hover::after {
+ z-index: -1;
border-left: 15px solid #55a5ea;
transform: scale(20);
}
.about .play-btn:hover::before {
content: '';
+ z-index: -1;
position: absolute;
left: 50%;
top: 50%;
@@ -748,10 +793,13 @@ section {
/*################----Counts----################*/
.counts {
/* padding-top: 30px; */
+
justify-content: center;
}
+
.counts .count-box {
+ z-index: -1;
box-shadow: -10px -5px 40px 0 rgba(0, 0, 0, 0.1);
padding: 50px 80px;
margin: 5%;
@@ -811,6 +859,7 @@ section {
}
.counts .count-box p {
+ z-index: -1;
padding: 30px 0 0 0;
/* margin: 0; */
font-family: "Roboto", sans-serif;
@@ -819,6 +868,7 @@ section {
}
.counts .count-box a {
+ z-index: -1;
font-weight: 600;
display: block;
/* margin-top: 10px; */
@@ -895,8 +945,13 @@ section {
line-height: 24px;
font-size: 14px;
margin-bottom: 0;
+}
-
+.services .container {
+ display: grid;
+ grid-template-columns: repeat(3, 1fr);
+ /* gap: 20px; */
+ margin-top: 8px;
}
.services .icon-box:hover {
@@ -921,6 +976,31 @@ section {
color: #111111;
}
+/* Styles for medium screens */
+@media (max-width: 991px) {
+ .services .container {
+ grid-template-columns: repeat(2, 1fr);
+ }
+}
+
+/* Styles for smaller screens */
+@media (max-width: 767px) {
+ .services .container {
+ grid-template-columns: 1fr;
+ }
+}
+
+/* Additional smaller adjustments */
+@media (max-width: 575px) {
+ .services .icon-box {
+ padding: 20px;
+ }
+ .services .icon i {
+ font-size: 30px;
+ }
+}
+
+
/*################----Appointments----################*/
+
+
+
+
+
+
+
+
+
+