Detalii Tehnice
Un utilitar avansat care generează parole complexe folosind motorul de criptare al browserului (window.crypto). Include indicator de putere (Password Strength Meter), setări personalizabile pentru caractere și funcție de copiere rapidă cu feedback vizual.
Securitatea acestui generator se bazează pe CSPRNG (Cryptographically Secure Pseudo-Random Number Generator). În timp ce generatoarele standard pot fi prezise de algoritmi statistici, acesta folosește entropia sistemului de operare.
Caracteristici principale:
- Algoritm Web Crypto: Utilizează Uint32Array și crypto.getRandomValues().
- Evaluator de Entropie: Calculează puterea parolei în timp real (Slabă, Medie, Puternică).
- Personalizare Granulară: Opțiuni pentru litere mari/mici, cifre și simboluri speciale.
- Interfață Modernă: Design responsiv, optimizat pentru experiența utilizatorului (UX).
Design-ul este curat, cu un fundal întunecat și accente neon, reflectând natura de securitate a scriptului.
CSS
Nucleul funcțional care garantează securitatea parolei.
JavaScript
Structura necesară pentru controlul generatorului.
HTML
<style>.pass-card {
background: #121212;
color: #e0e0e0;
padding: 25px;
border-radius: 15px;
max-width: 400px;
margin: 20px auto;
box-shadow: 0 10px 30px rgba(0,0,0,0.5);
font-family: 'Segoe UI', sans-serif;
border: 1px solid #333;
}
.result-container {
background: #1d1d1d;
padding: 15px;
border-radius: 8px;
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 20px;
border: 1px solid #444;
}
#password-display {
font-family: 'Courier New', monospace;
font-size: 1.2rem;
color: #00ff88;
word-break: break-all;
}
.strength-meter {
height: 6px;
background: #333;
border-radius: 3px;
margin: 10px 0 20px;
overflow: hidden;
}
#strength-bar {
height: 100%;
width: 0%;
transition: all 0.4s ease;
}
.option-group {
display: flex;
justify-content: space-between;
margin-bottom: 12px;
}
input[type="range"] {
width: 100%;
accent-color: #00ff88;
}
button.gen-btn {
width: 100%;
padding: 12px;
background: #00ff88;
color: #000;
border: none;
border-radius: 8px;
font-weight: bold;
cursor: pointer;
transition: 0.3s;
}
button.gen-btn:hover {
background: #00cc6e;
transform: translateY(-2px);
}</style>
<script>
class SecurePass {
constructor() {
this.charSets = {
upper: "ABCDEFGHIJKLMNOPQRSTUVWXYZ",
lower: "abcdefghijklmnopqrstuvwxyz",
numbers: "0123456789",
symbols: "!@#$%^&*()_+~`|}{[]:;?><,./-="
};
}
generate(length, options) {
let pool = "";
if (options.upper) pool += this.charSets.upper;
if (options.lower) pool += this.charSets.lower;
if (options.numbers) pool += this.charSets.numbers;
if (options.symbols) pool += this.charSets.symbols;
if (pool === "") return "Selectează opțiuni!";
let password = "";
const randomValues = new Uint32Array(length);
window.crypto.getRandomValues(randomValues);
for (let i = 0; i < length; i++) {
password += pool[randomValues[i] % pool.length];
}
return password;
}
getStrength(password) {
let strength = 0;
if (password.length > 8) strength += 25;
if (password.length > 12) strength += 25;
if (/[A-Z]/.test(password) && /[0-9]/.test(password)) strength += 25;
if (/[^A-Za-z0-9]/.test(password)) strength += 25;
return strength;
}
}
const Generator = new SecurePass();
function updateUI() {
const length = document.getElementById('length').value;
const options = {
upper: document.getElementById('upper').checked,
lower: document.getElementById('lower').checked,
numbers: document.getElementById('numbers').checked,
symbols: document.getElementById('symbols').checked
};
const pass = Generator.generate(parseInt(length), options);
const strength = Generator.getStrength(pass);
document.getElementById('password-display').innerText = pass;
document.getElementById('length-val').innerText = length;
const bar = document.getElementById('strength-bar');
bar.style.width = strength + "%";
bar.style.backgroundColor = strength < 50 ? "#ff4757" : strength < 100 ? "#ffa502" : "#2ed573";
}
function copyToClipboard() {
const pass = document.getElementById('password-display').innerText;
navigator.clipboard.writeText(pass);
alert("Parolă copiată!");
}
</script>
<div class="pass-card">
<h3 style="margin-top:0">KeyMaster Pro</h3>
<div class="result-container">
<span id="password-display">Parolă...</span>
<button onclick="copyToClipboard()" style="background:none; border:none; cursor:pointer; color:#00ff88;">📋</button>
</div>
<div class="strength-meter">
<div id="strength-bar"></div>
</div>
<div style="margin-bottom:15px">
<label>Lungime: <span id="length-val">16</span></label>
<input type="range" id="length" min="8" max="32" value="16" oninput="updateUI()">
</div>
<div class="option-group">
<label>Litere Mari (A-Z)</label>
<input type="checkbox" id="upper" checked onchange="updateUI()">
</div>
<div class="option-group">
<label>Litere Mici (a-z)</label>
<input type="checkbox" id="lower" checked onchange="updateUI()">
</div>
<div class="option-group">
<label>Cifre (0-9)</label>
<input type="checkbox" id="numbers" checked onchange="updateUI()">
</div>
<div class="option-group">
<label>Simboluri (!#$)</label>
<input type="checkbox" id="symbols" checked onchange="updateUI()">
</div>
<button class="gen-btn" onclick="updateUI()" style="margin-top:15px">GENEREAZĂ PAROLĂ NOUĂ</button>
</div>
