RKM -CODE

Login Designs

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Glassmorphism Login - RKM CODE</title>

/* RKM CODE - Centering the login container */
        body {
          display: flex;
          justify-content: center;
          align-items: center;
          height: 100vh;
          background: url('sunset.jpg') no-repeat center center/cover;
          backdrop-filter: blur(10px); /* Slight blur effect */
        }
        
        /* RKM CODE - Glassmorphism effect container */
        .container {
          background: rgba(255, 255, 255, 0.1);
          padding: 2rem;
          border-radius: 10px;
          box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
          backdrop-filter: blur(15px); /* Stronger blur for glass effect */
          border: 1px solid rgba(255, 255, 255, 0.2);
          text-align: center;
          width: 300px;
        }
        
        /* RKM CODE - Heading styling */
        h2 {
          color: white;
          margin-bottom: 1rem;
        }
        
        /* RKM CODE - Input fields styling */
        input {
          width: 100%;
          padding: 10px;
          margin: 10px 0;
          border: none;
          border-radius: 5px;
          outline: none;
          background: rgba(255, 255, 255, 0.2);
          color: white;
        }
        
        /* RKM CODE - Placeholder styling */
        input::placeholder {
          color: rgba(255, 255, 255, 0.7);
        }
        
        /* RKM CODE - Button styling */
        .btn {
          width: 100%;
          padding: 10px;
          margin-top: 10px;
          border: none;
          border-radius: 5px;
          background: linear-gradient(45deg, #ff416c, #ff4b2b);
          color: white;
          font-size: 1rem;
          cursor: pointer;
          transition: 0.3s;
        }
        
        /* RKM CODE - Button hover effect */
        .btn:hover {
          box-shadow: 0 0 10px #ff416c;
        }
    </style>
</head>
<body>
    
    <div class="container">
        <h2>Login</h2>
        <input type="text" placeholder="Username" id="username">
        <input type="password" placeholder="Password" id="password">
        <button class="btn" onclick="login()">Login</button>
    </div>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Neumorphism Login - RKM CODES</title>

/* RKM CODES - Neumorphism effect for login container */
        .login-container {
            background: #e0e5ec;
            padding: 40px;
            border-radius: 20px;
            box-shadow: 10px 10px 20px #babecc, -10px -10px 20px #ffffff; /* Light and dark shadow */
            text-align: center;
            width: 75%;
        }

/* RKM CODES - Heading styling */
        h2 {
            color: #333;
            margin-bottom: 20px;
        }

/* RKM CODES - Input field styling with Neumorphism effect */
        .input-field {
            width: 95%;
            padding: 10px;
            margin: 10px 0;
            border: none;
            border-radius: 10px;
            background: #e0e5ec;
            box-shadow: inset 5px 5px 10px #babecc, inset -5px -5px 10px #ffffff; /* Inner shadow effect */
            outline: none;
        }

/* RKM CODES - Button styling with Neumorphism effect */
        .login-btn {
            width: 100%;
            padding: 10px;
            margin-top: 20px;
            border: none;
            border-radius: 10px;
            background: #e0e5ec;
            box-shadow: 5px 5px 10px #babecc, -5px -5px 10px #ffffff;
            cursor: pointer;
            transition: all 0.3s;
        }

/* RKM CODES - Button click effect */
        .login-btn:active {
            box-shadow: inset 5px 5px 10px #babecc, inset -5px -5px 10px #ffffff; /* Pressed effect */
        }
    </style>
</head>
<body>
    
    <div class="login-container">
        <h2>Login</h2>
        <input type="text" class="input-field" placeholder="Username">
        <input type="password" class="input-field" placeholder="Password">
        <button class="login-btn" onclick="login()">Login</button>
    </div>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Login Page - RKM CODES</title>

/* RKM CODES - Login card container */
        .card {
            background: #fff;
            padding: 2rem;
            border-radius: 10px;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
            text-align: center;
            width: 320px;
        }

/* RKM CODES - Avatar image styling */
        .avatar {
            width: 80px;
            height: 80px;
            border-radius: 50%;
            margin-bottom: 1rem;
        }

/* RKM CODES - Input fields styling */
        input {
            width: 94%;
            padding: 10px;
            margin: 8px 0;
            border: 1px solid #ccc;
            border-radius: 5px;
        }

/* RKM CODES - Button styling */
        button {
            width: 100%;
            padding: 10px;
            background: #007bff;
            color: #fff;
            border: none;
            border-radius: 5px;
            cursor: pointer;
            margin-top: 20px;
        }

/* RKM CODES - Button hover effect */
        button:hover {
            background: #0056b3;
        }
    </style>
</head>
<body>
    
    <div class="card">
        <img src="profile.png" alt="Avatar" class="avatar"> 
        <h2>Welcome Back</h2>
        <input type="text" id="username" placeholder="Username"> 
        <input type="password" id="password" placeholder="Password"> 
        <button onclick="login()">Login</button> 
    </div>

// RKM CODES - Simple login check
            if(username === 'rkmcodes subscribed' && password === 'Tq') {
                alert('Login Successful'); // RKM CODES - Success message
            } else {
                alert('Invalid Credentials'); // RKM CODES - Error message
            }
        }
    </script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Split-Screen Login</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: Arial, sans-serif;
        }
        body {
            display: flex;
            height: 100vh;
        }
        .container {
            display: flex;
            width: 100%;
        }
        .left, .right {
            width: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .left {
            background: #f8f9fa;
            padding: 50px;
        }
        .right {
            background: url('mountain.jpg') no-repeat center;
            background-size: cover;
        }
        .form-container {
            max-width: 300px;
            text-align: center;
        }
        h2 {
            margin-bottom: 20px;
        }
        input {
            width: 100%;
            padding: 10px;
            margin: 10px 0;
            border: 1px solid #ddd;
            border-radius: 5px;
        }
        button {
            width: 100%;
            padding: 10px;
            background: #007bff;
            color: #fff;
            border: none;
            border-radius: 5px;
            cursor: pointer;
            margin-top: 10px;
        }
        .toggle-btn {
            background: none;
            border: none;
            color: #007bff;
            cursor: pointer;
            margin-top: 10px;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="left">
            <div class="form-container">
                <h2 id="form-title">Login</h2>
                <input type="text" id="username" placeholder="Username">
                <input type="password" id="password" placeholder="Password">
                <button onclick="submitForm()">Submit</button>
                <button class="toggle-btn" onclick="toggleForm()">Switch to Signup</button>
            </div>
        </div>
        <div class="right"></div>
    </div>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Fullscreen Login</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: Arial, sans-serif;
        }
        body {
            background: url('sea.jpg') no-repeat center center/cover;
            height: 100vh;
            display: flex;
            align-items: center;
            justify-content: center;
            position: relative;
        }
        .overlay {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.5);
        }
        .login-container {
            position: relative;
            background: rgba(255, 255, 255, 0.1);
            padding: 2rem;
            border-radius: 10px;
            backdrop-filter: blur(10px);
            text-align: center;
            width: 300px;
        }
        .login-container h2 {
            color: #fff;
            margin-bottom: 1rem;
        }
        .login-container input {
            width: 100%;
            padding: 10px;
            margin: 10px 0;
            border: none;
            border-radius: 5px;
            outline: none;
        }
        .login-container button {
            width: 100%;
            padding: 10px;
            background: #ff5722;
            border: none;
            color: #fff;
            border-radius: 5px;
            cursor: pointer;
            transition: 0.3s;
        }
        .login-container button:hover {
            background: #e64a19;
        }
    </style>
</head>
<body>
    <div class="overlay"></div>
    <div class="login-container">
        <h2>Login</h2>
        <input type="text" placeholder="Username" id="username">
        <input type="password" placeholder="Password" id="password">
        <button onclick="login()">Login</button>
    </div>
    <script>
        function login() {
            let username = document.getElementById('username').value;
            let password = document.getElementById('password').value;
            if (username === "admin" && password === "password") {
                alert("Login Successful");
            } else {
                alert("Invalid Credentials");
            }
        }
    </script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Sidebar Login</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: Arial, sans-serif;
        }
        body {
            display: flex;
            height: 100vh;
        }
        .sidebar {
            width: 350px;
            background: #2C3E50;
            color: white;
            padding: 40px;
            display: flex;
            flex-direction: column;
            justify-content: center;
        }
        .sidebar h2 {
            text-align: center;
            margin-bottom: 20px;
        }
        .input-group {
            margin-bottom: 15px;
        }
        .input-group label {
            display: block;
            margin-bottom: 5px;
        }
        .input-group input {
            width: 100%;
            padding: 10px;
            border: none;
            border-radius: 5px;
        }
        .btn {
            width: 100%;
            padding: 10px;
            background: #E74C3C;
            color: white;
            border: none;
            border-radius: 5px;
            cursor: pointer;
            font-size: 16px;
        }
        .main-content {
            flex: 1;
            background: url('sunset.jpg') center/cover;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #fff;
            text-align: center;
            font-size: 24px;
            font-weight: bold;
        }
    </style>
</head>
<body>
    <div class="sidebar">
        <h2>Login</h2>
        <div class="input-group">
            <label for="email">Email</label>
            <input type="email" id="email" placeholder="Enter your email">
        </div>
        <div class="input-group">
            <label for="password">Password</label>
            <input type="password" id="password" placeholder="Enter your password">
        </div>
        <button class="btn" onclick="login()">Login</button>
    </div>
    <div class="main-content">
        Welcome to Our Platform!
    </div>
    <script>
        function login() {
            const email = document.getElementById('email').value;
            const password = document.getElementById('password').value;
            if (email && password) {
                alert('Login successful!');
            } else {
                alert('Please fill in all fields.');
            }
        }
    </script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Floating Login Box</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: Arial, sans-serif;
        }
        body {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            background: linear-gradient(135deg, #667eea, #764ba2);
        }
        .login-container {
            background: white;
            padding: 30px;
            border-radius: 10px;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
            text-align: center;
            transition: transform 0.3s ease;
        }
        .login-container:hover {
            transform: scale(1.05);
        }
        h2 {
            margin-bottom: 20px;
        }
        .input-group {
            position: relative;
            margin-bottom: 20px;
        }
        .input-group input {
            width: 100%;
            padding: 10px;
            border: 1px solid #ccc;
            border-radius: 5px;
            outline: none;
            transition: 0.3s;
        }
        .input-group input:focus {
            border-color: #764ba2;
            box-shadow: 0 0 5px rgba(118, 75, 162, 0.5);
        }
        .btn {
            width: 100%;
            padding: 10px;
            background: #764ba2;
            border: none;
            color: white;
            border-radius: 5px;
            cursor: pointer;
            transition: 0.3s;
        }
        .btn:hover {
            background: #5a3d87;
        }
    </style>
</head>
<body>
    <div class="login-container">
        <h2>Login</h2>
        <div class="input-group">
            <input type="text" id="username" placeholder="Username">
        </div>
        <div class="input-group">
            <input type="password" id="password" placeholder="Password">
        </div>
        <button class="btn" onclick="validateLogin()">Login</button>
    </div>
    <script>
        function validateLogin() {
            let username = document.getElementById('username').value;
            let password = document.getElementById('password').value;
            if (username === "admin" && password === "1234") {
                alert("Login Successful!");
            } else {
                alert("Invalid Credentials");
            }
        }
    </script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Minimalist Login</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: Arial, sans-serif;
        }
        body {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            background: #f5f5f5;
        }
        .login-container {
            background: #fff;
            padding: 20px;
            border-radius: 10px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
            width: 300px;
            text-align: center;
        }
        h2 {
            margin-bottom: 20px;
            font-size: 24px;
        }
        input {
            width: 100%;
            padding: 10px;
            margin: 10px 0;
            border: 1px solid #ddd;
            border-radius: 5px;
            font-size: 16px;
        }
        button {
            width: 100%;
            padding: 10px;
            border: none;
            background: #333;
            color: #fff;
            font-size: 16px;
            border-radius: 5px;
            cursor: pointer;
        }
        button:hover {
            background: #555;
        }
    </style>
</head>
<body>
    <div class="login-container">
        <h2>Login</h2>
        <input type="text" id="username" placeholder="Username" required>
        <input type="password" id="password" placeholder="Password" required>
        <button onclick="login()">Login</button>
    </div>
    
    <script>
        function login() {
            const username = document.getElementById('username').value;
            const password = document.getElementById('password').value;
            
            if (username === 'admin' && password === '1234') {
                alert('Login Successful!');
            } else {
                alert('Invalid Credentials');
            }
        }
    </script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Animated Login & Signup</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css">
    <style>
        * { margin: 0; padding: 0; box-sizing: border-box; font-family: Arial, sans-serif; }
        body { display: flex; justify-content: center; align-items: center; height: 100vh; background: #f4f4f4; }
        .container { position: relative; width: 350px; padding: 40px; background: white; border-radius: 10px; box-shadow: 0 0 15px rgba(0, 0, 0, 0.2); text-align: center; }
        h2 { margin-bottom: 20px; }
        input { width: 100%; padding: 10px; margin: 10px 0; border: 1px solid #ccc; border-radius: 5px; }
        .btn { width: 100%; padding: 10px; background: #007bff; color: white; border: none; cursor: pointer; margin-top: 10px; border-radius: 5px; }
        .btn:hover { background: #0056b3; }
        .toggle-link { cursor: pointer; color: #007bff; margin-top: 15px; display: inline-block; }
    </style>
</head>
<body>
    <div class="container" id="formContainer">
        <h2 id="formTitle">Login</h2>
        <input type="text" id="username" placeholder="Username">
        <input type="password" id="password" placeholder="Password">
        <button class="btn" onclick="submitForm()">Submit</button>
        <div class="toggle-link" onclick="toggleForm()">Don't have an account? Sign Up</div>
    </div>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Gradient Overlay Login</title>
    <style>
    /* GENERATED BY RKM CODE */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: Arial, sans-serif;
        }

body {
            height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
            background: linear-gradient(135deg, #667eea, #764ba2);
        }

.login-container {
            background: rgba(255, 255, 255, 0.2);
            padding: 20px;
            border-radius: 10px;
            backdrop-filter: blur(10px);
            text-align: center;
            width: 320px;
            color: #fff;
            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
        }

.login-container h2 {
            margin-bottom: 15px;
        }

.input-group {
            margin-bottom: 15px;
            text-align: left;
        }

.input-group label {
            display: block;
            margin-bottom: 5px;
            font-size: 14px;
        }

.input-group input {
            width: 100%;
            padding: 10px;
            border: none;
            border-radius: 5px;
            outline: none;
        }

.login-btn {
            width: 100%;
            padding: 10px;
            border: none;
            border-radius: 5px;
            background: #fff;
            color: #764ba2;
            font-size: 16px;
            cursor: pointer;
            transition: 0.3s;
        }

.login-btn:hover {
            background: #f4f4f4;
        }
        
        /* GENERATED BY RKM CODE */
    </style>
</head>
<body>
  
    <div class="login-container">
        <h2>Login</h2>
        <div class="input-group">
            <label for="username">Username</label>
            <input type="text" id="username" placeholder="Enter your username">
        </div>
        <div class="input-group">
            <label for="password">Password</label>
            <input type="password" id="password" placeholder="Enter your password">
        </div>
        <button class="login-btn" onclick="login()">Login</button>
    </div>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Social Media Login</title>
    <style>
    /* GENERATED BY RKM CODE */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: Arial, sans-serif;
        }
        body {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            background: #f5f5f5;
        }
        .login-container {
            background: white;
            padding: 20px;
            border-radius: 10px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
            text-align: center;
            width: 300px;
        }
        h2 {
            margin-bottom: 20px;
        }
        .social-login button {
            width: 100%;
            padding: 10px;
            margin: 10px 0;
            border: none;
            border-radius: 5px;
            cursor: pointer;
            font-size: 16px;
            color: white;
        }
        .google { background: #db4437; }
        .facebook { background: #3b5998; }
        .twitter { background: #1da1f2; }
        .social-login button:hover {
            opacity: 0.8;
        }
        /* GENERATED BY RKM CODE */
    </style>
</head>
<body>
  
    <div class="login-container">
        <h2>Login</h2>
        <div class="social-login">
            <button class="google" onclick="socialLogin('Google')">Login with Google</button>
            <button class="facebook" onclick="socialLogin('Facebook')">Login with Facebook</button>
            <button class="twitter" onclick="socialLogin('Twitter')">Login with Twitter</button>
        </div>
    </div>
    
    <script>
    /* GENERATED BY RKM CODE */
        function socialLogin(platform) {
            alert('Redirecting to ' + platform + ' login...');
        }
        /* GENERATED BY RKM CODE */
    </script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Terminal Login</title>
    <style>
    /* GENERATED BY RKM CODE */
        body {
            background-color: black;
            color: green;
            font-family: monospace;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            flex-direction: column;
        }
        #terminal {
            width: 90%;
            border: 2px solid green;
            padding: 20px;
        }
        .input-line {
            display: flex;
        }
        .prompt {
            margin-right: 10px;
        }
        input {
            background: none;
            border: none;
            color: green;
            font-family: monospace;
            font-size: 16px;
            outline: none;
            width: 100%;
        }
        
        button {
            transition: 0.3s;
            margin-top: 15px;
        }
        /* GENERATED BY RKM CODE */ 
    </style>
</head>
<body>
    
    <div id="terminal">
        <p>Welcome to Secure Login</p>
        <div class="input-line">
            <span class="prompt">Username: </span>
            <input type="text" id="username" autofocus>
        </div>
        <div class="input-line">
            <span class="prompt">Password: </span>
            <input type="password" id="password">
        </div>
        <button onclick="login()">Login</button>
        <p id="message"></p>
    </div>
      
    <script>
    /* GENERATED BY RKM CODE */ 
        function login() {
            const username = document.getElementById("username").value;
            const password = document.getElementById("password").value;
            
            const message = document.getElementById("message");
            if (username === "admin" && password === "password") {
                message.innerText = "Access Granted!";
            } else {
                message.innerText = "Access Denied!";
            }
        }
        /* GENERATED BY RKM CODE */   
    </script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Dark Mode Login</title>
    <style>
        body {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100%;
            background-color: #121212;
            font-family: Arial, sans-serif;
            transition: background 0.3s;
            margin-top: 50%;
        }
        .container {
            background: #1e1e1e;
            padding: 30px;
            border-radius: 10px;
            box-shadow: 0 0 15px rgba(0, 255, 255, 0.5);
            text-align: center;
            color: #fff;
            width: 75%;
        }
        h2 {
            margin-bottom: 20px;
        }
        input {
            width: 94%;
            padding: 10px;
            margin: 10px 0;
            border: none;
            border-radius: 5px;
            outline: none;
            background: #222;
            color: #fff;
            box-shadow: inset 0 0 5px rgba(0, 255, 255, 0.5);
        }
        button {
            width: 100%;
            padding: 10px;
            background: cyan;
            border: none;
            border-radius: 5px;
            cursor: pointer;
            transition: 0.3s;
            margin-top: 15px;
        }
        button:hover {
            background: #00ffff;
        }
        .toggle {
            margin-top: 20px;
            cursor: pointer;
            padding: 5px 10px;
            background: #333;
            border-radius: 5px;
        }
        .light-mode {
            background: #f5f5f5;
            color: #000;
        }
        .light-mode .container {
            background: #fff;
            box-shadow: 0 0 15px rgba(0, 0, 255, 0.3);
        }
        .light-mode input {
            background: #ddd;
            color: #000;
        }
    </style>
</head>
<body>
    <div class="container">
        <h2>Login</h2>
        <input type="text" placeholder="Username">
        <input type="password" placeholder="Password">
        <button>Login</button>
        <div class="toggle" onclick="toggleMode()">Toggle Light/Dark</div>
    </div>
    <script>
        function toggleMode() {
            document.body.classList.toggle("light-mode");
        }
    </script>
</body>
</html>

<!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>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: Arial, sans-serif;
        }
        body {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            background: linear-gradient(135deg, #667eea, #764ba2);
        }
        .login-container {
            background: white;
            padding: 20px;
            border-radius: 10px;
            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
            width: 90%;
            max-width: 400px;
        }
        .login-container h2 {
            text-align: center;
            margin-bottom: 20px;
        }
        .input-group {
            margin-bottom: 15px;
        }
        .input-group label {
            display: block;
            margin-bottom: 5px;
        }
        .input-group input {
            width: 100%;
            padding: 10px;
            font-size: 16px;
            border: 1px solid #ccc;
            border-radius: 5px;
        }
        .login-btn {
            width: 100%;
            padding: 10px;
            font-size: 18px;
            background: #667eea;
            color: white;
            border: none;
            border-radius: 5px;
            cursor: pointer;
        }
        .login-btn:hover {
            background: #5a67d8;
        }
        .message {
            text-align: center;
            margin-top: 10px;
            color: red;
        }
    </style>
</head>
<body>
    <div class="login-container">
        <h2>Login</h2>
        <div class="input-group">
            <label for="username">Username</label>
            <input type="text" id="username" placeholder="Enter username">
        </div>
        <div class="input-group">
            <label for="password">Password</label>
            <input type="password" id="password" placeholder="Enter password">
        </div>
        <button class="login-btn" onclick="validateLogin()">Login</button>
        <p class="message" id="message"></p>
    </div>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Corporate Dashboard Login</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            background: #f4f7fc;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
        }
        .login-container {
            background: #ffffff;
            padding: 30px;
            border-radius: 10px;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
            text-align: center;
            width: 300px;
        }
        .logo {
            width: 100px;
            margin-bottom: 20px;
        }
        input {
            width: 94%;
            padding: 10px;
            margin: 10px 0;
            border: 1px solid #ccc;
            border-radius: 5px;
        }
        button {
            width: 100%;
            padding: 10px;
            background: #007bff;
            color: #fff;
            border: none;
            border-radius: 5px;
            cursor: pointer;
            font-size: 16px;
            margin-top: 15px;
        }
        button:hover {
            background: #0056b3;
        }
        .mfa {
            display: none;
        }
    </style>
</head>
<body>
    <div class="login-container">
        <img src="logo.png" alt="Company Logo" class="logo">
        <h2>Corporate Dashboard</h2>
        <input type="text" id="username" placeholder="Username">
        <input type="password" id="password" placeholder="Password">
        <button onclick="login()">Login</button>
        <div class="mfa" id="mfa-section">
            <input type="text" id="mfa-code" placeholder="Enter MFA Code">
            <button onclick="verifyMFA()">Verify</button>
        </div>
    </div>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Circular UI Login</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: Arial, sans-serif;
        }
        body {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            background: linear-gradient(135deg, #667eea, #764ba2);
        }
        .login-container {
            background: white;
            padding: 40px;
            border-radius: 50%;
            width: 300px;
            height: 300px;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
        }
        .input-field {
            border: none;
            outline: none;
            width: 80%;
            padding: 10px;
            margin: 10px 0;
            border-radius: 20px;
            text-align: center;
            border: 2px solid #764ba2;
        }
        .login-btn {
            background: #764ba2;
            color: white;
            border: none;
            padding: 10px 20px;
            border-radius: 20px;
            cursor: pointer;
            margin-top: 10px;
            transition: 0.3s;
        }
        .login-btn:hover {
            background: #5a3d8a;
        }
    </style>
</head>
<body>
    <div class="login-container">
        <h2>Login</h2>
        <input type="text" class="input-field" placeholder="Username">
        <input type="password" class="input-field" placeholder="Password">
        <button class="login-btn" onclick="login()">Login</button>
    </div>
    <script>
        function login() {
            alert("Login button clicked!");
        }
    </script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Step-based Login</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            background-color: #f0f2f5;
        }
        .container {
            background: white;
            padding: 20px;
            border-radius: 10px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
            width: 300px;
            text-align: center;
        }
        .step {
            display: none;
        }
        .step.active {
            display: block;
        }
        input {
            width: 93%;
            padding: 10px;
            margin: 10px 0;
            border: 1px solid #ccc;
            border-radius: 5px;
        }
        button {
            width: 100%;
            padding: 10px;
            border: none;
            background: #007bff;
            color: white;
            cursor: pointer;
            border-radius: 5px;
            margin-top: 10px;
        }
    </style>
</head>
<body>
    <div class="container">
        <form id="loginForm">
            <div class="step active" id="step1">
                <h2>Enter Username</h2>
                <input type="text" id="username" placeholder="Username" required>
                <button type="button" onclick="nextStep(2)">Next</button>
            </div>
            <div class="step" id="step2">
                <h2>Enter Password</h2>
                <input type="password" id="password" placeholder="Password" required>
                <button type="button" onclick="prevStep(1)">Back</button>
                <button type="submit">Login</button>
            </div>
        </form>
    </div>

function prevStep(step) {
            document.querySelector('.step.active').classList.remove('active');
            document.getElementById('step' + step).classList.add('active');
        }

document.getElementById('loginForm').addEventListener('submit', function(event) {
            event.preventDefault();
            alert('Login Successful!');
        });
    </script>
</body>
</html>

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

body {
            height: 100%;
            overflow: hidden;
        }

.parallax {
            position: absolute;
            width: 100%;
            height: 100%;
            background: url('mountain.jpg') no-repeat center center/cover;
            transition: transform 0.1s;
        }

.container {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            background: rgba(255, 255, 255, 0.2);
            padding: 20px;
            border-radius: 10px;
            backdrop-filter: blur(10px);
            box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.2);
        }

.container h2 {
            text-align: center;
            margin-bottom: 15px;
            color: #fff;
        }

.input-box {
            margin: 10px 0;
        }

.input-box input {
            width: 100%;
            padding: 10px;
            border: none;
            border-radius: 5px;
            outline: none;
        }

.btn {
            width: 100%;
            padding: 10px;
            border: none;
            border-radius: 5px;
            background: #ff7b54;
            color: white;
            cursor: pointer;
            font-size: 16px;
            margin-top: 10px;
        }
    </style>
</head>
<body>
    <div class="parallax" id="parallax"></div>
    <div class="container">
        <h2>Login</h2>
        <div class="input-box">
            <input type="text" placeholder="Username">
        </div>
        <div class="input-box">
            <input type="password" placeholder="Password">
        </div>
        <button class="btn">Login</button>
    </div>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Gamified Login</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            background: #1e1e2e;
            color: white;
        }
        .login-container {
            background: #282a36;
            padding: 20px;
            border-radius: 10px;
            text-align: center;
            width: 300px;
        }
        .progress-bar {
            width: 100%;
            background: #444;
            border-radius: 5px;
            margin: 10px 0;
            overflow: hidden;
        }
        .progress {
            height: 10px;
            width: 0;
            background: #4caf50;
            transition: width 0.8s;
        }
        input {
            width: 94%;
            padding: 10px;
            margin: 10px 0;
            border: none;
            border-radius: 5px;
        }
        button {
            width: 100%;
            padding: 10px;
            background: #ff9800;
            border: none;
            border-radius: 5px;
            color: white;
            cursor: pointer;
        }
        .achievement {
            display: none;
            background: #ffc107;
            padding: 10px;
            margin-top: 10px;
            border-radius: 5px;
            color: #333;
        }
    </style>
</head>
<body>
    <div class="login-container">
        <h2>Gamified Login</h2>
        <div class="progress-bar">
            <div class="progress"></div>
        </div>
        <input type="text" id="username" placeholder="Username">
        <input type="password" id="password" placeholder="Password">
        <button onclick="login()">Login</button>
        <div class="achievement">🎉 Achievement Unlocked: First Login!</div>
    </div>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Gamified Login</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            background: linear-gradient(to right, #ff7e5f, #feb47b);
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100%;
            flex-direction: column;
            margin-top: 50%;
        }
        .game-container {
            position: absolute;
            width: 390px;
            height: 500px;
            background: ;
            border-radius: 10px;
            margin-bottom: 20px;
            overflow: hidden;
            display: block;
        }
        .target {
            width: 30px;
            height: 30px;
            background: red;
            border-radius: 50%;
            position: absolute;
            cursor: pointer;
        }
        .login-container {
            background: white;
            padding: 20px;
            border-radius: 10px;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
            text-align: center;
            display: none;
            width: 250px;
        }
        button {
            background: #ff7e5f;
            color: white;
            border: none;
            padding: 10px;
            border-radius: 5px;
            cursor: pointer;
            width: 100%;
        }
        button:hover {
            background: #feb47b;
        }
        
        input{
          width: 94%;
        }
    </style>
</head>
<body>
    <div class="game-container">
        <div class="target" id="target"></div>
    </div>
    <p id="reward-message"></p>
    <div class="login-container" id="login-container">
        <h2>Login</h2>
        <input type="text" placeholder="Username"><br><br>
        <input type="password" placeholder="Password"><br><br>
        <button>Login</button>
    </div>

target.addEventListener('click', () => {
            rewardMessage.innerText = "Bonus Reward Unlocked! You can now log in.";
            loginContainer.style.display = 'block';
            target.style.display = 'none';
            gameContainer.style.display = 'none';
            
        });
    </script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Gamified Login</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            background-color: #2c3e50;
            color: white;
            text-align: center;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            flex-direction: column;
        }
        .login-container {
            background: #34495e;
            padding: 20px;
            border-radius: 10px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
            width: 75%;
        }
        input {
            display: block;
            margin: 10px auto;
            padding: 10px;
            width: 80%;
            border: none;
            border-radius: 5px;
        }
        button {
            background: #e74c3c;
            color: white;
            border: none;
            padding: 10px 20px;
            border-radius: 5px;
            cursor: pointer;
            width: 88%;
            margin-top: 10px;
        }
        .game-container {
            margin-top: 20px;
        }
        .game-button {
            background: orange;
            padding: 10px 20px;
            font-size: 18px;
        }
    </style>
</head>
<body>
    <div class="login-container">
        <h2>Login</h2>
        <input type="text" id="username" placeholder="Username">
        <input type="password" id="password" placeholder="Password">
        <button onclick="login()">Login</button>
    </div>
    
    <div class="game-container">
        <h3>Mini-Game: Click When Green!</h3>
        <button id="gameButton" class="game-button" onclick="checkReaction()">Wait...</button>
    </div>

let gameButton = document.getElementById("gameButton");
        let startTime;

setTimeout(() => {
            gameButton.innerText = "Click Now!";
            gameButton.style.background = "#2ecc71";
            startTime = new Date().getTime();
        }, Math.random() * 5000 + 2000);

function checkReaction() {
            if (!startTime) {
                alert("Too soon! Wait for green.");
                return;
            }
            let reactionTime = new Date().getTime() - startTime;
            alert("Your reaction time: " + reactionTime + "ms");
        }
    </script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Gamified Login</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100%;
            background: linear-gradient(to right, #ff9966, #ff5e62);
            margin-top: 50%;
        }
        .container {
            text-align: center;
            background: white;
            padding: 20px;
            border-radius: 10px;
            box-shadow: 0 4px 8px rgba(0,0,0,0.2);
            width: 70%;
        }
        .game-box {
            margin: 10px auto;
            width: 80px;
            height: 50px;
            background-color: blue;
            cursor: pointer;
            transition: background 0.3s;
        }
        .game-box.clicked {
            background-color: green;
        }
        input {
            display: block;
            margin: 10px auto;
            padding: 10px;
            width: 80%;
        }
        button {
            padding: 10px 20px;
            background-color: #28a745;
            color: white;
            border: none;
            cursor: pointer;
            margin-top: 10px;
        }
        button:disabled {
            background-color: grey;
            cursor: not-allowed;
        }
    </style>
</head>
<body>
    <div class="container">
        <h2>Gamified Login</h2>
        <p>Click the box to unlock login</p>
        <div id="game-box" class="game-box" onclick="unlockLogin()"></div>
        <input type="text" id="username" placeholder="Username" disabled>
        <input type="password" id="password" placeholder="Password" disabled>
        <button id="loginBtn" disabled>Login</button>
    </div>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>AR Login</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            background: linear-gradient(to right, #141e30, #243b55);
            color: white;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
        }
        .login-container {
            background: rgba(255, 255, 255, 0.1);
            padding: 20px;
            border-radius: 10px;
            text-align: center;
            box-shadow: 0px 0px 10px rgba(255, 255, 255, 0.3);
        }
        button {
            background: #00c6ff;
            border: none;
            padding: 10px 20px;
            color: white;
            cursor: pointer;
            font-size: 16px;
            border-radius: 5px;
        }
        button:hover {
            background: #0072ff;
        }
    </style>
</head>
<body>
    <div class="login-container">
        <h2>Augmented Reality Login</h2>
        <p>Scan QR Code or use Face Recognition</p>
        <button onclick="startARLogin()">Start AR Login</button>
        <video id="ar-video" width="300" height="200" style="display:none;"></video>
    </div>
    
    <script>
        function startARLogin() {
            let video = document.getElementById('ar-video');
            video.style.display = 'block';
            
            navigator.mediaDevices.getUserMedia({ video: true })
                .then(stream => {
                    video.srcObject = stream;
                    video.play();
                    alert('AR Login Initialized');
                })
                .catch(error => {
                    console.error('Error accessing camera:', error);
                });
        }
    </script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Hand-Drawn Login</title>
    <style>
        @import url('https://fonts.googleapis.com/css2?family=Gloria+Hallelujah&display=swap');
        
        body {
            font-family: 'Gloria Hallelujah', cursive;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100%;
            margin-top: 50%;
            background-color: #f4f4f4;
        }
        .login-container {
            background: white;
            padding: 20px;
            border-radius: 10px;
            box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.1);
            text-align: center;
            border: 2px dashed black;
            width: 75%;
        }
        .login-container h2 {
            font-size: 24px;
            margin-bottom: 20px;
        }
        input {
            width: 94%;
            padding: 10px;
            margin: 10px 0;
            border: 2px solid black;
            border-radius: 5px;
            font-size: 16px;
        }
        button {
            background: #ffcc00;
            border: 2px solid black;
            padding: 10px 20px;
            cursor: pointer;
            font-size: 16px;
            border-radius: 5px;
        }
        button:hover {
            background: #ffaa00;
        }
    </style>
</head>
<body>
    <div class="login-container">
        <h2>Login</h2>
        <input type="text" id="username" placeholder="Username">
        <input type="password" id="password" placeholder="Password">
        <button onclick="login()">Login</button>
        <p id="message"></p>
    </div>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Hand-Drawn Login</title>
    <style>
        @import url('https://fonts.googleapis.com/css2?family=Shadows+Into+Light&display=swap');
        
        body {
            font-family: 'Shadows Into Light', cursive;
            background: #f5f5dc;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
        }
        .login-container {
            background: white;
            padding: 20px;
            border: 3px solid black;
            border-radius: 10px;
            box-shadow: 5px 5px 0 black;
            text-align: center;
        }
        h2 {
            font-size: 24px;
        }
        input {
            font-family: inherit;
            font-size: 16px;
            padding: 8px;
            border: 2px solid black;
            border-radius: 5px;
            display: block;
            width: 90%;
            margin: 10px auto;
            outline: none;
        }
        button {
            background: black;
            color: white;
            border: none;
            padding: 10px;
            cursor: pointer;
            font-size: 16px;
            border-radius: 5px;
            box-shadow: 3px 3px 0 black;
        }
        button:hover {
            background: gray;
        }
    </style>
</head>
<body>
    <div class="login-container">
        <h2>Login</h2>
        <input type="text" id="username" placeholder="Username">
        <input type="password" id="password" placeholder="Password">
        <button onclick="login()">Login</button>
        <p id="message"></p>
    </div>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Border Animation Login</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: Arial, sans-serif;
        }
        body {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            background: #121212;
        }
        .login-container {
            position: relative;
            width: 350px;
            padding: 40px;
            background: #222;
            border-radius: 10px;
            text-align: center;
            overflow: hidden;
        }
        .login-container::before {
            content: "";
            position: absolute;
            top: -50%;
            left: -50%;
            width: 200%;
            height: 200%;
            background: linear-gradient(45deg, cyan, magenta);
            animation: rotateBorder 4s linear infinite;
            z-index: -1;
        }
        @keyframes rotateBorder {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }
        .input-box {
            position: relative;
            margin: 20px 0;
        }
        .input-box input {
            width: 100%;
            padding: 10px;
            background: transparent;
            border: none;
            border-bottom: 2px solid #fff;
            outline: none;
            color: #fff;
            font-size: 18px;
            transition: 0.3s;
        }
        .input-box input:focus {
            border-bottom: 2px solid cyan;
            box-shadow: 0 2px 10px cyan;
        }
        .login-btn {
            width: 100%;
            padding: 10px;
            border: none;
            background: cyan;
            color: #000;
            font-size: 18px;
            cursor: pointer;
            border-radius: 5px;
            transition: 0.3s;
        }
        .login-btn:hover {
            background: magenta;
            color: #fff;
        }
    </style>
</head>
<body>
    <div class="login-container">
        <h2 style="color: white;">Login</h2>
        <div class="input-box">
            <input type="text" id="username" placeholder="Username">
        </div>
        <div class="input-box">
            <input type="password" id="password" placeholder="Password">
        </div>
        <button class="login-btn" onclick="login()">Login</button>
    </div>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Border Animation Login</title>
    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600&display=swap">
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Poppins', sans-serif;
        }
        body {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            background: #111;
        }
        .login-container {
            position: relative;
            padding: 40px;
            background: #222;
            border-radius: 10px;
            box-shadow: 0 0 15px rgba(0, 255, 255, 0.5);
            overflow: hidden;
        }
        .login-container h2 {
            color: #fff;
            text-align: center;
            margin-bottom: 20px;
        }
        .input-box {
            position: relative;
            margin: 20px 0;
        }
        .input-box input {
            width: 100%;
            padding: 12px;
            background: transparent;
            border: none;
            border-bottom: 2px solid #888;
            color: #fff;
            outline: none;
            font-size: 16px;
            transition: 0.3s;
        }
        .input-box input:focus {
            border-bottom: 2px solid cyan;
        }
        .animated-border {
            position: absolute;
            width: 100%;
            height: 2px;
            background: cyan;
            bottom: 0;
            left: -120%;
            transition: 1s;
        }
        .input-box input:focus ~ .animated-border {
            left: 0;
        }
        .btn {
            width: 100%;
            padding: 10px;
            background: cyan;
            border: none;
            color: #111;
            font-size: 18px;
            font-weight: bold;
            cursor: pointer;
            transition: 0.3s;
            border-radius: 5px;
        }
        .btn:hover {
            background: #00ffffaa;
        }
    </style>
</head>
<body>
    <div class="login-container">
        <h2>Login</h2>
        <div class="input-box">
            <input type="text" placeholder="Username" required>
            <div class="animated-border"></div>
        </div>
        <div class="input-box">
            <input type="password" placeholder="Password" required>
            <div class="animated-border"></div>
        </div>
        <button class="btn">Login</button>
    </div>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Border Animation Login</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Poppins', sans-serif;
        }
        body {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            background: #0f0c29;
            background: linear-gradient(45deg, #0f0c29, #302b63, #24243e);
        }
        .login-box {
            position: relative;
            width: 350px;
            padding: 40px;
            background: rgba(255, 255, 255, 0.1);
            backdrop-filter: blur(10px);
            border-radius: 10px;
            box-shadow: 0 0 15px rgba(0, 0, 0, 0.3);
            text-align: center;
        }
        .login-box h2 {
            color: #fff;
            margin-bottom: 20px;
        }
        .input-box {
            position: relative;
            margin-bottom: 30px;
        }
        .input-box input {
            width: 100%;
            padding: 10px;
            background: transparent;
            border: none;
            outline: none;
            color: #fff;
            font-size: 18px;
            border-bottom: 2px solid #fff;
        }
        .input-box label {
            position: absolute;
            left: 0;
            bottom: 10px;
            font-size: 18px;
            color: rgba(255, 255, 255, 0.7);
            transition: 0.5s;
        }
        .input-box input:focus ~ label,
        .input-box input:valid ~ label {
            bottom: 35px;
            font-size: 14px;
            color: #ff8c00;
        }
        .input-box span {
            position: absolute;
            width: 100%;
            height: 2px;
            background: #ff8c00;
            left: 0;
            bottom: 0;
            transform: scaleX(0);
            transition: 0.5s;
        }
        .input-box input:focus ~ span {
            transform: scaleX(1);
        }
        .btn {
            width: 100%;
            padding: 10px;
            background: #ff8c00;
            border: none;
            font-size: 18px;
            color: #fff;
            cursor: pointer;
            transition: 0.3s;
        }
        .btn:hover {
            background: #e07b00;
        }
    </style>
</head>
<body>
    <div class="login-box">
        <h2>Login</h2>
        <form>
            <div class="input-box">
                <input type="text" required>
                <label>Username</label>
                <span></span>
            </div>
            <div class="input-box">
                <input type="password" required>
                <label>Password</label>
                <span></span>
            </div>
            <button type="submit" class="btn">Login</button>
        </form>
    </div>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>3D Perspective Login</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Arial', sans-serif;
        }
        body {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            background: linear-gradient(135deg, #1f1c2c, #928dab);
            perspective: 1000px;
        }
        .container {
            width: 300px;
            height: 350px;
            background: rgba(255, 255, 255, 0.1);
            border-radius: 15px;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
            backdrop-filter: blur(10px);
            display: flex;
            flex-direction: column;
            align-items: center;
            transform-style: preserve-3d;
            transition: transform 0.5s;
        }
        .container:hover {
            transform: rotateY(10deg) rotateX(10deg);
        }
        h2 {
            color: #fff;
            margin: 20px 0;
        }
        .input-box {
            width: 80%;
            margin: 10px 0;
            position: relative;
        }
        input {
            width: 100%;
            padding: 10px;
            background: transparent;
            border: none;
            border-bottom: 2px solid #fff;
            outline: none;
            color: #fff;
            font-size: 16px;
        }
        input:focus {
            border-bottom: 2px solid #ffcc00;
        }
        .btn {
            width: 80%;
            padding: 10px;
            margin: 20px 0;
            border: none;
            background: #ffcc00;
            color: #333;
            font-size: 18px;
            cursor: pointer;
            transition: 0.3s;
            border-radius: 5px;
        }
        .btn:hover {
            background: #ff9900;
        }
        .links {
            color: #fff;
            margin-top: 10px;
        }
        .links a {
            color: #ffcc00;
            text-decoration: none;
            font-weight: bold;
        }
    </style>
</head>
<body>

<div class="container">
        <h2>Login</h2>
        <div class="input-box">
            <input type="text" placeholder="Username">
        </div>
        <div class="input-box">
            <input type="password" placeholder="Password">
        </div>
        <button class="btn">Login</button>
        <div class="links">
            <p>Forgot Password? <a href="#">Click Here</a></p>
        </div>
    </div>

document.querySelector(".container").addEventListener("mouseleave", (e) => {
            e.currentTarget.style.transform = "rotateY(0deg) rotateX(0deg)";
        });
    </script>

</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Fullscreen Login Modal</title>
    <style>
        /* Basic styling */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: Arial, sans-serif;
        }

body {
            background: url('https://source.unsplash.com/random/1600x900') no-repeat center center/cover;
            height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
        }

/* Blur background effect */
        .modal-active body::before {
            content: "";
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.5);
            backdrop-filter: blur(10px);
            z-index: 1;
        }

/* Button to open modal */
        .login-btn {
            padding: 12px 24px;
            font-size: 18px;
            border: none;
            background: #007BFF;
            color: white;
            border-radius: 5px;
            transition: 0.3s;
        }

.login-btn:hover {
            background: #0056b3;
        }

/* Modal styling */
        .modal {
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            background: white;
            padding: 30px;
            width: 350px;
            border-radius: 10px;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
            text-align: center;
            display: none;
            z-index: 2;
        }

.modal h2 {
            margin-bottom: 20px;
        }

.modal input {
            width: 100%;
            padding: 10px;
            margin: 10px 0;
            border: 1px solid #ccc;
            border-radius: 5px;
        }

.modal button {
            width: 100%;
            padding: 10px;
            border: none;
            background: #28a745;
            color: white;
            font-size: 16px;
            border-radius: 5px;
            cursor: pointer;
            transition: 0.3s;
        }

.modal button:hover {
            background: #218838;
        }

.close-btn {
            background: #dc3545;
            margin-top: 10px;
        }

.close-btn:hover {
            background: #c82333;
        }

</style>
</head>
<body>

<button class="login-btn" onclick="openModal()">Login</button>

<div class="modal" id="loginModal">
        <h2>Login</h2>
        <input type="text" placeholder="Username" required>
        <input type="password" placeholder="Password" required>
        <button>Login</button>
        <button class="close-btn" onclick="closeModal()">Close</button>
    </div>

function closeModal() {
            document.getElementById('loginModal').style.display = 'none';
            document.body.classList.remove('modal-active');
        }
    </script>

</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Sticky Header Login</title>
    <style>
        /* Reset and base styles */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: Arial, sans-serif;
        }

body {
            background-color: #f4f4f4;
        }

/* Sticky header */
        .header {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            background: #333;
            color: #fff;
            padding: 10px 20px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            z-index: 1000;
        }

.header h1 {
            font-size: 20px;
        }

/* Login button */
        .login-btn {
            background: #ff6b6b;
            border: none;
            color: white;
            padding: 8px 15px;
            cursor: pointer;
            border-radius: 5px;
            transition: 0.3s;
        }

.login-btn:hover {
            background: #ff4b4b;
        }

/* Login form container */
        .login-form {
            position: fixed;
            top: 80px;
            right: 20px;
            width: 250px;
            background: white;
            padding: 15px;
            border-radius: 5px;
            box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.2);
            display: none;
        }

.login-form input {
            width: 100%;
            padding: 10px;
            margin: 5px 0;
            border: 1px solid #ccc;
            border-radius: 5px;
        }

.login-form button {
            width: 100%;
            background: #ff6b6b;
            border: none;
            color: white;
            padding: 10px;
            margin-top: 10px;
            border-radius: 5px;
            cursor: pointer;
            transition: 0.3s;
        }

.login-form button:hover {
            background: #ff4b4b;
        }
    </style>
</head>
<body>

<div class="header">
        <h1>My Website</h1>
        <button class="login-btn" onclick="toggleLogin()">Login</button>
    </div>

<div class="login-form" id="loginForm">
        <h3>Login</h3>
        <input type="text" placeholder="Username">
        <input type="password" placeholder="Password">
        <button>Submit</button>
    </div>

</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Glass Login Form</title>
    <style>
        /* Import Google Font */
        @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600&display=swap');

* {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Poppins', sans-serif;
        }

/* Background with Blur Effect */
        body {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            background: url('sea.jpg') no-repeat center center/cover;
            backdrop-filter: blur(10px);
        }

/* Glassmorphism Login Box */
        .login-container {
            background: rgba(255, 255, 255, 0.1);
            padding: 40px;
            border-radius: 15px;
            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
            backdrop-filter: blur(10px);
            border: 1px solid rgba(255, 255, 255, 0.2);
            width: 350px;
            text-align: center;
        }

.login-container h2 {
            color: #fff;
            margin-bottom: 20px;
        }

.input-box {
            width: 100%;
            margin: 10px 0;
        }

.input-box input {
            width: 100%;
            padding: 10px;
            background: rgba(255, 255, 255, 0.2);
            border: none;
            border-radius: 5px;
            color: #fff;
            outline: none;
        }

.input-box input::placeholder {
            color: rgba(255, 255, 255, 0.7);
        }

.btn {
            width: 100%;
            padding: 10px;
            background: rgba(255, 255, 255, 0.3);
            border: none;
            border-radius: 5px;
            color: #fff;
            cursor: pointer;
            transition: 0.3s;
        }

.btn:hover {
            background: rgba(255, 255, 255, 0.5);
        }

.error {
            color: red;
            font-size: 14px;
            display: none;
        }
    </style>
</head>
<body>

<div class="login-container">
        <h2>Login</h2>
        <div class="input-box">
            <input type="text" id="username" placeholder="Username">
            <p class="error" id="userError">Username required</p>
        </div>
        <div class="input-box">
            <input type="password" id="password" placeholder="Password">
            <p class="error" id="passError">Password required</p>
        </div>
        <button class="btn" onclick="validateLogin()">Login</button>
    </div>

if (username === "") {
                userError.style.display = "block";
            } else {
                userError.style.display = "none";
            }

if (password === "") {
                passError.style.display = "block";
            } else {
                passError.style.display = "none";
            }

if (username !== "" && password !== "") {
                alert("Login Successful!");
            }
        }
    </script>

</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Flip Card Login | Signup</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: Arial, sans-serif;
        }
        body {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            background: linear-gradient(135deg, #ff9a9e, #fad0c4);
        }
        .container {
            width: 350px;
            height: 350px;
            position: relative;
            perspective: 1000px;
        }
        .card {
            width: 100%;
            height: 100%;
            position: absolute;
            transform-style: preserve-3d;
            transition: transform 0.6s ease-in-out;
        }
        .flip {
            transform: rotateY(180deg);
        }
        .front, .back {
            width: 100%;
            height: 100%;
            position: absolute;
            backface-visibility: hidden;
            background: white;
            border-radius: 10px;
            box-shadow: 0 10px 20px rgba(0,0,0,0.2);
            padding: 30px;
            text-align: center;
        }
        .back {
            transform: rotateY(180deg);
        }
        h2 {
            margin-bottom: 20px;
            color: #333;
        }
        input {
            width: 100%;
            padding: 10px;
            margin: 10px 0;
            border: 1px solid #ccc;
            border-radius: 5px;
        }
        button {
            width: 100%;
            padding: 10px;
            background: #ff758c;
            border: none;
            color: white;
            font-size: 16px;
            border-radius: 5px;
            cursor: pointer;
            transition: 0.3s;
        }
        button:hover {
            background: #ff5e6c;
        }
        .switch {
            margin-top: 15px;
            color: #666;
            cursor: pointer;
        }
    </style>
</head>
<body>

<div class="container">
        <div class="card" id="card">
            
            <div class="front">
                <h2>Login</h2>
                <input type="email" placeholder="Email" required>
                <input type="password" placeholder="Password" required>
                <button>Login</button>
                <p class="switch" onclick="flipCard()">Don't have an account? Sign up</p>
            </div>

<div class="back">
                <h2>Signup</h2>
                <input type="text" placeholder="Full Name" required>
                <input type="email" placeholder="Email" required>
                <input type="password" placeholder="Password" required>
                <button>Sign Up</button>
                <p class="switch" onclick="flipCard()">Already have an account? Login</p>
            </div>
        </div>
    </div>

</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Carousel Login Page</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <style>
        body, html {
            height: 100%;
            margin: 0;
            overflow: hidden;
        }
        .carousel, .carousel-inner, .carousel-item {
            height: 100vh;
        }
        .carousel-item img {
            object-fit: cover;
            height: 100vh;
            width: 100%;
            filter: brightness(80%);
        }
        .login-container {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            background: rgba(255, 255, 255, 0.1);
            backdrop-filter: blur(10px);
            padding: 30px;
            border-radius: 10px;
            text-align: center;
            color: white;
            width: 300px;
        }
        .login-container h2 {
            margin-bottom: 20px;
        }
        .form-control {
            margin-bottom: 10px;
            background: transparent;
            border: 1px solid white;
            color: white;
        }
        .form-control::placeholder {
            color: rgba(255, 255, 255, 0.7);
        }
        .btn-primary {
            background-color: rgba(255, 255, 255, 0.3);
            border: none;
        }
        .btn-primary:hover {
            background-color: rgba(255, 255, 255, 0.5);
        }
    </style>
</head>
<body>

<div id="backgroundCarousel" class="carousel slide" data-bs-ride="carousel">
        <div class="carousel-inner">
            <div class="carousel-item active">
                <img src="mountain.jpg" alt="TECH">
            </div>
            <div class="carousel-item">
                <img src="sea.jpg" alt="Nature">
            </div>
            <div class="carousel-item">
                <img src="sunset.jpg" alt="Abstract">
            </div>
        </div>
    </div>

<div class="login-container">
        <h2>Login</h2>
        <form>
            <input type="text" class="form-control" placeholder="Username" required>
            <input type="password" class="form-control" placeholder="Password" required>
            <button type="submit" class="btn btn-primary w-100">Login</button>
        </form>
    </div>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Login Page</title>
    <style>
        /* Google Font */
        @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600&display=swap');

* {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Poppins', sans-serif;
        }

body {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            background: linear-gradient(to right, #4facfe, #00f2fe);
        }

.login-container {
            background: #fff;
            padding: 30px;
            border-radius: 10px;
            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
            width: 350px;
            text-align: center;
        }

.login-container h2 {
            margin-bottom: 20px;
            font-weight: 600;
        }

.input-group {
            margin-bottom: 15px;
            text-align: left;
        }

.input-group label {
            font-size: 14px;
            font-weight: 600;
            display: block;
            margin-bottom: 5px;
        }

.input-group input {
            width: 100%;
            padding: 10px;
            border: 1px solid #ccc;
            border-radius: 5px;
            font-size: 16px;
        }

.gradient-btn {
            width: 100%;
            padding: 12px;
            border: none;
            border-radius: 5px;
            font-size: 16px;
            font-weight: 600;
            color: #fff;
            cursor: pointer;
            background: linear-gradient(45deg, #ff416c, #ff4b2b);
            transition: 0.3s ease;
        }

.gradient-btn:hover {
            background: linear-gradient(45deg, #ff4b2b, #ff416c);
            transform: scale(1.05);
        }

.error {
            color: red;
            font-size: 14px;
            margin-top: 5px;
        }
    </style>
</head>
<body>

<div class="login-container">
        <h2>Login</h2>
        <form id="loginForm">
            <div class="input-group">
                <label for="username">Username</label>
                <input type="text" id="username" placeholder="Enter username">
                <span class="error" id="usernameError"></span>
            </div>
            <div class="input-group">
                <label for="password">Password</label>
                <input type="password" id="password" placeholder="Enter password">
                <span class="error" id="passwordError"></span>
            </div>
            <button type="submit" class="gradient-btn">Login</button>
        </form>
    </div>

// Reset errors
            document.getElementById("usernameError").innerText = "";
            document.getElementById("passwordError").innerText = "";

let username = document.getElementById("username").value.trim();
            let password = document.getElementById("password").value.trim();
            let isValid = true;

if (username === "") {
                document.getElementById("usernameError").innerText = "Username is required!";
                isValid = false;
            }
            if (password === "") {
                document.getElementById("passwordError").innerText = "Password is required!";
                isValid = false;
            }

if (isValid) {
                alert("Login successful!");
                // Here, you can add actual login functionality
            }
        });
    </script>

</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Beautiful Login Page</title>
    <style>
        /* Import Google Font */
        @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600&display=swap');

* {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Poppins', sans-serif;
        }

body {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            background: linear-gradient(135deg, #667eea, #764ba2);
        }

.container {
            display: flex;
            background: white;
            border-radius: 10px;
            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
            overflow: hidden;
            width: 750px;
            max-width: 90%;
        }

.animation {
            width: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 20px;
            background: #f5f5f5;
        }

#lottie-animation {
            width: 100%;
            height: 100%;
        }

.login-form {
            width: 50%;
            padding: 40px;
            display: flex;
            flex-direction: column;
            justify-content: center;
        }

.login-form h2 {
            margin-bottom: 15px;
            font-weight: 600;
            color: #333;
            text-align: center;
        }

.input-group {
            margin-bottom: 15px;
        }

.input-group label {
            font-size: 14px;
            color: #666;
        }

.input-group input {
            width: 100%;
            padding: 10px;
            margin-top: 5px;
            border: 1px solid #ccc;
            border-radius: 5px;
            outline: none;
        }

.btn {
            width: 100%;
            background: #667eea;
            color: white;
            padding: 10px;
            border: none;
            border-radius: 5px;
            cursor: pointer;
            font-size: 16px;
            transition: background 0.3s;
        }

.btn:hover {
            background: #5a67d8;
        }

.signup {
            text-align: center;
            margin-top: 10px;
        }

.signup a {
            color: #667eea;
            text-decoration: none;
            font-weight: 600;
        }

.signup a:hover {
            text-decoration: underline;
        }

/* Responsive */
        @media (max-width: 768px) {
            .container {
                flex-direction: column;
            }
            .animation {
                width: 100%;
                height: 200px;
            }
            .login-form {
                width: 100%;
            }
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="animation">
            <div id="lottie-animation"></div>
        </div>
        <div class="login-form">
            <h2>Login</h2>
            <form>
                <div class="input-group">
                    <label>Email</label>
                    <input type="email" placeholder="Enter your email" required>
                </div>
                <div class="input-group">
                    <label>Password</label>
                    <input type="password" placeholder="Enter your password" required>
                </div>
                <button type="submit" class="btn">Login</button>
            </form>
            <div class="signup">
                Don't have an account? <a href="#">Sign up</a>
            </div>
        </div>
    </div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/lottie-web/5.9.6/lottie.min.js"></script>
    <script>
        lottie.loadAnimation({
            container: document.getElementById('lottie-animation'), // The HTML element
            renderer: 'svg', // Render format (svg, canvas, html)
            loop: true, // Loop the animation
            autoplay: true, // Auto-play on load
            path: 'https://assets10.lottiefiles.com/packages/lf20_mjlh3hcy.json' // JSON file URL
        });
    </script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Holographic Login</title>
    <style>
        /* Google Font */
        @import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700&display=swap');

/* Basic Reset */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Orbitron', sans-serif;
        }

/* Background */
        body {
            background: radial-gradient(circle, #0f0f0f, #080808);
            color: #fff;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            overflow: hidden;
        }

/* Holographic Container */
        .login-container {
            position: relative;
            width: 350px;
            padding: 20px;
            border-radius: 10px;
            text-align: center;
            box-shadow: 0 0 15px cyan;
            background: rgba(0, 0, 0, 0.8);
        }

.login-container h2 {
            font-size: 24px;
            color: cyan;
            text-transform: uppercase;
            margin-bottom: 20px;
            animation: glow 1.5s infinite alternate;
        }

/* Input Fields */
        .input-box {
            position: relative;
            margin: 20px 0;
        }

.input-box input {
            width: 100%;
            padding: 10px;
            background: transparent;
            border: none;
            outline: none;
            color: cyan;
            font-size: 18px;
            border-bottom: 2px solid cyan;
        }

.input-box label {
            position: absolute;
            top: 10px;
            left: 10px;
            font-size: 16px;
            color: cyan;
            transition: 0.5s;
        }

.input-box input:focus ~ label,
        .input-box input:valid ~ label {
            top: -15px;
            font-size: 12px;
            color: lime;
        }

/* Holographic Button */
        .login-btn {
            width: 100%;
            padding: 10px;
            background: linear-gradient(90deg, cyan, magenta);
            border: none;
            outline: none;
            font-size: 18px;
            font-weight: bold;
            cursor: pointer;
            border-radius: 5px;
            transition: 0.5s;
            text-transform: uppercase;
        }

.login-btn:hover {
            box-shadow: 0 0 15px cyan, 0 0 30px magenta;
            transform: scale(1.05);
        }

/* Holographic Animation */
        @keyframes glow {
            0% { text-shadow: 0 0 10px cyan; }
            100% { text-shadow: 0 0 20px magenta; }
        }
    </style>
</head>
<body>

<div class="login-container">
        <h2>Holographic Login</h2>
        <form>
            <div class="input-box">
                <input type="text" required>
                <label>Username</label>
            </div>
            <div class="input-box">
                <input type="password" required>
                <label>Password</label>
            </div>
            <button type="submit" class="login-btn">Login</button>
        </form>
    </div>

</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Holographic Login</title>
    <style>
        @import url('https://fonts.googleapis.com/css2?family=Orbitron&display=swap');

* {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Orbitron', sans-serif;
        }

body {
            background: radial-gradient(circle, #0f0c29, #302b63, #24243e);
            height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
            overflow: hidden;
        }

.container {
            background: rgba(0, 0, 0, 0.5);
            padding: 40px;
            border-radius: 10px;
            box-shadow: 0px 0px 20px cyan;
            text-align: center;
            position: relative;
            overflow: hidden;
        }

h2 {
            color: cyan;
            text-shadow: 0px 0px 10px cyan;
        }

.input-box {
            position: relative;
            margin: 20px 0;
        }

.input-box input {
            width: 100%;
            padding: 10px;
            background: transparent;
            border: 2px solid cyan;
            outline: none;
            color: cyan;
            font-size: 18px;
            border-radius: 5px;
            text-align: center;
        }

.input-box input::placeholder {
            color: rgba(0, 255, 255, 0.5);
        }

.holographic-btn {
            display: inline-block;
            padding: 12px 25px;
            font-size: 18px;
            color: cyan;
            text-transform: uppercase;
            background: transparent;
            border: 2px solid cyan;
            cursor: pointer;
            box-shadow: 0px 0px 10px cyan;
            transition: all 0.3s ease-in-out;
        }

.holographic-btn:hover {
            background: cyan;
            color: black;
            text-shadow: none;
            box-shadow: 0px 0px 20px cyan, 0px 0px 40px cyan;
        }

.glow {
            position: absolute;
            width: 100%;
            height: 100%;
            top: 0;
            left: 0;
            background: radial-gradient(circle, rgba(0, 255, 255, 0.2), transparent);
            animation: moveGlow 3s linear infinite alternate;
        }

@keyframes moveGlow {
            0% {
                transform: translateY(-20px);
            }
            100% {
                transform: translateY(20px);
            }
        }

.hologram-text {
          margin-top: 10px;
            font-size: 14px;
            color: rgba(0, 255, 255, 0.8);
            text-shadow: 0px 0px 5px cyan;
            animation: flicker 1.5s infinite alternate;
        }

@keyframes flicker {
            0% { opacity: 1; }
            50% { opacity: 0.7; }
            100% { opacity: 1; }
        }
    </style>
</head>
<body>

<div class="container">
        <div class="glow"></div>
        <h2>Holographic Login</h2>
        <div class="input-box">
            <input type="text" placeholder="Username">
        </div>
        <div class="input-box">
            <input type="password" placeholder="Password">
        </div>
        <button class="holographic-btn">Login</button>
        <p class="hologram-text">Secure Access Granted</p>
    </div>

</body>
</html>

* {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Poppins', sans-serif;
        }

body {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            background: linear-gradient(135deg, rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.3)), url('AD.jpg');
            background-size: cover;
            background-position: center;
        }

.login-container {
            background: rgba(255, 255, 255, 0.1);
            padding: 30px;
            border-radius: 10px;
            backdrop-filter: blur(10px);
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
            width: 350px;
            text-align: center;
            color: white;
        }

.login-container h2 {
            margin-bottom: 20px;
            font-weight: 600;
        }

.input-group {
            margin-bottom: 15px;
            text-align: left;
        }

.input-group label {
            font-size: 14px;
            display: block;
            margin-bottom: 5px;
        }

.input-group input {
            width: 100%;
            padding: 10px;
            border: none;
            border-radius: 5px;
            outline: none;
        }

.login-btn {
            width: 100%;
            padding: 10px;
            background: #ff5722;
            border: none;
            border-radius: 5px;
            color: white;
            font-size: 16px;
            cursor: pointer;
            transition: background 0.3s;
        }

.login-btn:hover {
            background: #e64a19;
        }

.error-message {
            color: #ffcc00;
            font-size: 14px;
            margin-top: 10px;
        }
    </style>
</head>
<body>

<div class="login-container">
        <h2>Login</h2>
        <div class="input-group">
            <label for="username">Username</label>
            <input type="text" id="username" placeholder="Enter your username">
        </div>
        <div class="input-group">
            <label for="password">Password</label>
            <input type="password" id="password" placeholder="Enter your password">
        </div>
        <button class="login-btn" onclick="validateLogin()">Login</button>
        <p class="error-message" id="error-msg"></p>
    </div>

if (username === "admin" && password === "password") {
                alert("Login successful!");
                errorMsg.textContent = "";
            } else {
                errorMsg.textContent = "Invalid username or password";
            }
        }
    </script>

</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Handwritten Font Login</title>
    <style>
        @import url('https://fonts.googleapis.com/css2?family=Sacramento&display=swap');

* {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Sacramento', cursive;
        }

body {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            background: linear-gradient(135deg, #ffafbd, #ffc3a0);
        }

.login-container {
            background: white;
            padding: 30px;
            border-radius: 15px;
            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
            text-align: center;
            width: 350px;
        }

.login-container h2 {
            font-size: 32px;
            color: #333;
            margin-bottom: 20px;
        }

.input-group {
            margin-bottom: 15px;
            text-align: left;
        }

.input-group label {
            display: block;
            font-size: 20px;
            color: #555;
        }

.input-group input {
            width: 100%;
            padding: 10px;
            font-size: 18px;
            border: 2px solid #ffafbd;
            border-radius: 10px;
            outline: none;
            margin-top: 5px;
        }

.btn {
            width: 100%;
            padding: 12px;
            background: #ffafbd;
            border: none;
            font-size: 20px;
            border-radius: 10px;
            color: white;
            cursor: pointer;
            transition: 0.3s;
        }

.btn:hover {
            background: #ff758c;
        }

.message {
            margin-top: 10px;
            font-size: 18px;
            color: green;
            display: none;
        }
    </style>
</head>
<body>

<div class="login-container">
        <h2>Welcome Back</h2>
        <div class="input-group">
            <label for="username">Username</label>
            <input type="text" id="username" placeholder="Enter your username">
        </div>
        <div class="input-group">
            <label for="password">Password</label>
            <input type="password" id="password" placeholder="Enter your password">
        </div>
        <button class="btn" onclick="login()">Login</button>
        <p class="message" id="message">Login Successful!</p>
    </div>

if (username && password) {
                message.style.display = "block";
                message.textContent = "Login Successful!";
            } else {
                message.style.display = "block";
                message.style.color = "red";
                message.textContent = "Please fill all fields!";
            }
        }
    </script>

</body>
</html>

* {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Dancing Script', cursive;
        }

body {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            background: linear-gradient(135deg, #fbc2eb, #a6c1ee);
        }

.login-container {
            background: rgba(255, 255, 255, 0.8);
            padding: 20px;
            border-radius: 10px;
            box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
            text-align: center;
            width: 300px;
        }

h2 {
            font-size: 2rem;
            margin-bottom: 20px;
            color: #5a5a5a;
        }

.input-box {
            width: 100%;
            margin: 10px 0;
            padding: 10px;
            border: none;
            border-radius: 5px;
            font-size: 1.2rem;
            text-align: center;
        }

.btn {
            background: #ff758c;
            color: white;
            font-size: 1.5rem;
            border: none;
            padding: 10px;
            border-radius: 5px;
            cursor: pointer;
            transition: 0.3s;
        }

.btn:hover {
            background: #ff5c72;
        }

.message {
            color: red;
            font-size: 1rem;
            margin-top: 10px;
            display: none;
        }
    </style>
</head>
<body>

<div class="login-container">
        <h2>Welcome Back</h2>
        <input type="text" id="username" class="input-box" placeholder="Username">
        <input type="password" id="password" class="input-box" placeholder="Password">
        <button class="btn" onclick="validateLogin()">Login</button>
        <p class="message" id="errorMessage">Invalid username or password</p>
    </div>

if (user === "admin" && pass === "1234") {
                alert("Login Successful!");
            } else {
                errorMessage.style.display = "block";
            }
        }
    </script>

</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Retro Pixel Login</title>
    <style>
        @import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap');

* {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

body {
            background-color: #000;
            color: #fff;
            font-family: 'Press Start 2P', cursive;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
        }

.login-container {
            background: #222;
            padding: 20px;
            border: 8px solid #fff;
            border-radius: 10px;
            text-align: center;
            box-shadow: 8px 8px 0px #ffcc00;
        }

.login-container h2 {
            font-size: 18px;
            margin-bottom: 15px;
        }

.input-group {
            margin: 10px 0;
        }

input {
            width: 100%;
            padding: 10px;
            font-family: 'Press Start 2P', cursive;
            font-size: 12px;
            border: 4px solid #fff;
            background: #000;
            color: #ffcc00;
            text-align: center;
        }

button {
            width: 100%;
            padding: 10px;
            margin-top: 10px;
            font-size: 14px;
            font-family: 'Press Start 2P', cursive;
            border: 4px solid #fff;
            background: #ff0000;
            color: #fff;
            cursor: pointer;
            box-shadow: 4px 4px 0px #fff;
            transition: all 0.1s;
        }

button:active {
            box-shadow: 2px 2px 0px #fff;
            transform: translate(2px, 2px);
        }

.pixel-art {
            font-size: 30px;
        }
    </style>
</head>
<body>
    <div class="login-container">
        <div class="pixel-art">🎮</div>
        <h2>PIXEL LOGIN</h2>
        <div class="input-group">
            <input type="text" id="username" placeholder="USERNAME">
        </div>
        <div class="input-group">
            <input type="password" id="password" placeholder="PASSWORD">
        </div>
        <button onclick="login()">LOGIN</button>
    </div>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Particle Effect Login</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: Arial, sans-serif;
        }
        
        body {
            overflow: hidden;
            background: #111;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
        }
        
        canvas {
            position: absolute;
            top: 0;
            left: 0;
        }

.login-container {
            position: absolute;
            z-index: 2;
            background: rgba(255, 255, 255, 0.1);
            padding: 30px;
            border-radius: 10px;
            backdrop-filter: blur(10px);
            box-shadow: 0 0 10px rgba(255, 255, 255, 0.2);
            text-align: center;
            color: white;
        }

.login-container h2 {
            margin-bottom: 20px;
        }

.login-container input {
            width: 100%;
            padding: 10px;
            margin: 10px 0;
            border: none;
            border-radius: 5px;
            outline: none;
            background: rgba(255, 255, 255, 0.2);
            color: white;
        }

.login-container button {
            width: 100%;
            padding: 10px;
            border: none;
            border-radius: 5px;
            background: #ff6f61;
            color: white;
            cursor: pointer;
            margin-top: 10px;
        }

.login-container button:hover {
            background: #ff4a3b;
        }
    </style>
</head>
<body>
    <div class="login-container">
        <h2>Login</h2>
        <input type="text" placeholder="Username">
        <input type="password" placeholder="Password">
        <button>Login</button>
    </div>
    
    <script>
        let scene, camera, renderer, particles, particleSystem;

function initParticles() {
            scene = new THREE.Scene();
            camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
            camera.position.z = 5;

renderer = new THREE.WebGLRenderer({ alpha: true });
            renderer.setSize(window.innerWidth, window.innerHeight);
            document.body.appendChild(renderer.domElement);

let particleGeometry = new THREE.BufferGeometry();
            let particleCount = 300;
            let positions = new Float32Array(particleCount * 3);

for (let i = 0; i < particleCount * 3; i++) {
                positions[i] = (Math.random() - 0.5) * 10;
            }

particleGeometry.setAttribute('position', new THREE.BufferAttribute(positions, 3));

let particleMaterial = new THREE.PointsMaterial({
                color: 0xffffff,
                size: 0.05,
                transparent: true
            });

particleSystem = new THREE.Points(particleGeometry, particleMaterial);
            scene.add(particleSystem);

animate();
        }

function animate() {
            requestAnimationFrame(animate);
            particleSystem.rotation.y += 0.002;
            renderer.render(scene, camera);
        }

initParticles();
        
        window.addEventListener('resize', () => {
            camera.aspect = window.innerWidth / window.innerHeight;
            camera.updateProjectionMatrix();
            renderer.setSize(window.innerWidth, window.innerHeight);
        });
    </script>
</body>
</html>

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

body {
            background: #121212;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            overflow: hidden;
            position: relative;
        }

/* Particle Background */
        .particles {
            position: absolute;
            width: 100%;
            height: 100%;
            overflow: hidden;
            z-index: -1;
        }

.particle {
            position: absolute;
            background: rgba(255, 255, 255, 0.5);
            border-radius: 50%;
            opacity: 0.8;
            animation: float 10s infinite linear;
        }

@keyframes float {
            0% { transform: translateY(100vh); opacity: 0; }
            50% { opacity: 1; }
            100% { transform: translateY(-10vh); opacity: 0; }
        }

/* Login Form */
        .login-container {
            position: relative;
            background: rgba(255, 255, 255, 0.1);
            backdrop-filter: blur(10px);
            padding: 40px;
            border-radius: 10px;
            box-shadow: 0 0 10px rgba(255, 255, 255, 0.2);
            text-align: center;
            width: 350px;
            z-index: 1;
        }

.login-container h2 {
            color: #fff;
            margin-bottom: 20px;
        }

.login-container input {
            width: 100%;
            padding: 12px;
            margin: 10px 0;
            border: none;
            border-radius: 5px;
            font-size: 16px;
        }

.login-container input[type="text"],
        .login-container input[type="password"] {
            background: rgba(255, 255, 255, 0.2);
            color: #fff;
            outline: none;
        }

.login-container input::placeholder {
            color: #ddd;
        }

.login-container button {
            width: 100%;
            padding: 12px;
            border: none;
            border-radius: 5px;
            background: #ff5722;
            color: white;
            font-size: 18px;
            cursor: pointer;
            transition: 0.3s;
        }

.login-container button:hover {
            background: #e64a19;
        }
    </style>
</head>
<body>

<div class="login-container">
        <h2>Login</h2>
        <input type="text" placeholder="Username" required>
        <input type="password" placeholder="Password" required>
        <button>Login</button>
    </div>

particle.style.width = size + 'px';
                particle.style.height = size + 'px';
                particle.style.left = left + 'px';
                particle.style.animationDuration = duration + 's';

particleContainer.appendChild(particle);
            }
        }

createParticles();
    </script>

</body>
</html>

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

body {
            background: #080808;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            overflow: hidden;
            position: relative;
        }

/* Particle Background */
        .particles {
            position: absolute;
            width: 100%;
            height: 100%;
            z-index: -1;
        }

.particle {
            position: absolute;
            background: rgba(0, 255, 255, 0.8);
            box-shadow: 0 0 10px rgba(0, 255, 255, 0.8);
            border-radius: 50%;
            animation: floatUp linear infinite;
        }

@keyframes floatUp {
            0% { transform: translateY(100vh) scale(0.3); opacity: 0; }
            50% { opacity: 1; }
            100% { transform: translateY(-10vh) scale(1); opacity: 0; }
        }

/* Login Form */
        .login-container {
            position: relative;
            background: rgba(0, 0, 0, 0.8);
            backdrop-filter: blur(10px);
            padding: 40px;
            border-radius: 10px;
            box-shadow: 0 0 15px rgba(0, 255, 255, 0.8);
            text-align: center;
            width: 350px;
            z-index: 1;
        }

.login-container h2 {
            color: #00ffff;
            margin-bottom: 20px;
            text-shadow: 0 0 10px #00ffff;
        }

.login-container input {
            width: 100%;
            padding: 12px;
            margin: 10px 0;
            border: none;
            border-radius: 5px;
            font-size: 16px;
            background: rgba(255, 255, 255, 0.2);
            color: #fff;
            outline: none;
        }

.login-container input::placeholder {
            color: #ddd;
        }

.login-container button {
            width: 100%;
            padding: 12px;
            border: none;
            border-radius: 5px;
            background: #00ffff;
            color: black;
            font-size: 18px;
            cursor: pointer;
            transition: 0.3s;
            box-shadow: 0 0 10px #00ffff;
        }

.login-container button:hover {
            background: #00b3b3;
            box-shadow: 0 0 20px #00b3b3;
        }
    </style>
</head>
<body>

particleContainer.appendChild(particle);
            }
        }

createParticles();
        document.addEventListener('mousemove', moveParticles);
    </script>

</body>
</html>

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

body {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            background: #000;
            overflow: hidden;
        }

canvas {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: 1;
        }

.login-container {
            position: absolute;
            z-index: 10;
            background: rgba(255, 255, 255, 0.1);
            padding: 20px;
            border-radius: 10px;
            backdrop-filter: blur(10px);
            box-shadow: 0 0 10px rgba(255, 255, 255, 0.2);
            text-align: center;
            width: 300px;
        }

.login-container h2 {
            color: white;
            margin-bottom: 15px;
        }

.input-group {
            margin-bottom: 15px;
        }

.input-group input {
            width: 100%;
            padding: 10px;
            border: none;
            border-radius: 5px;
            outline: none;
        }

.login-btn {
            width: 100%;
            padding: 10px;
            border: none;
            background: #ff6600;
            color: white;
            cursor: pointer;
            border-radius: 5px;
            font-size: 16px;
            transition: 0.3s;
        }

.login-btn:hover {
            background: #ff4500;
        }
    </style>
</head>
<body>

<div class="login-container">
        <h2>Login</h2>
        <div class="input-group">
            <input type="text" placeholder="Username">
        </div>
        <div class="input-group">
            <input type="password" placeholder="Password">
        </div>
        <button class="login-btn">Login</button>
    </div>

canvas.width = window.innerWidth;
        canvas.height = window.innerHeight;

let particlesArray = [];
        const numParticles = 100;

class Particle {
            constructor() {
                this.x = Math.random() * canvas.width;
                this.y = Math.random() * canvas.height;
                this.size = Math.random() * 5 + 1;
                this.speedX = (Math.random() - 0.5) * 1;
                this.speedY = (Math.random() - 0.5) * 1;
            }

update() {
                this.x += this.speedX;
                this.y += this.speedY;

if (this.x > canvas.width || this.x < 0) this.speedX *= -1;
                if (this.y > canvas.height || this.y < 0) this.speedY *= -1;
            }

draw() {
                ctx.fillStyle = "rgba(255, 255, 255, 0.8)";
                ctx.beginPath();
                ctx.arc(this.x, this.y, this.size, 0, Math.PI * 2);
                ctx.fill();
            }
        }

function initParticles() {
            particlesArray = [];
            for (let i = 0; i < numParticles; i++) {
                particlesArray.push(new Particle());
            }
        }

function animateParticles() {
            ctx.clearRect(0, 0, canvas.width, canvas.height);
            for (let particle of particlesArray) {
                particle.update();
                particle.draw();
            }
            requestAnimationFrame(animateParticles);
        }

window.addEventListener("resize", () => {
            canvas.width = window.innerWidth;
            canvas.height = window.innerHeight;
            initParticles();
        });

initParticles();
        animateParticles();
    </script>

</body>
</html>

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

canvas {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: 1;
        }

.login-container {
            position: absolute;
            z-index: 10;
            background: rgba(255, 255, 255, 0.15);
            padding: 20px;
            border-radius: 10px;
            backdrop-filter: blur(15px);
            box-shadow: 0 0 20px rgba(255, 255, 255, 0.3);
            text-align: center;
            width: 300px;
        }

.login-container h2 {
            color: white;
            margin-bottom: 15px;
        }

.input-group {
            margin-bottom: 15px;
        }

.input-group input {
            width: 100%;
            padding: 10px;
            border: none;
            border-radius: 5px;
            outline: none;
        }

.login-btn:hover {
            background: #ff4500;
        }
    </style>
</head>
<body>

canvas.width = window.innerWidth;
        canvas.height = window.innerHeight;

let particlesArray = [];
        const numParticles = 80;

class Particle {
            constructor() {
                this.x = Math.random() * canvas.width;
                this.y = Math.random() * canvas.height;
                this.size = Math.random() * 5 + 2;
                this.speedX = (Math.random() - 0.5) * 2;
                this.speedY = (Math.random() - 0.5) * 2;
                this.color = `hsl(${Math.random() * 360}, 100%, 60%)`;
            }

update() {
                this.x += this.speedX;
                this.y += this.speedY;

if (this.x > canvas.width || this.x < 0) this.speedX *= -1;
                if (this.y > canvas.height || this.y < 0) this.speedY *= -1;
            }

draw() {
                ctx.fillStyle = this.color;
                ctx.shadowColor = this.color;
                ctx.shadowBlur = 10;
                ctx.beginPath();
                ctx.arc(this.x, this.y, this.size, 0, Math.PI * 2);
                ctx.fill();
            }
        }

function initParticles() {
            particlesArray = [];
            for (let i = 0; i < numParticles; i++) {
                particlesArray.push(new Particle());
            }
        }

window.addEventListener("resize", () => {
            canvas.width = window.innerWidth;
            canvas.height = window.innerHeight;
            initParticles();
        });

initParticles();
        animateParticles();
    </script>

</body>
</html>

* {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Poppins', sans-serif;
        }

body {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            background: linear-gradient(120deg, #56CCF2, #2F80ED);
            overflow: hidden;
        }

.wave {
            position: absolute;
            width: 100%;
            height: 100%;
            bottom: 0;
            left: 0;
            z-index: -1;
            background: url('sea.jpg') no-repeat center center/cover;
        }

.login-container {
            width: 350px;
            padding: 30px;
            background: rgba(255, 255, 255, 0.2);
            backdrop-filter: blur(10px);
            border-radius: 15px;
            text-align: center;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
        }

.login-container h2 {
            margin-bottom: 20px;
            font-size: 24px;
            color: white;
        }

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

.input-group input {
            width: 100%;
            padding: 12px;
            padding-left: 40px;
            border: none;
            border-radius: 25px;
            outline: none;
            background: rgba(255, 255, 255, 0.3);
            color: #fff;
        }

.input-group input::placeholder {
            color: rgba(255, 255, 255, 0.7);
        }

.input-group i {
            position: absolute;
            left: 15px;
            top: 50%;
            transform: translateY(-50%);
            color: white;
        }

.login-btn {
            width: 100%;
            padding: 12px;
            border: none;
            border-radius: 25px;
            background: #ff7eb3;
            color: white;
            font-weight: bold;
            cursor: pointer;
            transition: 0.3s;
        }

.login-btn:hover {
            background: #ff4b91;
        }

.forgot-password {
            display: block;
            margin-top: 15px;
            color: white;
            text-decoration: none;
            font-size: 14px;
        }

.forgot-password:hover {
            text-decoration: underline;
        }
    </style>
</head>
<body>
    <div class="wave"></div>
    <div class="login-container">
        <h2>Login</h2>
        <div class="input-group">
            <i class="fas fa-user"></i>
            <input type="text" placeholder="Username">
        </div>
        <div class="input-group">
            <i class="fas fa-lock"></i>
            <input type="password" placeholder="Password">
        </div>
        <button class="login-btn" onclick="login()">Login</button>
        <a href="#" class="forgot-password">Forgot Password?</a>
    </div>

<script src="https://kit.fontawesome.com/a076d05399.js" crossorigin="anonymous"></script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Newspaper Style Login</title>
    <style>
        /* Import classic newspaper-style font */
        @import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;700&family=Libre+Baskerville:wght@400;700&display=swap');

/* General Styling */
        body {
            background-color: #f5f5f5;
            font-family: 'Libre Baskerville', serif;
            color: #333;
            text-align: center;
            margin: 0;
            padding: 0;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
        }

/* Newspaper Container */
        .newspaper-box {
            background: white;
            padding: 40px;
            width: 79%;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
            border: 2px solid #222;
            text-align: left;
        }

/* Header Styling */
        .newspaper-header {
            text-align: center;
            font-family: 'Playfair Display', serif;
            font-size: 28px;
            font-weight: bold;
            margin-bottom: 20px;
            border-bottom: 2px solid black;
            padding-bottom: 10px;
        }

/* Login Form */
        .login-form label {
            font-weight: bold;
            display: block;
            margin-top: 10px;
        }

.login-form input {
            width: 94%;
            padding: 10px;
            margin-top: 5px;
            border: 1px solid #222;
            background: #fff;
            font-family: 'Libre Baskerville', serif;
        }

/* Submit Button */
        .login-form button {
            margin-top: 20px;
            width: 100%;
            padding: 10px;
            background: black;
            color: white;
            border: none;
            font-size: 16px;
            cursor: pointer;
            font-family: 'Playfair Display', serif;
            transition: 0.3s;
        }

.login-form button:hover {
            background: #444;
        }

/* Footer (Like a Newspaper Date/Edition) */
        .footer {
            font-size: 12px;
            text-align: center;
            margin-top: 20px;
            border-top: 1px dashed #222;
            padding-top: 10px;
            color: #666;
        }
    </style>
</head>
<body>

<div class="newspaper-box">
        <div class="newspaper-header">
            The Daily Login
        </div>

<form class="login-form" onsubmit="return loginUser(event)">
            <label for="username">Username</label>
            <input type="text" id="username" required>

<label for="password">Password</label>
            <input type="password" id="password" required>

<div class="footer">Edition: February 2025</div>
    </div>

if (username === "admin" && password === "password") {
                alert("Login Successful!");
            } else {
                alert("Invalid credentials, try again.");
            }
        }
    </script>

</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vintage Newspaper Login</title>
    <style>
        /* General Styles */
        body {
            font-family: 'Georgia', serif;
            background: #f5f5f5;
            color: #333;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
        }

/* Newspaper Container */
        .login-container {
            background: white;
            padding: 20px;
            width: 350px;
            box-shadow: 5px 5px 0px rgba(0, 0, 0, 0.1);
            border: 2px solid #000;
            text-align: center;
            font-size: 18px;
            line-height: 1.6;
        }

/* Newspaper Header */
        .login-container h1 {
            font-size: 26px;
            font-weight: bold;
            text-transform: uppercase;
            letter-spacing: 1px;
            border-bottom: 2px solid #000;
            padding-bottom: 5px;
            margin-bottom: 20px;
        }

/* Inputs */
        .login-container input {
            width: 94%;
            padding: 10px;
            margin: 10px 0;
            font-size: 16px;
            border: 1px solid #333;
            background: none;
            font-family: 'Georgia', serif;
        }

/* Button */
        .login-container button {
            width: 100%;
            padding: 10px;
            font-size: 18px;
            font-weight: bold;
            background: black;
            color: white;
            border: none;
            cursor: pointer;
            text-transform: uppercase;
        }

.login-container button:hover {
            background: #444;
        }

/* Small print */
        .small-text {
            font-size: 14px;
            margin-top: 10px;
            color: #666;
        }
    </style>
</head>
<body>

<div class="login-container">
        <h1>The Daily Login</h1>
        <form id="loginForm">
            <input type="text" id="username" placeholder="Username" required>
            <input type="password" id="password" placeholder="Password" required>
            <button type="submit">Log In</button>
        </form>
        <p class="small-text">Forgot Password? | Subscribe for Updates</p>
    </div>

if (username === "rkmcode" && password === "1234") {
                alert("Login Successful");
            } else {
                alert("Invalid Username or Password");
            }
        });
    </script>

</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Futuristic Login</title>
    <style>
        /* Google Font */
        @import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700&display=swap');

* {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Orbitron', sans-serif;
        }

body {
            background: #0a0a0a;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            color: #fff;
        }

.login-container {
            background: rgba(20, 20, 20, 0.9);
            padding: 40px;
            width: 320px;
            border: 2px solid #00f7ff;
            box-shadow: 0px 0px 20px #00f7ff;
            border-radius: 10px;
            text-align: center;
        }

.login-container h2 {
            margin-bottom: 20px;
            font-size: 24px;
            font-weight: 700;
            text-transform: uppercase;
        }

.input-group {
            margin: 15px 0;
            position: relative;
        }

.input-group input {
            width: 100%;
            padding: 12px;
            border: 2px solid #00f7ff;
            background: transparent;
            color: #fff;
            font-size: 16px;
            outline: none;
            transition: 0.3s;
            border-radius: 5px;
        }

.input-group input:focus {
            box-shadow: 0px 0px 10px #00f7ff;
        }

.btn {
            background: #00f7ff;
            color: #0a0a0a;
            padding: 12px;
            width: 100%;
            font-size: 16px;
            font-weight: 700;
            text-transform: uppercase;
            cursor: pointer;
            border: none;
            transition: 0.3s;
            border-radius: 5px;
        }

.btn:hover {
            background: #00d1ff;
            box-shadow: 0px 0px 10px #00f7ff;
        }

.error {
            color: #ff0044;
            font-size: 14px;
            margin-top: 5px;
        }
    </style>
</head>
<body>

<div class="login-container">
        <h2>Login</h2>
        <div class="input-group">
            <input type="text" id="username" placeholder="Username">
            <div id="userError" class="error"></div>
        </div>
        <div class="input-group">
            <input type="password" id="password" placeholder="Password">
            <div id="passError" class="error"></div>
        </div>
        <button class="btn" onclick="validateLogin()">Sign In</button>
    </div>

userError.innerText = "";
            passError.innerText = "";

if (username === "") {
                userError.innerText = "Username is required!";
                return;
            }

if (password === "") {
                passError.innerText = "Password is required!";
                return;
            }

alert("Login successful! (Demo Only)");
        }
    </script>

</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Sketch/Doodle Login</title>
    <style>
        @import url('https://fonts.googleapis.com/css2?family=Indie+Flower&display=swap');

* {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Indie Flower', cursive;
        }

body {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            background: #f9f3d2;
        }

.login-container {
            width: 300px;
            padding: 20px;
            text-align: center;
            border: 3px dashed #333;
            background: #fff8e1;
            border-radius: 10px;
            box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.2);
            position: relative;
        }

h2 {
            font-size: 26px;
            color: #333;
            margin-bottom: 20px;
        }

.input-box {
            width: 100%;
            margin-bottom: 15px;
            position: relative;
        }

input {
            width: 100%;
            padding: 10px;
            border: 2px dashed #333;
            border-radius: 5px;
            outline: none;
            font-size: 16px;
            background: #fff;
        }

.btn {
            width: 100%;
            padding: 10px;
            background: #ffcc00;
            border: 2px dashed #333;
            cursor: pointer;
            border-radius: 5px;
            font-size: 18px;
            transition: 0.3s;
        }

.btn:hover {
            background: #ffaa00;
        }

/* Hand-drawn animations */
        .doodle {
            position: absolute;
            width: 60px;
            height: 60px;
            animation: float 3s infinite ease-in-out;
        }

.doodle1 { top: -20px; left: -20px; }
        .doodle2 { bottom: -20px; right: -20px; }

@keyframes float {
            0%, 100% { transform: translateY(0); }
            50% { transform: translateY(-10px); }
        }
    </style>
</head>
<body>

<div class="login-container">
        <h2>Sketch Login</h2>
        <div class="input-box">
            <input type="text" placeholder="Username">
        </div>
        <div class="input-box">
            <input type="password" placeholder="Password">
        </div>
        <button class="btn">Login</button>

<svg class="doodle doodle1" viewBox="0 0 100 100">
            <path d="M10,30 C40,50 60,10 90,30" stroke="#333" fill="none" stroke-width="5"/>
        </svg>
        <svg class="doodle doodle2" viewBox="0 0 100 100">
            <circle cx="50" cy="50" r="20" stroke="#333" fill="none" stroke-width="5"/>
        </svg>
    </div>

</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Doodle Login</title>
    <style>
        @import url('https://fonts.googleapis.com/css2?family=Indie+Flower&display=swap');

* {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

body {
            background: #f9f4dc;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            font-family: 'Indie Flower', cursive;
        }

.login-container {
            position: relative;
            background: white;
            padding: 40px;
            box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.2);
            border-radius: 10px;
            text-align: center;
            border: 2px dashed black;
        }

h2 {
            font-size: 28px;
            margin-bottom: 20px;
        }

.input-group {
            margin: 10px 0;
            position: relative;
        }

input {
            width: 100%;
            padding: 10px;
            font-size: 18px;
            border: 2px dashed black;
            border-radius: 5px;
            background: none;
            outline: none;
        }

button {
            padding: 10px 20px;
            font-size: 20px;
            background: #ffcc00;
            border: 2px dashed black;
            border-radius: 5px;
            cursor: pointer;
            transition: 0.3s;
        }

button:hover {
            background: #ffdd44;
        }

/* Doodle Animation */
        .doodle {
            position: absolute;
            width: 100px;
            height: 100px;
            animation: float 2s infinite alternate ease-in-out;
        }

@keyframes float {
            0% { transform: translateY(0); }
            100% { transform: translateY(-10px); }
        }

.doodle1 { top: -50px; left: -40px; }
        .doodle2 { bottom: -50px; right: -40px; transform: rotate(180deg); }

</style>
</head>
<body>

<svg class="doodle doodle1" viewBox="0 0 100 100">
            <path d="M10,50 Q50,10 90,50 T170,50" stroke="black" fill="transparent" stroke-width="4"/>
        </svg>
        <svg class="doodle doodle2" viewBox="0 0 100 100">
            <path d="M10,50 Q50,10 90,50 T170,50" stroke="black" fill="transparent" stroke-width="4"/>
        </svg>
    </div>

</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Comic Book Login</title>
    <style>
        @import url('https://fonts.googleapis.com/css2?family=Bangers&display=swap');

body {
            background: #ffcc00;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            font-family: 'Bangers', cursive;
        }

.login-container {
            background: #fff;
            padding: 20px;
            border-radius: 10px;
            box-shadow: 10px 10px 0px #333;
            text-align: center;
            width: 300px;
            border: 4px solid black;
            position: relative;
        }

h2 {
            color: #d40000;
            font-size: 2em;
            text-shadow: 3px 3px black;
        }

.speech-bubble {
            position: absolute;
            top: -30px;
            left: 50%;
            transform: translateX(-50%);
            background: white;
            border: 4px solid black;
            padding: 10px;
            border-radius: 10px;
            font-size: 16px;
            box-shadow: 5px 5px 0px black;
        }

input {
            width: 90%;
            padding: 10px;
            margin: 10px 0;
            border: 3px solid black;
            font-size: 1.2em;
            box-shadow: 4px 4px 0px black;
            outline: none;
        }

.login-btn {
            background: #d40000;
            color: white;
            font-size: 1.5em;
            padding: 10px;
            border: none;
            cursor: pointer;
            width: 100%;
            box-shadow: 5px 5px 0px black;
        }

.login-btn:hover {
            background: #ff5722;
        }
    </style>
</head>
<body>

<div class="login-container">
        <div class="speech-bubble">Welcome Hero!</div>
        <h2>Login</h2>
        <input type="text" id="username" placeholder="Username">
        <input type="password" id="password" placeholder="Password">
        <button class="login-btn" onclick="login()">Login</button>
    </div>

</body>
</html>

body {
            background-color: #ffcc00;
            font-family: 'Bangers', cursive;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
        }

.login-container {
            background: white;
            border: 5px solid black;
            padding: 30px;
            width: 300px;
            text-align: center;
            box-shadow: 10px 10px 0 black;
            position: relative;
        }

.login-container h2 {
            margin: 0;
            font-size: 28px;
            color: #ff0000;
            text-shadow: 2px 2px black;
        }

.bubble {
            background: white;
            border: 3px solid black;
            padding: 5px 10px;
            display: inline-block;
            position: absolute;
            top: -20px;
            left: 50%;
            transform: translateX(-50%);
            font-size: 18px;
        }

.input-group {
            margin-top: 20px;
            position: relative;
        }

.input-group input {
            width: 90%;
            padding: 10px;
            font-size: 16px;
            border: 3px solid black;
            outline: none;
            font-family: 'Bangers', cursive;
        }

.input-group label {
            position: absolute;
            left: 10px;
            top: -15px;
            background: white;
            padding: 0 5px;
            font-size: 14px;
            border: 2px solid black;
            font-family: 'Bangers', cursive;
        }

.login-btn {
            margin-top: 20px;
            background: #ff0000;
            color: white;
            border: 3px solid black;
            padding: 10px;
            width: 100%;
            font-size: 18px;
            text-transform: uppercase;
            cursor: pointer;
            font-family: 'Bangers', cursive;
        }

.login-btn:hover {
            background: yellow;
            color: black;
        }
    </style>
</head>
<body>
    <div class="login-container">
        <div class="bubble">Welcome Hero!</div>
        <h2>Comic Login</h2>
        <div class="input-group">
            <label>Username</label>
            <input type="text" id="username" placeholder="Enter username">
        </div>
        <div class="input-group">
            <label>Password</label>
            <input type="password" id="password" placeholder="Enter password">
        </div>
        <button class="login-btn" onclick="login()">Login</button>
    </div>

RKM -CODE

Login Designs

↓MORE LOGIN DESIGNS UPDATE FASTLY↓