<!DOCTYPE html> <!-- Website - www.codingnepalweb.com --> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Login</title> <style> /* Styles for body to match the login page background color */ body { background-color: #f5f5f5; /* Match the background color of the login page */ } /* Your CSS styles here */ /* Styles for modal */ .modal { display: none; position: fixed; z-index: 1; left: 0; top: 0; width: 100%; height: 100%; overflow: auto; background-color: rgba(183, 46, 46, 0.5); } .modal-content { background-color: #fefefe; margin: 15% auto; padding: 20px; border: 1px solid #888; width: 80%; max-width: 400px; text-align: center; border-radius: 10px; } .close { color: #aaa; float: right; font-size: 28px; font-weight: bold; } .close:hover, .close:focus { color: black; text-decoration: none; cursor: pointer; } /* Button styles */ .btn { background-color: #4CAF50; /* Green */ border: none; color: white; padding: 10px 20px; text-align: center; text-decoration: none; display: inline-block; font-size: 16px; margin: 4px 2px; transition-duration: 0.4s; cursor: pointer; border-radius: 8px; } .btn:hover { background-color: #45a049; /* Darker Green */ } /* Form styles */ #myForm { margin: 0 auto; padding: 20px; max-width: 400px; text-align: center; background-color: #fff; /* Background color for the form */ border-radius: 10px; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); } .form-group { margin-bottom: 20px; } label { display: block; margin-bottom: 5px; font-weight: bold; } input[type="text"], input[type="password"] { width: 100%; padding: 10px; border-radius: 5px; border: 1px solid #ccc; } </style> <!-- Fontawesome CDN Link For Icons --> <link rel="stylesheet" href="loginpage.css" /> </head> <body> <form id="myForm" action="drop.html" onsubmit="return validateForm()"> <h2>Login</h2> <div class="form-group username"> <label for="username">Username</label> <input type="text" id="username" placeholder="Enter your username" required> </div> <div class="form-group password"> <label for="password">Password</label> <input type="password" id="password" placeholder="Enter your password" required> <i id="pass-toggle-btn" class="fa-solid fa-eye"></i> </div> <div class="form-group submit-btn"> <input type="submit" value="Login" class="styled-btn"> </div> <div class="form-group"> <button onclick="redirectToLoginPage()" class="btn">Sign up</button> </div> </form> <!-- Popup window for random password --> <div id="myModal" class="modal"> <div class="modal-content"> <span class="close">×</span> <p>Suggested Password:</p> <p id="randomPassword"></p> <button id="useRandomPassword" class="btn">Use This Password</button> <button id="createOwnPassword" class="btn">Create Own Password</button> <button id="cancelPassword" class="btn">Cancel</button> </div> </div> <script> // JavaScript code for generating a suggested password function generateSuggestedPassword() { var length = 10; // Change the length of the suggested password as needed var charset = "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789!@#$%^&*()_+<>?"; // Define the character set for the suggested password var password = ""; for (var i = 0; i < length; i++) { password += charset.charAt(Math.floor(Math.random() * charset.length)); } return password; } // JavaScript code to display suggested password in popup window document.getElementById('password').addEventListener('click', function() { var suggestedPassword = generateSuggestedPassword(); document.getElementById('randomPassword').textContent = suggestedPassword; document.getElementById('myModal').style.display = "block"; }); // Close the modal when the close button is clicked document.getElementsByClassName('close')[0].addEventListener('click', function() { document.getElementById('myModal').style.display = "none"; }); // Close the modal when clicked outside of the modal content window.onclick = function(event) { var modal = document.getElementById('myModal'); if (event.target == modal) { modal.style.display = "none"; } }; // Use the random password when the "Use This Password" button is clicked document.getElementById('useRandomPassword').addEventListener('click', function() { var suggestedPassword = document.getElementById('randomPassword').textContent; document.getElementById('password').value = suggestedPassword; document.getElementById('myModal').style.display = "none"; }); // Redirect to index.html when the "Create Own Password" button is clicked document.getElementById('createOwnPassword').addEventListener('click', function() { window.location.href = "index.html"; }); // Cancel and close the modal when the "Cancel" button is clicked document.getElementById('cancelPassword').addEventListener('click', function() { document.getElementById('myModal').style.display = "none"; }); // Redirect to loginpage.html when the "Login" button is clicked function redirectToLoginPage() { window.location.href = "signup.html"; } // Form validation function function validateForm() { var form = document.getElementById('myForm'); if (!form.checkValidity()) { // If form is invalid, prevent form submission event.preventDefault(); event.stopPropagation(); } form.classList.add('was-validated'); return form.checkValidity(); } </script> </body> </html>
Preview:
downloadDownload PNG
downloadDownload JPEG
downloadDownload SVG
Tip: You can change the style, width & colours of the snippet with the inspect tool before clicking Download!
Click to optimize width for Twitter