Preview:
<!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">&times;</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>
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