HTML Login Formu
Gönderilme zamanı: 02 Ağu 2024 13:13
Merhaba Arkadaşlar Bugün Php Kullanmadan Login Sayfası Gösterecem ama pek güvenli Değildir Sunucu Taraflı Olması Gerekir Ama Ben html js ve css kullanarak yapacam hash'lanmıştır 599 ile başlayan sayı şifrenin hash'lanmış halidir Kullanıcı Adı İse admin
Kod: Tümünü seç
<!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>body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background: #f0f0f0;
margin: 0;
}
.login-container {
background: white;
padding: 20px;
border-radius: 10px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
animation: fadeIn 1s ease-in-out;
}
h1 {
margin-bottom: 20px;
}
input {
display: block;
width: 100%;
padding: 10px;
margin-bottom: 10px;
border: 1px solid #ccc;
border-radius: 5px;
}
button {
width: 100%;
padding: 10px;
border: none;
border-radius: 5px;
background: #007bff;
color: white;
font-size: 16px;
cursor: pointer;
}
button:hover {
background: #0056b3;
}
#error-message {
color: red;
margin-top: 10px;
}
@keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
</style>
</head>
<body>
<div class="login-container">
<h1>BAŞLIK</h1>
<form id="login-form">
<input type="text" id="username" placeholder="Kullanıcı Adı" required>
<input type="password" id="password" placeholder="Şidre" required>
<button type="submit">Giriş Yap</button>
</form>
<div id="error-message"></div>
</div>
<!-- scripts.js-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/crypto-js/4.0.0/crypto-js.min.js"></script>
<!-- login js -->
<script>document.getElementById('login-form').addEventListener('submit', function(event) {
event.preventDefault();
const username = document.getElementById('username').value;
const password = document.getElementById('password').value;
const hashedPassword = CryptoJS.SHA256(password).toString();
// Hashlenmiş kullanıcı bilgileri (gerçek uygulamalarda bu bilgileri sunucudan doğrulamalısınız)
const users = {
'admin': '5994471abb01112afcc18159f6cc74b4f511b99806da59b3caf5a9c173cacfc5' // '12345' şifresinin SHA-256 hash'i
};
if (users[username] && users[username] === hashedPassword) {
window.location.href = 'yönlendirilecek sayfa.html';
} else {
document.getElementById('error-message').innerText = "Kullanıcı Adı Yada Şifre Yanlış.";
}
});
</script>
</body>
</html>
