Um Código por alejandrokundrah

Abrir no Editor Publique Seu Código

Recomendado

2 March 2025

Animações orientadas por rolagem

26 April 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)`;
  });
});

Um Código por alejandrokundrah

Recomendado

Um código por komplex

Animações orientadas por rolagem

Um Código de Metehan

HTML

CSS

JS

Recomendado

Um código por komplex

Animações orientadas por rolagem

Um Código de Metehan

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS