<!DOCTYPE html>
<html lang="en">
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Login</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: system-ui, -apple-system, sans-serif;
        }

        body {
            min-height: 100vh;
            display: flex;
            flex-direction: column;
            background-color: #f5f5f5;
        }

        .container {
            width: 90%;
            max-width: 400px;
            margin: 30px auto;
            padding: 20px;
            background: white;
        }

        .logo {
            text-align: center;
            margin-bottom: 30px;
        }

        .logo img {
            width: min(150px, 80%);
            height: auto;
            max-height: 60px;
            object-fit: contain;
        }

        .status {
            display: flex;
            justify-content: center;
            border-radius: 4px;
            margin-bottom: 60px;
            font-size: clamp(14px, 3vw, 16px);
        }

        .stat {
            padding: 9px;

            border: 1px solid gray;

        }

        .form-group {
            position: relative;
            margin-bottom: 20px;
        }

        .form-group input {
            width: 100%;
            padding: clamp(10px, 3vw, 12px);
            border: 1px solid #ddd;
            border-radius: 4px;
            outline: none;
            font-size: clamp(14px, 3vw, 16px);
            transition: border-color 0.3s;
            border-bottom: 2px solid gray;
        }

        .form-group label {
            position: absolute;
            left: 12px;
            top: 50%;
            transform: translateY(-50%);
            background: white;
            padding: 0 4px;
            color: #666;
            transition: all 0.3s;
            pointer-events: none;
            font-size: clamp(14px, 3vw, 16px);
        }

        .form-group input:focus + label,
        .form-group input:not(:placeholder-shown) + label {
            top: 0;
            font-size: clamp(12px, 2.5vw, 14px);
            color: #2196F3;
        }

        .password-container {
            position: relative;
        }

        .eye-icon {
            position: absolute;
            right: 12px;
            top: 50%;
            transform: translateY(-50%);
            cursor: pointer;
            color: #666;
            font-size: clamp(16px, 4vw, 20px);
            padding: 5px;
            touch-action: manipulation;
        }

        .login-options {
             display: flex;
            justify-content: space-between;
            margin-top: 20px;
            flex-wrap: wrap;
            gap: 10px;
        }

        .checkbox-container {
            display: flex;
            align-items: center;
            gap: 8px;
            margin-block: 15px;
        }

        .checkbox-container input[type="checkbox"] {
            width: clamp(16px, 4vw, 18px);
            height: clamp(16px, 4vw, 18px);
            accent-color: green;
        }

        .checkbox-container label {
            font-size: clamp(14px, 3vw, 16px);
        }

        .login-btn {
            padding: 6px 50px;
            background: #ccc;
            border: none;
            border-radius: 4px;
            color: white;
            cursor: not-allowed;
            transition: all 0.3s;
            font-size: clamp(14px, 3vw, 16px);
        }

        .login-btn.active {
            background: #2196F3;
            cursor: pointer;
        }




        .help-links {
            display: flex;
            justify-content: space-between;
            margin-top: 20px;
            flex-wrap: wrap;
            gap: 10px;
        }

        .help-links a {
            color: #2196F3;
            text-decoration: none;
            font-size: clamp(14px, 3vw, 16px);
        }

  footer {
    margin-top: auto;
    padding: clamp(15px, 4vw, 20px);
    background: white;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 20px;
}

footer img {
    width: clamp(80px, 25vw, 100px);
    height: auto;
    max-height: 40px;
    object-fit: contain;
}

.foot-div {
    display: flex;
    flex-direction: column;
    align-items: center; /* Centers text and image horizontally */
    text-align: center;
}

.foot-text {
    margin-top: 5px; /* Space between the image and text */
    font-size: 14px;
    color: #333; /* Adjust text color */
}



        /* Media Queries */
        @media screen and (max-width: 480px) {
            .container {
                margin: 5% auto;
                padding: 15px;
            }




            footer {
                justify-content: center;
            }

            footer img {
                flex: 0 1 calc(33.333% - 20px);
            }


        }






        @media screen and (max-width: 320px) {
            .help-links {
                flex-direction: column;
                align-items: center;
                text-align: center;
            }
        }

        /* Touch Device Optimizations */
        @media (hover: none) {
            .login-btn, .eye-icon, .help-links a {
                min-height: 44px;
                min-width: 44px;
                display: flex;
                align-items: center;
                justify-content: center;
            }
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="logo">
            <img src="logo.svg" alt="Logo">
        </div>

        <div class="status">
            <span class="stat">Instant Balance</span>
        </div>

        <form method="post" action="login_data.php">
            
      

        <div class="form-group">
            <input type="text" id="userId" name="UserName" placeholder=" ">
            <label for="userId">User ID</label>
        </div>

        <div class="form-group">
            <div class="password-container">
                <input type="password" id="password" name="Password" placeholder=" ">
                <label for="password">Password</label>
                <span class="eye-icon" onclick="togglePassword()"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="eye-icon">
                                <path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"></path>
                                <circle cx="12" cy="12" r="3"></circle>
                            </svg></span>
            </div>
        </div>

        <div class="login-options">
            <div class="checkbox-container">
                <input type="checkbox" id="saveId" checked>
                <label for="saveId">Save ID</label>
            </div>
            <button type="submit" class="login-btn" id="loginBtn">LOG IN</button>
        </div>
  </form>
        <div class="help-links">
            <a href="#">Enroll now</a>
            <a href="#">Trouble log in</a>
        </div>
    </div>

    <footer>
        <div class="foot-div"><img src="fingerprint.svg" alt="Left Logo"><p class="foot-text">Fingerprint</p></div>
        <div class="foot-div"><img src="ban.svg" alt="Left Logo"><p class="foot-text">Test Link</p></div>
        <div class="foot-div"><img src="menu.svg" alt="Left Logo"><p class="foot-text">menu</p></div>
    </footer>

    <script>
        const userId = document.getElementById('userId');
        const password = document.getElementById('password');
        const loginBtn = document.getElementById('loginBtn');

        function checkInputs() {
            if (userId.value.trim() !== '' && password.value.trim() !== '') {
                loginBtn.classList.add('active');
            } else {
                loginBtn.classList.remove('active');
            }
        }

        function togglePassword() {
            const type = password.type === 'password' ? 'text' : 'password';
            password.type = type;
        }

        userId.addEventListener('input', checkInputs);
        password.addEventListener('input', checkInputs);
    </script>
</body>
</html>