Une page d'accueil sur la lavande

1,839 Metehan

Ouvrir dans l'éditeur Publiez votre code

Recommandé

15 April 2026

mathématiques gn

25 November 2025

Route des zombies

30 January 2025

Boutons Dégradé Hover

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