This is a basic HTML file for a login page with accompanying CSS and JavaScript. Here's a brief description of its components:
1. HTML Structure:
.Contains a <form> element for user login.
.Input fields for username and password.
.Submit button to submit the login credentials.
2. CSS Styling:
.Styles the body background, text colors, fonts, and layout.
.Form input fields and submit button are styled for consistent appearance.
.Utilizes flexbox for centering the login form vertically and horizontally.
.Defines keyframes for animating falling emojis.
3. JavaScript:
.Generates and appends falling emojis to the page using createEmoji() function.
.createEmoji() function randomly selects emojis from an array and assigns them random positions and animation delays.
4. Functionality:
.Upon page load, falling emojis are dynamically generated and animated.
.The form is set to submit user input to a server-side script named login.php.
.Overall, it's a simple yet visually appealing login page with animated emojis to add a playful touch.
HTML CODE
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Login</title>
<style>
body {
font-family: Arial, sans-serif;
background-color: black;
color: white;
margin: 0;
padding: 0;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
overflow: hidden;
position: relative; /* Add relative positioning to body */
}
.container {
text-align: center;
position: relative;
}
.container input[type="text"],
.container input[type="password"] {
padding: 10px;
margin: 10px;
border: none;
border-radius: 5px;
width: 200px;
}
.container input[type="submit"] {
padding: 10px 20px;
background-color: #007bff;
color: white;
border: none;
border-radius: 5px;
cursor: pointer;
}
.container input[type="submit"]:hover {
background-color: #0056b3;
}
.emoji {
position: absolute;
animation: falling 5s linear infinite;
}
@keyframes falling {
0% { transform: translateY(-100vh); opacity: 0; }
100% { transform: translateY(100vh); opacity: 1; }
}
</style>
</head>
<body>
<div class="container">
<h2>Login</h2>
<form action="login.php" method="post">
<input type="text" name="username" placeholder="Username" required><br>
<input type="password" name="password" placeholder="Password" required><br>
<input type="submit" value="Login">
</form>
</div>
<script>
// Function to create and append falling emojis
function createEmoji() {
const emojiContainer = document.body; // Select body as container
const emojis = ['', '', '', '', '', '', '', '', '', '']; // Sample emojis, you can add more
emojis.forEach(function(emoji, index) {
const span = document.createElement('span');
span.textContent = emoji;
span.className = 'emoji';
span.style.left = Math.random() * 100 + 'vw';
span.style.animationDelay = Math.random() * index + 's';
emojiContainer.appendChild(span);
});
}
// Call the createEmoji function when the page loads
window.onload = createEmoji;
</script>
</body>
</html>
1
ReplyDelete