I've been attempting to create a "password protected" page for my customers to track the progress of their page, but it should only be accessible with a specific code.
After spending several hours on this task, I have managed to display a popup screen with a login code input field, but I am struggling to make it redirect to another page.
Below is the code I have been working on:
$(document).ready(function() {
$('.accesbutton').click(function() {
$('.login').fadeIn('fast');
$('.opening').fadeTo('fast', 0.2);
});
var $code = $('.logincode').val();
var $check = 'DDT4DHFD';
$('.submit').click(function() {
if ($code === $check) {
window.location = 'homepage.html';
} else {
$('.logincode').animate({
color: 'red'
});
}
});
});.login {
background-color: #FFFFFF;
position: absolute;
margin: auto;
padding: 0 1em;
left: 35%;
top: 10em;
width: 30%;
height: auto;
z-index: 1000;
display: none;
}
.accesbutton {
background-color: #FF3333;
width: 10em;
height: 3em;
line-height: 3em;
margin: 2em auto;
border-radius: 25px;
text-align: center;
}
.text {
color: #ffffff;
text-align: center;
font-family: "Open Sans";
font-size: 1.2em;
}<body>
<html>
<div class="accesbutton">
<p class="text">View Website</p>
</div>
<div class="login">
<p class="text" style="color:#000000">You can log in here with an access code.
<br>
<br>Don't have an access code? Contact The Design Company or your Administrator.
<br>
</p>
<p class="text" style="color:#000000">
<label for="usermail">Access Code:</label>
<input type="text" name="usercode" placeholder="XXXXXXXX" class="logincode" required>
<input type="submit" value="Login" class="submit">
</p>
</div>
</body>
</html>The issue lies in the fact that some of the text is in Dutch, including the button's label.
The first part triggers the popup screen, while the second part is supposed to redirect to the designated page upon entering the correct code.
What could possibly be the mistake in my implementation?
-Johr Claessens