Une page d'accueil sur la lavande

1,699 Metehan

Ouvrir dans l'éditeur Publiez votre code

Recommandé

10 August 2025

Animation CSS d'un vaisseau spatial extraterrestre avec des étoiles

28 May 2025

Formulaire de connexion futuriste

4 July 2025

mémoire de survol

HTML

<!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%;
}

// 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);
});