आधुनिक लॉगिन

अनुशंसित

2 March 2023

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>kevakibhack - Login</title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
      font-family: 'Poppins', sans-serif;
    }

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

section {
      position: relative;
      width: 100%;
      height: 100vh;
      display: flex;
      justify-content: center;
      align-items: center;
    }

section span {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      pointer-events: none;
    }

section span:nth-child(1) {
      clip-path: polygon(0 0, 20% 0, 40% 100%, 0% 100%);
      background: #ff3c3c;
      opacity: 0.8;
      animation: animate 15s linear infinite;
    }

section span:nth-child(2) {
      clip-path: polygon(20% 0, 40% 0, 60% 100%, 0% 100%);
      background: #00ff84;
      opacity: 0.8;
      animation: animate 25s linear infinite;
      animation-delay: -5s;
    }

section span:nth-child(3) {
      clip-path: polygon(40% 0, 60% 0, 80% 100%, 20% 100%);
      background: #ffcc00;
      opacity: 0.8;
      animation: animate 20s linear infinite;
      animation-delay: -10s;
    }

section span:nth-child(4) {
      clip-path: polygon(60% 0, 80% 0, 100% 100%, 40% 100%);
      background: #3c5cff;
      opacity: 0.8;
      animation: animate 30s linear infinite;
      animation-delay: -15s;
    }

@keyframes animate {
      0% {
        transform: translateY(-100%);
      }
      100% {
        transform: translateY(100%);
      }
    }

.signin {
      position: relative;
      z-index: 10;
      width: 380px;
      padding: 40px;
      background: rgba(255, 255, 255, 0.05);
      backdrop-filter: blur(10px);
      border-radius: 10px;
      box-shadow: 0 25px 45px rgba(0, 0, 0, 0.2);
      border: 1px solid rgba(255, 255, 255, 0.1);
      border-right: 1px solid rgba(255, 255, 255, 0.1);
      border-bottom: 1px solid rgba(255, 255, 255, 0.1);
      overflow: hidden;
      transition: 0.5s;
    }

.signin:hover {
      transform: translateY(-10px);
      box-shadow: 0 35px 55px rgba(0, 0, 0, 0.3);
    }

.signin::before {
      content: '';
      position: absolute;
      top: 0;
      left: -100%;
      width: 100%;
      height: 100%;
      background: rgba(255, 255, 255, 0.1);
      transform: skewX(-15deg);
      transition: 0.7s;
    }

.signin:hover::before {
      left: 120%;
    }

.signin .content {
      position: relative;
      width: 100%;
      display: flex;
      flex-direction: column;
      align-items: center;
    }

.signin .content h2 {
      color: #fff;
      font-size: 2em;
      margin-bottom: 30px;
      text-transform: uppercase;
      letter-spacing: 2px;
      text-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
    }

.signin .content .form {
      width: 100%;
    }

.signin .content .form .inputBox {
      position: relative;
      width: 100%;
      margin-bottom: 30px;
    }

.signin .content .form .inputBox input {
      width: 100%;
      padding: 10px 0;
      font-size: 16px;
      color: #fff;
      border: none;
      border-bottom: 1px solid #fff;
      outline: none;
      background: transparent;
      transition: 0.5s;
    }

.signin .content .form .inputBox input:focus,
    .signin .content .form .inputBox input:valid {
      border-bottom-color: #00ff84;
    }

.signin .content .form .inputBox i {
      position: absolute;
      left: 0;
      top: 10px;
      padding: 10px 0;
      font-style: normal;
      color: #fff;
      pointer-events: none;
      transition: 0.5s;
    }

.signin .content .form .inputBox input:focus ~ i,
    .signin .content .form .inputBox input:valid ~ i {
      transform: translateY(-20px);
      font-size: 12px;
      color: #00ff84;
    }

.signin .content .form .inputBox input[type="submit"] {
      background: #fff;
      color: #0f222f;
      border: none;
      padding: 12px;
      cursor: pointer;
      border-radius: 5px;
      font-weight: 600;
      letter-spacing: 1px;
      transition: 0.5s;
    }

.signin .content .form .inputBox input[type="submit"]:hover {
      background: #00ff84;
      color: #fff;
      box-shadow: 0 0 10px #00ff84, 0 0 20px #00ff84;
    }

.signin .content .form .links {
      display: flex;
      justify-content: space-between;
      margin-bottom: 20px;
    }

.signin .content .form .links a {
      color: #fff;
      text-decoration: none;
      font-size: 14px;
      transition: 0.5s;
    }

.signin .content .form .links a:hover {
      color: #00ff84;
      text-decoration: underline;
    }

/* Responsive design */
    @media (max-width: 480px) {
      .signin {
        width: 90%;
        padding: 30px 20px;
      }
      
      .signin .content h2 {
        font-size: 1.5em;
      }
    }

/* Social media icons */
    .social-icons {
      display: flex;
      justify-content: center;
      margin-top: 20px;
    }

.social-icons a {
      color: #fff;
      margin: 0 10px;
      font-size: 20px;
      transition: 0.3s;
    }

.social-icons a:hover {
      color: #00ff84;
      transform: translateY(-5px);
    }

/* Password toggle */
    .password-toggle {
      position: absolute;
      right: 0;
      top: 10px;
      cursor: pointer;
      color: #fff;
    }

/* Loading animation */
    .loader {
      display: none;
      width: 20px;
      height: 20px;
      border: 3px solid rgba(255, 255, 255, 0.3);
      border-radius: 50%;
      border-top-color: #00ff84;
      animation: spin 1s ease-in-out infinite;
      margin-left: 10px;
    }

@keyframes spin {
      to { transform: rotate(360deg); }
    }

/* Error message */
    .error-message {
      color: #ff3c3c;
      font-size: 14px;
      margin-top: -20px;
      margin-bottom: 20px;
      display: none;
    }
  </style>
</head>
<body>
  <section>
    <span></span>
    <span></span>
    <span></span>
    <span></span>

<div class="signin">
      <div class="content">
        <h2>Login</h2>
        <div class="form">
          <div class="inputBox">
            <input type="text" required id="username">
            <i>Username</i>
          </div>
          <div class="inputBox">
            <input type="password" required id="password">
            <i>Password</i>
            <span class="password-toggle" id="togglePassword">
              <i class="fas fa-eye"></i>
            </span>
          </div>
          <div class="error-message" id="errorMessage"></div>
          <div class="links">
            <a href="#">Forgot Password</a>
            <a href="#">Sign Up</a>
          </div>
          <div class="inputBox">
            <input type="submit" value="Login" id="loginBtn">
            <div class="loader" id="loader"></div>
          </div>
          <div class="social-icons">
            <a href="#"><i class="fab fa-google"></i></a>
            <a href="#"><i class="fab fa-facebook-f"></i></a>
            <a href="#"><i class="fab fa-twitter"></i></a>
            <a href="#"><i class="fab fa-linkedin-in"></i></a>
          </div>
        </div>
      </div>
    </div>
  </section>

// Form validation
      const loginForm = document.querySelector('.form');
      const username = document.querySelector('#username');
      const passwordInput = document.querySelector('#password');
      const errorMessage = document.querySelector('#errorMessage');
      const loginBtn = document.querySelector('#loginBtn');
      const loader = document.querySelector('#loader');

loginForm.addEventListener('submit', function(e) {
        e.preventDefault();
        
        // Show loading animation
        loginBtn.disabled = true;
        loader.style.display = 'inline-block';
        loginBtn.value = 'Logging in...';
        
        // Simulate API call
        setTimeout(function() {
          // Hide loading animation
          loader.style.display = 'none';
          loginBtn.disabled = false;
          loginBtn.value = 'Login';
          
          // Simple validation
          if(username.value.trim() === '' || passwordInput.value.trim() === '') {
            errorMessage.textContent = 'Please fill in all fields';
            errorMessage.style.display = 'block';
          } else if(passwordInput.value.length < 6) {
            errorMessage.textContent = 'Password must be at least 6 characters';
            errorMessage.style.display = 'block';
          } else {
            errorMessage.style.display = 'none';
            // Here you would typically send the data to your server
            alert('Login successful! Redirecting...');
            // window.location.href = 'dashboard.html';
          }
        }, 1500);
      });

// Input field animations
      const inputBoxes = document.querySelectorAll('.inputBox input');
      
      inputBoxes.forEach(input => {
        input.addEventListener('focus', function() {
          this.parentNode.querySelector('i').style.color = '#00ff84';
        });
        
        input.addEventListener('blur', function() {
          this.parentNode.querySelector('i').style.color = '#fff';
        });
      });

// Background animation
      const spans = document.querySelectorAll('section span');
      
      spans.forEach((span, index) => {
        span.style.animationDuration = `${15 + (index * 5)}s`;
        span.style.animationDelay = `${index * -5}s`;
      });
    });
  </script>
</body>
</html>

आधुनिक लॉगिन

अनुशंसित

सिम्पल लॉगिन फॉर्म

पंजीकरण के साथ लॉगिन करें

बहुत बढ़िया लॉगिन फ़ॉर्म

HTML

CSS

JS

अनुशंसित

सिम्पल लॉगिन फॉर्म

पंजीकरण के साथ लॉगिन करें

बहुत बढ़िया लॉगिन फ़ॉर्म

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS