Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Loginalert #622

Merged
merged 4 commits into from
Oct 20, 2023
Merged

Loginalert #622

Show file tree
Hide file tree
Changes from 3 commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
841ab80
Login and Footer change
ASP124 Oct 19, 2023
d7a5e80
Login and Footer change
ASP124 Oct 19, 2023
b5baef3
Login and Footer change
ASP124 Oct 19, 2023
e4efc1d
Merge branch 'main' into loginalert
Susmita-Dey Oct 20, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion html/contact.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -47,7 +47,7 @@ <h1>Contact Us</h1>

<a class="atag" href="mailto:[email protected]"><button type="submit" class="btn">Submit</button></a>
</form>
<p><a class="tag" href="/index.html">&#8592; Back</a></p>
<p><a class="tag" href="../index.html">&#8592; Back</a></p>
</div>
</section>
<script>
Expand Down
268 changes: 179 additions & 89 deletions html/login.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,102 +1,192 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="icon" href="/images/favicon-enhanced.png" />
<link rel="stylesheet" href="css/login.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/css/all.min.css">
<title>Sukoon - Login</title>
</head>
<body onload="myfunction()">
<div id="load">
<div
style="

<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="icon" href="/images/favicon-enhanced.png" />
<link rel="stylesheet" href="css/login.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/css/all.min.css" />
<style>
/* Custom CSS for alert messages */
.alert {
display: none;
position: fixed;
top: 10%;
left: 50%;
transform: translate(-50%, -50%);
padding: 20px;
background-color: #4caf50;
color: white;
text-align: center;
border-radius: 6px;
box-shadow: 0px 0px 10px 0px #262626;
opacity: 0.8;
transition: all 0.3s ease-in-out;
z-index: 1;
}

#emptyFieldsAlert {
background-color: red;
}
</style>
<title>Sukoon - Login</title>
</head>

<body onload="myfunction()">
<div id="load">
<div style="
background-color: white;
height: 25vh;
width: 100%;
position: relative;
top: -70px;
"
></div>
"></div>
</div>
<div class="alert" id="emptyFieldsAlert" style="display: none">
Please fill in all fields!
</div>
<img src="../images/signupill.png" alt="" />
<div class="login">
<div class="welcome">
<h1 class="titletext">Welcome Back &#x1F917</h1>
<span>Please enter your details.</span>
</div>
<div class="inputs">
<span>Email<br /></span>
<input class="inputbox" placeholder="Enter your email" id="loginEmail" /><br />
<span>Password<br /></span>
<input type="password" class="inputbox" placeholder="••••••••" id="loginPassword" />
<i class="far fa-eye" id="toggleLoginPassword" style="margin-left: -30px; cursor: pointer;"></i>
</div>
<div class="forgotpass">
<span>Forgot Password</span>
</div>
<p class="back"><a class="tag" href="../index.html">&#8592; Back</a></p>
<div class="button">
<input type="button" class="signin" value="Sign in" id="loginButton" />
</div>
<div class="signupline">
<span>Don't have an account?</span>
<span class="signupbutton"> Sign up</span>
</div>
</div>
<div class="register">
<div class="welcome">
<h1 class="titletext">Create an account</h1>
<span>Let's get started.</span>
</div>
<div class="inputs">
<span>Username<br /></span>
<input class="inputbox" placeholder="Enter your username" id="signupUsername" /><br />
<span>Email<br /></span>
<input class="inputbox" placeholder="Enter your email" id="signupEmail" /><br />
<span>Password<br /></span>
<input type="password" class="inputbox" placeholder="••••••••" id="signupPassword" />
<i class="far fa-eye" id="toggleSignupPassword" style="margin-left: -30px; cursor: pointer;"></i>
</div>
<img src="/images/signupill.png" alt="" />
<div class="login">
<div class="welcome">
<h1 class="titletext">Welcome Back &#x1F917</h1>
<span>Please enter your details.</span>
</div>
<div class="inputs">
<span>Email<br /></span>
<input class="inputbox" placeholder="Enter your email" /><br />
<span>Password<br /></span>
<input type="password" class="inputbox" placeholder="••••••••" id="id_password">
<i class="far fa-eye" id="togglePassword" style="margin-left: -30px; cursor: pointer;"></i>
</div>
<div class="forgotpass">
<span>Forgot Password</span>
</div>
<p class="back"><a class="tag" href="/index.html">&#8592; Back</a></p>
<div class="button">
<input type="button" class="signin" value="Sign in" />
</div>
<div class="signupline">
<span>Don't have an account?</span>
<span class="signupbutton"> Sign up</span>
</div>
<p class="back-1"><a class="tag1" href="../index.html">&#8592; Back</a></p>
<div class="button">
<input type="button" class="signin" value="Sign up" id="signupButton" />
</div>
<div class="register">
<div class="welcome">
<h1 class="titletext">Create an account</h1>
<span>Let's get started.</span>
</div>
<div class="inputs">
<span>Username<br /></span>
<input class="inputbox" placeholder="Enter your username" /><br />
<span>Email<br /></span>
<input class="inputbox" placeholder="Enter your email" /><br />
<span>Password<br /></span>
<input type="password" class="inputbox" placeholder="••••••••" id="id_password">
<i class="far fa-eye" id="togglePassword" style="margin-left: -30px; cursor: pointer;"></i>
</div>
<p class="back-1"><a class="tag1" href="/index.html">&#8592; Back</a></p>
<div class="button">
<input type="button" class="signin" value="Sign up" />
</div>
<div class="signupline">
<span>Already have an account?</span>
<span class="signinbutton"> Sign in</span>
</div>
<div class="signupline">
<span>Already have an account?</span>
<span class="signinbutton"> Sign in</span>
</div>
</div>

<script>
const signin_btn = document.querySelector(".signinbutton");
const signup_btn = document.querySelector(".signupbutton");
const register = document.querySelector(".register");
const login = document.querySelector(".login");
signup_btn.addEventListener("click", () => {
register.style.display = "block";
login.style.display = "none";
});
signin_btn.addEventListener("click", () => {
register.style.display = "none";
login.style.display = "block";
});
</script>
<script>
var preloader = document.getElementById("load");
function myfunction() {
preloader.style.display = "none";
<!-- Alert messages -->
<div class="alert" id="loginAlert">Sign in successful!</div>
<div class="alert" id="signupAlert">Sign up successful!</div>

<script>
const signin_btn = document.querySelector(".signinbutton");
const signup_btn = document.querySelector(".signupbutton");
const register = document.querySelector(".register");
const login = document.querySelector(".login");
signup_btn.addEventListener("click", () => {
register.style.display = "block";
login.style.display = "none";
});
signin_btn.addEventListener("click", () => {
register.style.display = "none";
login.style.display = "block";
});
loginButton.addEventListener("click", () => {
const emailInput = document.getElementById("loginEmail");
const passwordInput = document.getElementById("loginPassword");
const loginAlert = document.getElementById("loginAlert");
if (emailInput.value.trim() === "" || passwordInput.value.trim() === "") {
const emptyFieldsAlert = document.getElementById("emptyFieldsAlert");
emptyFieldsAlert.style.display = "block";
setTimeout(() => {
emptyFieldsAlert.style.display = "none";
}, 3000);
} else {
emailInput.value = ""; // Clear email input
passwordInput.value = ""; // Clear password input

loginAlert.style.display = "block";
setTimeout(() => {
loginAlert.style.display = "none";
}, 3000);
}
const togglePassword = document.querySelector('#togglePassword');
const password = document.querySelector('#id_password');
});

signupButton.addEventListener("click", () => {
const usernameInput = document.getElementById("signupUsername");
const emailInput = document.getElementById("signupEmail");
const passwordInput = document.getElementById("signupPassword");
const signupAlert = document.getElementById("signupAlert");

if (
usernameInput.value.trim() === "" ||
emailInput.value.trim() === "" ||
passwordInput.value.trim() === ""
) {
const emptyFieldsAlert = document.getElementById("emptyFieldsAlert");
emptyFieldsAlert.style.display = "block";
setTimeout(() => {
emptyFieldsAlert.style.display = "none";
}, 3000);
} else {
usernameInput.value = ""; // Clear username input
emailInput.value = ""; // Clear email input
passwordInput.value = ""; // Clear password input

signupAlert.style.display = "block";
setTimeout(() => {
signupAlert.style.display = "none";
}, 3000);
}
});

</script>
<script>
var preloader = document.getElementById("load");
function myfunction() {
preloader.style.display = "none";
}
const toggleLoginPassword = document.querySelector("#toggleLoginPassword");
const loginPassword = document.getElementById("loginPassword");

toggleLoginPassword.addEventListener("click", function (e) {
const type =
loginPassword.getAttribute("type") === "password" ? "text" : "password";
loginPassword.setAttribute("type", type);
this.classList.toggle("fa-eye-slash");
});

const toggleSignupPassword = document.querySelector("#toggleSignupPassword");
const signupPassword = document.getElementById("signupPassword");

togglePassword.addEventListener('click', function (e) {
const type = password.getAttribute('type') === 'password' ? 'text' : 'password';
password.setAttribute('type', type);
this.classList.toggle('fa-eye-slash');
});
</script>
</body>
</html>
toggleSignupPassword.addEventListener("click", function (e) {
const type =
signupPassword.getAttribute("type") === "password" ? "text" : "password";
signupPassword.setAttribute("type", type);
this.classList.toggle("fa-eye-slash");
});
</script>
</body>
</html>
1 change: 0 additions & 1 deletion html/yogatherapy.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,5 @@
<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
Expand Down
8 changes: 7 additions & 1 deletion index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -591,11 +591,14 @@ <h3>
<li>
<a href="https://sukoon-stress-free.netlify.app/html/audiotherapy">Audio Therapy</a>
</li>
<li>
<a href="https://sukoon-stress-free.netlify.app/html/readingtherapy">Reading Therapy</a>
</li>
<li>
<a href="https://sukoon-stress-free.netlify.app/html/yogatherapy.html">Yoga Therapy</a>
</li>
<li>
<a href="https://sukoon-stress-free.netlify.app/html/readingtherapy">Reading Therapy</a>
<a href="https://sukoon-stress-free.netlify.app/html/laughTherapy.html">Laughing Therapy</a>
</li>
<li>
<a href="https://sukoon-stress-free.netlify.app/html/talkingtherapy">Talking Therapy</a>
Expand All @@ -609,6 +612,9 @@ <h3>
<li>
<a href="https://sukoon-stress-free.netlify.app/html/spiritualTherapy">Spiritual Therapy</a>
</li>
<li>
<a href="https://sukoon-stress-free.netlify.app/html/specialTherapy">Special Therapy</a>
</li>
</ul>
</div>
<!--CONTACTS COLUMN-->
Expand Down