Ne Yapıyor Bu Terminal
Olay çok basit iki süper gücü var- Şifre Üretme Fabrikası:
- Tıpkı filmlerdeki gibi şak diye sana en baba şifreleri üretiyor
- İster 10 karakter yap ister 32 sana kalmış
- Büyük harf küçük harf rakam simge hepsini seçiyorsun
- Seçtiklerinle öyle bir karıştırıyor ki o şifreyi kırmak imkansız oluyor
- Güvenlik Skoru Analizi:
- İster kendin kafana göre bir şifre yaz ister ona ürettir
- Terminal hemen şifreni 100 üzerinden puanlıyor
- Bu puanlamayı şifrenin uzunluğuna ve içinde kaç farklı karakter çeşidi olduğuna bakarak yapıyor
- Puan çubuğu renk değiştiriyor bak
- Kırmızı
Fena zayıf HACKLENİRSİN - Sarı
Orta idare eder ama RİSK - Yeşil
Güçlü olmuş Helal - Mavi
Ultra Güvenli En iyisi bu Legendary
- Kırmızı
Neden Bu Kadar Güvenli
Normalde şifre üreten siteler senin verini sunucuya falan gönderir değil mi Bu öyle değil KORKMA- Bu terminal tamamen senin kendi internet tarayıcının içinde çalışıyor
- Yani senin şifrelerin hiçbir yere gitmiyor
- Gizlilik leveli maksimum
- Kodun tamamı senin önünde şeffaf her şeyi görebilirsin
KOD:
Böyle bir proje yaptım arkadaşlar umarım işinize yarar<!DOCTYPE html>
<html lang="tr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Süper Şifre Aracı (Tek Sayfa)</title>
<style>
/* --- CSS STİLLERİ --- */
:root {
--primary-color: #007bff;
--secondary-color: #f8f9fa;
--text-color: #343a40;
--border-radius: 8px;
}
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
background-color: #e9ecef;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
margin: 0;
padding: 20px;
}
.container {
background-color: #ffffff;
padding: 40px;
border-radius: var(--border-radius);
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
width: 100%;
max-width: 500px;
}
h1 {
text-align: center;
color: var(--primary-color);
margin-bottom: 30px;
font-size: 2em;
}
/* Şifre Görüntüleme Alanı */
.password-area {
display: flex;
gap: 10px;
margin-bottom: 20px;
}
#passwordOutput {
flex-grow: 1;
padding: 15px;
font-size: 1.1em;
border: 2px solid #ced4da;
border-radius: var(--border-radius);
text-align: center;
outline: none;
transition: border-color 0.3s;
}
#passwordOutput:focus {
border-color: var(--primary-color);
}
/* Kopyala Butonu */
#copyButton {
padding: 15px 20px;
background-color: #28a745;
color: white;
border: none;
border-radius: var(--border-radius);
cursor: pointer;
font-weight: bold;
transition: background-color 0.2s;
}
#copyButton:hover {
background-color: #1e7e34;
}
/* Puanlama Alanı */
.score-area {
margin-bottom: 30px;
}
.score-bar-container {
background-color: #e9ecef;
border-radius: 5px;
overflow: hidden;
height: 12px;
margin-top: 10px;
}
.score-bar {
height: 100%;
width: 0%;
transition: width 0.4s ease, background-color 0.4s ease;
}
#scoreText {
text-align: center;
font-weight: 600;
margin-top: 10px;
color: var(--text-color);
}
/* Oluşturma Seçenekleri */
.generator-options {
background-color: var(--secondary-color);
padding: 20px;
border-radius: var(--border-radius);
}
.option-group {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 15px;
margin-bottom: 15px;
}
.option-item {
display: flex;
align-items: center;
}
.option-item label {
margin-left: 10px;
cursor: pointer;
color: var(--text-color);
}
/* Uzunluk Ayarı */
.length-control {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 20px;
}
.length-control label {
font-weight: bold;
color: var(--text-color);
}
#length {
width: 80px;
padding: 8px;
border: 1px solid #ced4da;
border-radius: 4px;
text-align: center;
}
/* Ana Oluştur Butonu */
#generateButton {
width: 100%;
padding: 15px;
background-color: var(--primary-color);
color: white;
border: none;
border-radius: var(--border-radius);
font-size: 1.1em;
cursor: pointer;
margin-top: 10px;
transition: background-color 0.2s;
}
#generateButton:hover {
background-color: #0056b3;
}
/* Skor Çubuğu Renkleri */
.weak { background-color: #dc3545; }
.medium { background-color: #ffc107; }
.strong { background-color: #28a745; }
.very-strong { background-color: #17a2b8; }
</style>
</head>
<body>
<div class="container">
<h1>Şifre Terminali</h1>
<div class="password-area">
<input type="text" id="passwordOutput" placeholder="Şifre Oluştur veya Gir" value="" autofocus>
<button id="copyButton">Kopyala</button>
</div>
<div class="score-area">
<label>Şifre Gücü:</label>
<div class="score-bar-container">
<div id="scoreBar" class="score-bar"></div>
</div>
<p id="scoreText">Şifre girmediniz.</p>
</div>
<div class="generator-options">
<div class="length-control">
<label for="length">Şifre Uzunluğu:</label>
<input type="number" id="length" min="8" max="32" value="16">
</div>
<div class="option-group">
<div class="option-item">
<input type="checkbox" id="includeUppercase" checked>
<label for="includeUppercase">Büyük Harfler (A-Z)</label>
</div>
<div class="option-item">
<input type="checkbox" id="includeLowercase" checked>
<label for="includeLowercase">Küçük Harfler (a-z)</label>
</div>
<div class="option-item">
<input type="checkbox" id="includeNumbers" checked>
<label for="includeNumbers">Rakamlar (0-9)</label>
</div>
<div class="option-item">
<input type="checkbox" id="includeSymbols">
<label for="includeSymbols">Semboller (!@#$)</label>
</div>
</div>
<button id="generateButton">Rastgele Şifre Oluştur</button>
</div>
</div>
<script>
// --- JAVASCRIPT MANTIĞI ---
document.addEventListener('DOMContentLoaded', () => {
const passwordOutput = document.getElementById('passwordOutput');
const generateButton = document.getElementById('generateButton');
const copyButton = document.getElementById('copyButton');
const lengthInput = document.getElementById('length');
const includeUppercase = document.getElementById('includeUppercase');
const includeLowercase = document.getElementById('includeLowercase');
const includeNumbers = document.getElementById('includeNumbers');
const includeSymbols = document.getElementById('includeSymbols');
const scoreBar = document.getElementById('scoreBar');
const scoreText = document.getElementById('scoreText');
// Karakter Kümeleri
const UPPERCASE_CHARS = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';
const LOWERCASE_CHARS = 'abcdefghijklmnopqrstuvwxyz';
const NUMBER_CHARS = '0123456789';
const SYMBOL_CHARS = '!@#$%^&*()_+~`|}{[]:;?><,./-=';
// --- ŞİFRE OLUŞTURUCU MANTIĞI ---
const generatePassword = () => {
let characterSet = '';
let password = '';
const length = parseInt(lengthInput.value, 10);
// Seçilen karakter kümelerini birleştirme
if (includeUppercase.checked) characterSet += UPPERCASE_CHARS;
if (includeLowercase.checked) characterSet += LOWERCASE_CHARS;
if (includeNumbers.checked) characterSet += NUMBER_CHARS;
if (includeSymbols.checked) characterSet += SYMBOL_CHARS;
if (characterSet.length === 0) {
passwordOutput.value = 'Hata: En az bir karakter türü seçin!';
updatePasswordScore('');
return;
}
// Şifreyi rastgele oluşturma
for (let i = 0; i < length; i++) {
const randomIndex = Math.floor(Math.random() * characterSet.length);
password += characterSet[randomIndex];
}
passwordOutput.value = password;
updatePasswordScore(password);
copyButton.textContent = 'Kopyala'; // Kopyala metnini sıfırla
};
// --- ŞİFRE PUANLAYICI MANTIĞI (Zxcvbnjs algoritmasından esinlenilmiştir) ---
const checkPasswordStrength = (password) => {
let score = 0;
const len = password.length;
if (len === 0) return 0;
// 1. Uzunluk Puanı (Max 40 puan)
if (len >= 8) score += 10;
if (len >= 12) score += 15;
if (len >= 16) score += 15;
// 2. Çeşitlilik Puanı (Max 60 puan)
const hasUpper = /[A-Z]/.test(password);
const hasLower = /[a-z]/.test(password);
const hasNumber = /[0-9]/.test(password);
const hasSymbol = /[!@#$%^&*()_+~`|}{[\]:;?><,./=]/.test(password);
let typeCount = 0;
if (hasUpper) typeCount++;
if (hasLower) typeCount++;
if (hasNumber) typeCount++;
if (hasSymbol) typeCount++;
score += typeCount * 15; // Her tür için 15 puan
return Math.min(score, 100);
};
const updatePasswordScore = (password) => {
// Temizlik
scoreBar.className = 'score-bar';
if (password.length === 0) {
scoreBar.style.width = '0%';
scoreText.textContent = 'Şifre girmediniz.';
return;
}
const score = checkPasswordStrength(password);
let strengthText;
let colorClass;
// Skora göre metin ve renk belirleme
if (score < 40) {
strengthText = 'Çok Zayıf
colorClass = 'weak';
} else if (score < 70) {
strengthText = 'Orta Güçte
colorClass = 'medium';
} else if (score < 90) {
strengthText = 'Güçlü
colorClass = 'strong';
} else {
strengthText = 'Çok Güçlü!
colorClass = 'very-strong';
}
// Skor çubuğunu ve metni güncelleme
scoreBar.style.width = `${score}%`;
scoreBar.classList.add(colorClass);
scoreText.textContent = `${strengthText} (${score} / 100)`;
};
// --- EVENT DİNLEYİCİLERİ ---
// Oluştur butonu
generateButton.addEventListener('click', generatePassword);
// Kullanıcı input alanına şifre girdiğinde/değiştirdiğinde puanlamayı güncelle
passwordOutput.addEventListener('input', (e) => {
updatePasswordScore(e.target.value);
});
// Kopyala butonu
copyButton.addEventListener('click', () => {
const password = passwordOutput.value;
if (password && password !== 'Hata: En az bir karakter türü seçin!') {
navigator.clipboard.writeText(password).then(() => {
copyButton.textContent = 'Kopyalandı!';
setTimeout(() => copyButton.textContent = 'Kopyala', 2000);
}).catch(err => {
console.error('Kopyalama başarısız oldu:', err);
copyButton.textContent = 'Hata';
});
}
});
// Seçenekler değişince otomatik şifre oluştur
const optionElements = [lengthInput, includeUppercase, includeLowercase, includeNumbers, includeSymbols];
optionElements.forEach(el => el.addEventListener('change', generatePassword));
// Uygulama yüklendiğinde ilk şifreyi oluştur ve puanla
generatePassword();
});
</script>
</body>
</html>
