Un código de alejandrokundrah

Abrir en el editor Publica tu código

Recomendado

28 March 2025

Tarjetas móviles delineadas de CodePen Home

5 June 2025

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Futuristic Login - MANTIC</title>
  <link rel="stylesheet" href="style.css">
  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600&display=swap" rel="stylesheet">
</head>
<body>
  <div class="container">
    <div class="wave-pattern">
      <div class="wave-circle wave-1"></div>
      <div class="wave-circle wave-2"></div>
      <div class="wave-circle wave-3"></div>
      <div class="wave-circle wave-4"></div>
    </div>

<div class="login-form">
      <div class="logo-container">
        <div class="logo-icon">
          <div class="geometric-shape shape-1"></div>
          <div class="geometric-shape shape-2"></div>
          <div class="geometric-shape shape-3"></div>
        </div>
        <h1 class="brand-name">MANTIC</h1>
      </div>

<button class="login-button" onclick="handleLogin()">
        <span>Login</span>
        <div class="button-glow"></div>
      </button>
    </div>
  </div>

CSS

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

body {
  font-family: 'Inter', sans-serif;
  height: 100vh;
  overflow: hidden;
  background: linear-gradient(135deg, #0c0c2b 0%, #1a1a3e 25%, #2d1b69 50%, #4c2a85 75%, #6b46c1 100%);
  position: relative;
}

.container {
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.wave-pattern {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 1;
}

.wave-circle {
  position: absolute;
  border: 2px dotted rgba(147, 197, 253, 0.3);
  border-radius: 50%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  animation: pulse 4s ease-in-out infinite;
}

.wave-1 {
  width: 200px;
  height: 200px;
  animation-delay: 0s;
}

.wave-2 {
  width: 350px;
  height: 350px;
  animation-delay: 1s;
}

.wave-3 {
  width: 500px;
  height: 500px;
  animation-delay: 2s;
}

.wave-4 {
  width: 650px;
  height: 650px;
  animation-delay: 3s;
}

@keyframes pulse {
  0%, 100% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.8);
  }
  50% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }
}

.login-form {
  background: rgba(15, 23, 42, 0.7);
  backdrop-filter: blur(20px);
  border: 1px solid rgba(148, 163, 184, 0.1);
  border-radius: 24px;
  padding: 48px 40px;
  width: 400px;
  text-align: center;
  position: relative;
  z-index: 2;
  box-shadow: 
    0 0 60px rgba(59, 130, 246, 0.15),
    0 25px 50px rgba(0, 0, 0, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.logo-container {
  margin-bottom: 40px;
}

.logo-icon {
  position: relative;
  width: 80px;
  height: 80px;
  margin: 0 auto 20px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.geometric-shape {
  position: absolute;
  background: linear-gradient(135deg, #3b82f6, #8b5cf6);
  border-radius: 8px;
}

.shape-1 {
  width: 40px;
  height: 40px;
  transform: rotate(45deg);
  z-index: 3;
}

.shape-2 {
  width: 60px;
  height: 60px;
  transform: rotate(15deg);
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.6), rgba(139, 92, 246, 0.6));
  z-index: 2;
}

.shape-3 {
  width: 70px;
  height: 70px;
  transform: rotate(-15deg);
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.3), rgba(139, 92, 246, 0.3));
  z-index: 1;
}

.brand-name {
  font-size: 32px;
  font-weight: 600;
  color: white;
  letter-spacing: 4px;
  text-shadow: 0 0 20px rgba(59, 130, 246, 0.5);
  margin: 0;
}

.input-container {
  margin-bottom: 32px;
}

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

.input-field:last-child {
  margin-bottom: 0;
}

.input-icon {
  position: absolute;
  left: 16px;
  top: 50%;
  transform: translateY(-50%);
  color: rgba(148, 163, 184, 0.6);
  z-index: 2;
}

input {
  width: 100%;
  height: 56px;
  background: rgba(15, 23, 42, 0.8);
  border: 1px solid rgba(148, 163, 184, 0.2);
  border-radius: 16px;
  padding: 0 20px 0 50px;
  font-size: 16px;
  color: white;
  outline: none;
  transition: all 0.3s ease;
  box-shadow: 
    0 4px 12px rgba(0, 0, 0, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

input::placeholder {
  color: rgba(148, 163, 184, 0.5);
}

input:focus {
  border-color: rgba(59, 130, 246, 0.5);
  box-shadow: 
    0 4px 12px rgba(0, 0, 0, 0.2),
    0 0 0 3px rgba(59, 130, 246, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.login-button {
  width: 100%;
  height: 56px;
  background: linear-gradient(135deg, #3b82f6, #2563eb);
  border: none;
  border-radius: 16px;
  color: white;
  font-size: 18px;
  font-weight: 500;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: all 0.3s ease;
  box-shadow: 
    0 8px 25px rgba(59, 130, 246, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

.login-button:hover {
  transform: translateY(-2px);
  box-shadow: 
    0 12px 35px rgba(59, 130, 246, 0.4),
    inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

.login-button:active {
  transform: translateY(0);
}

.login-button span {
  position: relative;
  z-index: 2;
}

.button-glow {
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
  transition: left 0.6s ease;
}

.login-button:hover .button-glow {
  left: 100%;
}

@media (max-width: 480px) {
  .login-form {
    width: 90%;
    padding: 32px 24px;
  }

.wave-1 { width: 150px; height: 150px; }
  .wave-2 { width: 250px; height: 250px; }
  .wave-3 { width: 350px; height: 350px; }
  .wave-4 { width: 450px; height: 450px; }
}

JS

// Enhanced login functionality with animations and validation
function handleLogin() {
  const username = document.getElementById('username').value;
  const password = document.getElementById('password').value;
  const button = document.querySelector('.login-button');

// Basic validation
  if (!username.trim()) {
    showError('Please enter your username');
    highlightField('username');
    return;
  }

if (!password.trim()) {
    showError('Please enter your password');
    highlightField('password');
    return;
  }

// Simulate login process
  button.innerHTML = '<span>Logging in...</span><div class="button-glow"></div>';
  button.disabled = true;

setTimeout(() => {
    // Simulate successful login
    button.innerHTML = '<span>Welcome!</span><div class="button-glow"></div>';
    button.style.background = 'linear-gradient(135deg, #10b981, #059669)';

setTimeout(() => {
      // Reset button after demo
      button.innerHTML = '<span>Login</span><div class="button-glow"></div>';
      button.style.background = 'linear-gradient(135deg, #3b82f6, #2563eb)';
      button.disabled = false;

// Clear fields for demo
      document.getElementById('username').value = '';
      document.getElementById('password').value = '';
    }, 2000);
  }, 1500);
}

function showError(message) {
  // Create temporary error message
  const existingError = document.querySelector('.error-message');
  if (existingError) {
    existingError.remove();
  }

const errorDiv = document.createElement('div');
  errorDiv.className = 'error-message';
  errorDiv.textContent = message;
  errorDiv.style.cssText = `
    color: #ef4444;
    font-size: 14px;
    margin-top: 8px;
    opacity: 0;
    transition: opacity 0.3s ease;
  `;

const inputContainer = document.querySelector('.input-container');
  inputContainer.appendChild(errorDiv);

setTimeout(() => errorDiv.style.opacity = '1', 10);
  setTimeout(() => {
    if (errorDiv.parentNode) {
      errorDiv.style.opacity = '0';
      setTimeout(() => errorDiv.remove(), 300);
    }
  }, 3000);
}

function highlightField(fieldId) {
  const field = document.getElementById(fieldId);
  const originalBorderColor = field.style.borderColor;

field.style.borderColor = '#ef4444';
  field.style.boxShadow = '0 0 0 3px rgba(239, 68, 68, 0.1)';

setTimeout(() => {
    field.style.borderColor = originalBorderColor;
    field.style.boxShadow = '';
  }, 2000);
}

// Add enter key support
document.addEventListener('DOMContentLoaded', function() {
  const inputs = document.querySelectorAll('input');

inputs.forEach(input => {
    input.addEventListener('keypress', function(e) {
      if (e.key === 'Enter') {
        handleLogin();
      }
    });

// Add focus/blur effects
    input.addEventListener('focus', function() {
      this.parentElement.style.transform = 'translateY(-2px)';
    });

input.addEventListener('blur', function() {
      this.parentElement.style.transform = 'translateY(0)';
    });
  });

// Add mouse move effect for subtle interactivity
  const loginForm = document.querySelector('.login-form');

document.addEventListener('mousemove', function(e) {
    const rect = loginForm.getBoundingClientRect();
    const centerX = rect.left + rect.width / 2;
    const centerY = rect.top + rect.height / 2;

const deltaX = (e.clientX - centerX) / 50;
    const deltaY = (e.clientY - centerY) / 50;

loginForm.style.transform = `translate(${deltaX}px, ${deltaY}px)`;
  });
});

Un código de alejandrokundrah

Recomendado

Tarjetas móviles delineadas de CodePen Home

Un código de sofiane.blida09

Un código de nehapanchal8087

HTML

CSS

JS

Recomendado

Tarjetas móviles delineadas de CodePen Home

Un código de sofiane.blida09

Un código de nehapanchal8087

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS