Una página de inicio de lavanda

Abrir en el editor Publica tu código

Recomendado

7 February 2025

<!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>
    * {
      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, #e0558e, #8341c1);
    }

.container {
      display: flex;
      width: 600px;
      height: 400px;
      border-radius: 20px;
      overflow: hidden;
      box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
    }

.login-section {
      flex: 1;
      padding: 20px;
      background: #fff;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
    }

.login-section h1 {
      color: #8341c1;
      font-size: 32px;
      margin-bottom: 20px;
    }

.login-section input {
      width: 80%;
      padding: 10px;
      margin: 10px 0;
      border: 1px solid #ddd;
      border-radius: 5px;
      outline: none;
      font-size: 16px;
    }

.login-section button {
      width: 80%;
      padding: 10px;
      border: none;
      background: #8341c1;
      color: white;
      font-size: 18px;
      border-radius: 5px;
      cursor: pointer;
      transition: 0.3s;
    }

.login-section button:hover {
      background: #6c32a8;
    }

.fingerprint-section {
      flex: 1;
      background: linear-gradient(135deg, #8341c1, #e0558e);
      display: flex;
      justify-content: center;
      align-items: center;
    }

.fingerprint-box {
      width: 150px;
      height: 150px;
      border-radius: 50%;
      background: rgba(255, 255, 255, 0.1);
      display: flex;
      justify-content: center;
      align-items: center;
      position: relative;
    }

.fingerprint-box::before {
      content: '';
      width: 100px;
      height: 100px;
      background: rgba(255, 255, 255, 0.5);
      border-radius: 50%;
      position: absolute;
      animation: pulse 2s infinite;
    }

@keyframes pulse {
      0% {
        transform: scale(1);
        opacity: 1;
      }
      100% {
        transform: scale(1.5);
        opacity: 0;
      }
    }

.fingerprint {
      width: 80px;
      height: 80px;
      background: white;
      border-radius: 50%;
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="login-section">
      <h1>ZENDA</h1>
      <input type="text" placeholder="Username">
      <input type="password" placeholder="Password">
      <button>Login</button>
    </div>
    <div class="fingerprint-section">
      <div class="fingerprint-box">
        <div class="fingerprint"></div>
      </div>
    </div>
  </div>
</body>
</html>

CSS

* {
  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, #e0558e, #8341c1);
}

.container {
  display: flex;
  width: 600px;
  height: 400px;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
}

.login-section {
  flex: 1;
  padding: 20px;
  background: #fff;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.login-section h1 {
  color: #8341c1;
  font-size: 32px;
  margin-bottom: 20px;
}

.login-section input {
  width: 80%;
  padding: 10px;
  margin: 10px 0;
  border: 1px solid #ddd;
  border-radius: 5px;
  outline: none;
  font-size: 16px;
}

.login-section button {
  width: 80%;
  padding: 10px;
  border: none;
  background: #8341c1;
  color: white;
  font-size: 18px;
  border-radius: 5px;
  cursor: pointer;
  transition: 0.3s;
}

.login-section button:hover {
  background: #6c32a8;
}

.fingerprint-section {
  flex: 1;
  background: linear-gradient(135deg, #8341c1, #e0558e);
  display: flex;
  justify-content: center;
  align-items: center;
}

.fingerprint-box {
  width: 150px;
  height: 150px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}

.fingerprint-box::before {
  content: '';
  width: 100px;
  height: 100px;
  background: rgba(255, 255, 255, 0.5);
  border-radius: 50%;
  position: absolute;
  animation: pulse 2s infinite;
}

.fingerprint-box.animate::before {
  animation: pulse 1s infinite, scaleUp 2s forwards;
}

@keyframes pulse {
  0% {
    transform: scale(1);
    opacity: 1;
  }
  100% {
    transform: scale(1.5);
    opacity: 0;
  }
}

@keyframes scaleUp {
  0% {
    transform: scale(1);
  }
  100% {
    transform: scale(2);
  }
}

.fingerprint {
  width: 80px;
  height: 80px;
  background: white;
  border-radius: 50%;
}

JS

// Login butonuna erişim
const loginButton = document.querySelector('.login-section button');

// Input alanlarına erişim
const usernameInput = document.querySelector('.login-section input[type="text"]');
const passwordInput = document.querySelector('.login-section input[type="password"]');

// Parmak izi kutusuna erişim
const fingerprintBox = document.querySelector('.fingerprint-box');

// Login butonuna tıklandığında
loginButton.addEventListener('click', (e) => {
  e.preventDefault(); // Default form submit davranışını engelle
  
  // Örnek doğrulama (Gerçek uygulamada sunucuya request gönderilmelidir)
  const username = usernameInput.value.trim();
  const password = passwordInput.value.trim();
  
  if (username === '' || password === '') {
    alert('Lütfen tüm alanları doldurun.');
    return;
  }
  
  // Doğrulama başarılıysa (Örnek amaçlı direkt başarılı kabul ediyoruz)
  console.log('Doğrulama başarılı!');
  alert('Giriş başarılı! (Örnek Uygulama)');
  
  // Parmak izi animasyonunu tetikle (Zaten CSS ile animasyonlu)
  fingerprintBox.classList.add('animate'); // Not: Bu sınıf CSS'de tanımlıdır.
  
  // 2 saniye sonra input alanlarını temizle
  setTimeout(() => {
    usernameInput.value = '';
    passwordInput.value = '';
    fingerprintBox.classList.remove('animate'); // Ekstra animasyon sınıfını kaldır
  }, 2000);
});

Una página de inicio de lavanda

Recomendado

espacio

Iconos sociales con CSS

escribiendo en la pantalla

HTML

CSS

JS

Recomendado

espacio

Iconos sociales con CSS

escribiendo en la pantalla

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS