Skip to content

Instantly share code, notes, and snippets.

@thinkphp
Created October 13, 2024 07:10
Show Gist options
  • Save thinkphp/3d5032fd3dbc762daa758be901d97532 to your computer and use it in GitHub Desktop.
Save thinkphp/3d5032fd3dbc762daa758be901d97532 to your computer and use it in GitHub Desktop.
login
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Login Form with Changing Border</title>
<style>
body {
font-family: Arial, sans-serif;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
background-color: #f0f0f0;
}
.login-container {
background-color: white;
padding: 2rem;
border-radius: 8px;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
width: 300px;
border: 5px solid black; /* Added border */
}
h2 {
text-align: center;
margin-bottom: 1.5rem;
}
.form-group {
margin-bottom: 1rem;
}
label {
display: block;
margin-bottom: 0.5rem;
}
input[type="text"],
input[type="password"] {
width: 100%;
padding: 0.5rem;
border: 1px solid #ccc;
border-radius: 4px;
}
.password-toggle {
position: relative;
}
.toggle-password {
position: absolute;
right: 10px;
top: 50%;
transform: translateY(-50%);
cursor: pointer;
user-select: none;
}
button {
width: 100%;
padding: 0.75rem;
background-color: #007bff;
color: white;
border: none;
border-radius: 4px;
cursor: pointer;
font-size: 1rem;
}
button:hover {
background-color: #0056b3;
}
.error {
color: red;
font-size: 0.875rem;
margin-top: 0.25rem;
}
</style>
</head>
<body>
<div class="login-container" id="loginContainer">
<h2>Login</h2>
<form id="loginForm">
<div class="form-group">
<label for="username">Username</label>
<input type="text" id="username" name="username" required>
<div id="usernameError" class="error"></div>
</div>
<div class="form-group">
<label for="password">Password</label>
<div class="password-toggle">
<input type="password" id="password" name="password" required>
<span class="toggle-password" onclick="togglePassword()">👁️</span>
</div>
<div id="passwordError" class="error"></div>
</div>
<button type="submit">Login</button>
</form>
</div>
<script>
const loginForm = document.getElementById('loginForm');
const usernameInput = document.getElementById('username');
const passwordInput = document.getElementById('password');
const usernameError = document.getElementById('usernameError');
const passwordError = document.getElementById('passwordError');
loginForm.addEventListener('submit', function(e) {
e.preventDefault();
let isValid = true;
// Username validation
if (usernameInput.value.trim() === '') {
usernameError.textContent = 'Username is required';
isValid = false;
} else {
usernameError.textContent = '';
}
// Password validation
if (passwordInput.value.length < 6) {
passwordError.textContent = 'Password must be at least 6 characters long';
isValid = false;
} else {
passwordError.textContent = '';
}
if (isValid) {
alert('Login successful!'); // Replace with your login logic
}
});
function togglePassword() {
const type = passwordInput.getAttribute('type') === 'password' ? 'text' : 'password';
passwordInput.setAttribute('type', type);
}
// Color-changing border effect
const colors = ['red', 'green', 'blue', 'yellow', 'purple'];
let currentIndex = 0;
setInterval(function() {
const loginContainer = document.getElementById('loginContainer');
loginContainer.style.borderColor = colors[currentIndex];
currentIndex = (currentIndex + 1) % colors.length;
}, 1000);
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment