Una home page color lavanda

Apri nell'Editor Pubblica il Tuo Codice

Consigliato

25 November 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 home page color lavanda

Consigliato

La leggenda di Zelda

Un codice di Liamgilles76

Carte adesive impilate

HTML

CSS

JS

Consigliato

La leggenda di Zelda

Un codice di Liamgilles76

Carte adesive impilate

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS