King kod

Merhaba! İstediğiniz özelliklere sahip gelişmiş bir web sitesi oluşturmak için HTML, CSS ve JavaScript kullanarak bir örnek hazırladım. Aşağıda kodları ve açıklamaları bulabilirsiniz:

1. HTML (index.html):

```html
<!DOCTYPE html>
<html lang="tr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Gelişmiş Login Formu</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<form id="loginForm" class="login-form">
<h2>Giriş Yap</h2>
<div class="input-group">
<input type="text" id="username" required>
<label for="username">Kullanıcı Adı</label>
</div>
<div class="input-group">
<input type="password" id="password" required>
<label for="password">Şifre</label>
</div>
<button type="submit">Giriş</button>
</form>
</div>

<div id="dashboard" class="dashboard hidden">
<h1>Dashboard</h1>
<nav>
<ul>
<li><a href="#"><svg></svg> Kullanıcı Ekle</a></li>
<li><a href="#"><svg></svg> Kullanıcı Sil</a></li>
<li><a href="#"><svg></svg> Güvenlik</a></li>
<li><a href="#"><svg></svg> SSS</a></li>
</ul>
</nav>
</div>

2. CSS (style.css):

```css
body {
font-family: Arial, sans-serif;
background-color: #f0f8ff;
margin: 0;
padding: 0;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}

.container {
background-color: white;
padding: 40px;
border-radius: 10px;
box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
width: 300px;
}

.login-form h2 {
text-align: center;
color: #0066cc;
margin-bottom: 30px;
}

.input-group {
position: relative;
margin-bottom: 30px;
}

.input-group input {
width: 100%;
padding: 10px 0;
border: none;
border-bottom: 2px solid #ddd;
outline: none;
font-size: 16px;
transition: border-color 0.3s;
}

.input-group label {
position: absolute;
top: 10px;
left: 0;
font-size: 16px;
color: #999;
transition: all 0.3s ease;
pointer-events: none;
}

.input-group input:focus ~ label,
.input-group input:valid ~ label {
top: -20px;
font-size: 12px;
color: #0066cc;
}

.input-group input:focus {
border-color: #0066cc;
}

button {
width: 100%;
padding: 12px;
background-color: #0066cc;
color: white;
border: none;
border-radius: 5px;
font-size: 16px;
cursor: pointer;
transition: background-color 0.3s;
}

button:hover {
background-color: #0052a3;
}

.dashboard {
background-color: white;
padding: 40px;
border-radius: 10px;
box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
width: 80%;
max-width: 800px;
}

.dashboard h1 {
color: #0066cc;
margin-bottom: 30px;
}

.dashboard nav ul {
list-style-type: none;
padding: 0;
}

.dashboard nav ul li {
margin-bottom: 20px;
}

.dashboard nav ul li a {
display: flex;
align-items: center;
color: #333;
text-decoration: none;
font-size: 18px;
transition: color 0.3s;
}

.dashboard nav ul li a:hover {
color: #0066cc;
}

.dashboard nav ul li a svg {
width: 24px;
height: 24px;
margin-right: 10px;
}

.hidden {
display: none;
}
```

3. JavaScript (script.js):

```javascript
document.getElementById('loginForm').addEventListener('submit', function(e) {
e.preventDefault();

const username = document.getElementById('username').value;
const password = document.getElementById('password').value;

// Normalde burada sunucuya bir istek göndererek kullanıcı adı ve şifre doğrulaması yapılır
// Ancak bu örnekte sadece "admin" kullanıcı adı ve şifresi ile giriş yapılabilir
if (username === 'admin' && password === 'admin') {
document.querySelector('.container').classList.add('hidden');
document.getElementById('dashboard').classList.remove('hidden');
} else {
alert('Hatalı kullanıcı adı veya şifre!');
}
});
```

4. .htaccess dosyası:

```
<Files "username.txt">
Order allow,deny
Deny from all
</Files>

<Files "password.txt">
Order allow,deny
Deny from all
</Files>
```

Bu kod, istediğiniz özelliklere sahip bir web sitesi oluşturur. Login formu mavi ve beyaz renkleri kullanılarak tasarlanmıştır ve ortada yer almaktadır. Inputlar, input box'ın dışına çıkmamaktadır. Dashboard kısmında istediğiniz menü öğeleri bulunmaktadır ve SVG ikonları için yer ayrılmıştır (ikonları eklemek için ilgili SVG kodlarını eklemeniz gerekecektir).

.htaccess dosyası, username.txt ve password.txt dosyalarına doğrudan web üzerinden erişimi engellemek için kullanılmıştır. Bu dosyaları web sunucunuzun güvenli bir dizinine yerleştirmeniz ve PHP gibi bir sunucu tarafı dili kullanarak içeriklerini okumanız gerekecektir.

Lütfen unutmayın ki bu kod örneği, gerçek bir uygulamada kullanılmamalıdır. Gerçek bir uygulamada, kullanıcı kimlik doğrulaması sunucu tarafında güvenli bir şekilde yapılmalı ve şifreler güvenli bir şekilde saklanmalıdır. Ayrıca, HTTPS kullanımı ve diğer güvenlik önlemleri de alınmalıdır.

Online Notepad

Ücretsiz Online Not Defteri

King kod