<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>SecurePass - Password Generator</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
:root {
--primary: #3a86ff;
--primary-dark: #2563eb;
--accent: #ff006e;
--dark: #1e293b;
--light: #ffffff;
--gray: #f8fafc;
--text: #334155;
--success: #10b981;
}
body {
background: linear-gradient(135deg, #f1f5f9 0%, #e2e8f0 100%);
color: var(--text);
line-height: 1.6;
min-height: 100vh;
padding: 20px;
display: flex;
flex-direction: column;
align-items: center;
}
.container {
width: 100%;
max-width: 600px;
background: var(--light);
border-radius: 15px;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
overflow: hidden;
}
header {
background: linear-gradient(135deg, var(--primary), var(--primary-dark));
color: white;
padding: 25px;
text-align: center;
}
.logo {
display: flex;
align-items: center;
justify-content: center;
gap: 15px;
margin-bottom: 15px;
}
.logo-icon {
background: white;
width: 50px;
height: 50px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: var(--primary);
font-size: 24px;
}
h1 {
font-size: 2.2rem;
margin-bottom: 10px;
}
.tagline {
font-size: 1.1rem;
opacity: 0.9;
}
.main-content {
padding: 30px;
}
.password-display {
background: var(--gray);
border-radius: 12px;
padding: 25px;
margin-bottom: 25px;
text-align: center;
}
h2 {
font-size: 1.5rem;
margin-bottom: 20px;
color: var(--dark);
display: flex;
align-items: center;
gap: 10px;
justify-content: center;
}
.generated-password {
font-size: 1.8rem;
font-weight: 600;
color: var(--primary-dark);
background: white;
padding: 15px;
border-radius: 8px;
border: 2px solid #e2e8f0;
margin: 20px 0;
word-break: break-all;
text-align: center;
min-height: 80px;
display: flex;
align-items: center;
justify-content: center;
}
.copy-btn {
padding: 12px 25px;
border: none;
border-radius: 8px;
background: linear-gradient(135deg, var(--primary), var(--primary-dark));
color: white;
font-weight: 600;
cursor: pointer;
transition: all 0.3s;
display: flex;
align-items: center;
gap: 8px;
margin: 0 auto;
}
.copy-btn:hover {
transform: translateY(-2px);
box-shadow: 0 5px 15px rgba(58, 134, 255, 0.2);
}
.copy-btn:active {
transform: translateY(0);
}
.options-section {
background: var(--gray);
border-radius: 12px;
padding: 25px;
margin-bottom: 25px;
}
.option-group {
margin-bottom: 20px;
}
.option-title {
font-weight: 600;
margin-bottom: 10px;
display: flex;
align-items: center;
gap: 8px;
}
.slider-container {
display: flex;
align-items: center;
gap: 15px;
}
.slider {
flex: 1;
-webkit-appearance: none;
height: 8px;
border-radius: 4px;
background: #d1d5db;
outline: none;
}
.slider::-webkit-slider-thumb {
-webkit-appearance: none;
width: 20px;
height: 20px;
border-radius: 50%;
background: var(--primary);
cursor: pointer;
}
.length-value {
font-weight: 600;
color: var(--primary);
min-width: 30px;
text-align: center;
}
.checkboxes {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 15px;
margin-top: 20px;
}
.checkbox-group {
display: flex;
align-items: center;
gap: 10px;
}
input[type="checkbox"] {
width: 18px;
height: 18px;
accent-color: var(--primary);
}
.generate-btn {
padding: 15px 25px;
border: none;
border-radius: 8px;
background: linear-gradient(135deg, var(--accent), #d90429);
color: white;
font-weight: 600;
cursor: pointer;
transition: all 0.3s;
display: flex;
align-items: center;
gap: 8px;
width: 100%;
justify-content: center;
font-size: 1.1rem;
}
.generate-btn:hover {
transform: translateY(-2px);
box-shadow: 0 5px 15px rgba(255, 0, 110, 0.2);
}
.generate-btn:active {
transform: translateY(0);
}
.strength-meter {
background: white;
border-radius: 12px;
padding: 25px;
margin-bottom: 25px;
text-align: center;
}
.meter-visual {
height: 10px;
background: #e2e8f0;
border-radius: 5px;
margin: 15px 0;
overflow: hidden;
}
.meter-fill {
height: 100%;
width: 0%;
border-radius: 5px;
transition: all 0.3s ease;
}
.meter-text {
font-weight: 600;
font-size: 1.1rem;
}
.tips {
background: white;
border-radius: 12px;
padding: 25px;
}
.tips h2 {
justify-content: center;
}
.tip-list {
list-style-type: none;
}
.tip-list li {
padding: 10px 0;
border-bottom: 1px solid #e2e8f0;
display: flex;
align-items: center;
gap: 10px;
}
.tip-list li:last-child {
border-bottom: none;
}
.tip-list i {
color: var(--success);
}
footer {
text-align: center;
padding: 20px;
color: #64748b;
margin-top: 20px;
}
@media (max-width: 600px) {
.checkboxes {
grid-template-columns: 1fr;
}
.generated-password {
font-size: 1.4rem;
}
}
</style>
</head>
<body>
<div class="container">
<header>
<div class="logo">
<div class="logo-icon">
<i class="fas fa-lock"></i>
</div>
<h1>SecurePass</h1>
</div>
<p class="tagline">Generate strong, secure passwords instantly</p>
</header>
<div class="main-content">
<div class="password-display">
<h2><i class="fas fa-key"></i> Your Secure Password</h2>
<div class="generated-password" id="password-display">
Click Generate
</div>
<button class="copy-btn" id="copy-btn">
<i class="fas fa-copy"></i> Copy Password
</button>
</div>
<div class="options-section">
<h2><i class="fas fa-sliders-h"></i> Customization Options</h2>
<div class="option-group">
<div class="option-title">
<i class="fas fa-ruler"></i> Password Length
</div>
<div class="slider-container">
<input type="range" min="8" max="30" value="16" class="slider" id="length-slider">
<span class="length-value" id="length-value">16</span>
</div>
</div>
<div class="option-group">
<div class="option-title">
<i class="fas fa-toggle-on"></i> Include in Password
</div>
<div class="checkboxes">
<div class="checkbox-group">
<input type="checkbox" id="uppercase" checked>
<label for="uppercase">Uppercase Letters (A-Z)</label>
</div>
<div class="checkbox-group">
<input type="checkbox" id="lowercase" checked>
<label for="lowercase">Lowercase Letters (a-z)</label>
</div>
<div class="checkbox-group">
<input type="checkbox" id="numbers" checked>
<label for="numbers">Numbers (0-9)</label>
</div>
<div class="checkbox-group">
<input type="checkbox" id="symbols" checked>
<label for="symbols">Symbols (!@#$%^&*)</label>
</div>
</div>
</div>
<button class="generate-btn" id="generate-btn">
<i class="fas fa-sync-alt"></i> Generate New Password
</button>
</div>
<div class="strength-meter">
<h2><i class="fas fa-shield-alt"></i> Password Strength</h2>
<div class="meter-visual">
<div class="meter-fill" id="meter-fill"></div>
</div>
<div class="meter-text" id="strength-text">Very Strong</div>
</div>
<div class="tips">
<h2><i class="fas fa-lightbulb"></i> Password Tips</h2>
<ul class="tip-list">
<li><i class="fas fa-check-circle"></i> Use at least 12 characters</li>
<li><i class="fas fa-check-circle"></i> Include numbers, symbols, and both cases</li>
<li><i class="fas fa-check-circle"></i> Avoid common words and patterns</li>
<li><i class="fas fa-check-circle"></i> Use unique passwords for each account</li>
<li><i class="fas fa-check-circle"></i> Consider using a password manager</li>
</ul>
</div>
</div>
<footer>
<p>SecurePass © 2023 - Generate strong passwords to protect your accounts</p>
</footer>
</div>
<script>
document.addEventListener('DOMContentLoaded', function() {
const passwordDisplay = document.getElementById('password-display');
const copyBtn = document.getElementById('copy-btn');
const generateBtn = document.getElementById('generate-btn');
const lengthSlider = document.getElementById('length-slider');
const lengthValue = document.getElementById('length-value');
const uppercaseCheckbox = document.getElementById('uppercase');
const lowercaseCheckbox = document.getElementById('lowercase');
const numbersCheckbox = document.getElementById('numbers');
const symbolsCheckbox = document.getElementById('symbols');
const meterFill = document.getElementById('meter-fill');
const strengthText = document.getElementById('strength-text');
// Character sets
const uppercaseChars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';
const lowercaseChars = 'abcdefghijklmnopqrstuvwxyz';
const numberChars = '0123456789';
const symbolChars = '!@#$%^&*()_+-=[]{}|;:,.<>?';
// Update length value when slider changes
lengthSlider.addEventListener('input', function() {
lengthValue.textContent = this.value;
generatePassword();
});
// Generate password when options change
uppercaseCheckbox.addEventListener('change', generatePassword);
lowercaseCheckbox.addEventListener('change', generatePassword);
numbersCheckbox.addEventListener('change', generatePassword);
symbolsCheckbox.addEventListener('change', generatePassword);
// Generate password on button click
generateBtn.addEventListener('click', generatePassword);
// Copy password to clipboard
copyBtn.addEventListener('click', function() {
const password = passwordDisplay.textContent;
// Create a temporary textarea to copy from
const textarea = document.createElement('textarea');
textarea.value = password;
document.body.appendChild(textarea);
textarea.select();
document.execCommand('copy');
document.body.removeChild(textarea);
// Visual feedback
copyBtn.innerHTML = '<i class="fas fa-check"></i> Copied!';
setTimeout(() => {
copyBtn.innerHTML = '<i class="fas fa-copy"></i> Copy Password';
}, 2000);
// Alert for confirmation
alert('Password copied to clipboard!');
});
// Generate a random password
function generatePassword() {
let charset = '';
let password = '';
// Build character set based on selected options
if (uppercaseCheckbox.checked) charset += uppercaseChars;
if (lowercaseCheckbox.checked) charset += lowercaseChars;
if (numbersCheckbox.checked) charset += numberChars;
if (symbolsCheckbox.checked) charset += symbolChars;
// Check if at least one character set is selected
if (charset.length === 0) {
passwordDisplay.textContent = 'Select at least one option';
updateStrengthMeter(0);
return;
}
// Generate password
const length = parseInt(lengthSlider.value);
for (let i = 0; i < length; i++) {
const randomIndex = Math.floor(Math.random() * charset.length);
password += charset[randomIndex];
}
// Display password
passwordDisplay.textContent = password;
// Update strength meter
updateStrengthMeter(calculatePasswordStrength(password));
}
// Calculate password strength (0-100)
function calculatePasswordStrength(password) {
let strength = 0;
// Length factor (up to 40 points)
strength += Math.min(password.length * 2.5, 40);
// Character variety (up to 60 points)
let varietyScore = 0;
if (/[A-Z]/.test(password)) varietyScore += 15;
if (/[a-z]/.test(password)) varietyScore += 15;
if (/[0-9]/.test(password)) varietyScore += 15;
if (/[^A-Za-z0-9]/.test(password)) varietyScore += 15;
strength += varietyScore;
return Math.min(strength, 100);
}
// Update the strength meter visualization
function updateStrengthMeter(strength) {
meterFill.style.width = strength + '%';
// Update color and text based on strength
if (strength < 20) {
meterFill.style.background = '#ef4444';
strengthText.textContent = 'Very Weak';
} else if (strength < 40) {
meterFill.style.background = '#f97316';
strengthText.textContent = 'Weak';
} else if (strength < 60) {
meterFill.style.background = '#eab308';
strengthText.textContent = 'Fair';
} else if (strength < 80) {
meterFill.style.background = '#84cc16';
strengthText.textContent = 'Good';
} else {
meterFill.style.background = '#10b981';
strengthText.textContent = 'Very Strong';
}
}
// Generate initial password
generatePassword();
});
</script>
</body>
</html>
0 टिप्पणियाँ