Une page d'accueil sur la lavande

1,523 Metehan

Ouvrir dans l'éditeur Publiez votre code

Recommandé

30 March 2025

Effet de brouillage de texte

23 August 2025

Modèle HTML pour la conception de sites Web, l'expérience numérique et les podcasts

10 May 2025

Un code de Mete

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