Webleb - UI Elements

HTML

<!DOCTYPE html>

<head>

<title>3D Password Generator</title>

<style>

* {

margin: 0;

padding: 0;

box-sizing: border-box;

font-family: 'Fredoka One', sans-serif;

}

body {

background: linear-gradient(135deg, #0d0d0d 0%, #1a1a2e 100%);

color: white;

display: flex;

flex-direction: column;

align-items: center;

justify-content: center;

min-height: 100vh;

perspective: 1000px;

overflow-x: hidden;

}

body.light-mode {

background: linear-gradient(135deg, #f0f0f0 0%, #e6f7ff 100%);

color: #000;

}

.container {

width: 100%;

max-width: 500px;

transform-style: preserve-3d;

transition: transform 0.5s ease;

}

.header {

font-size: 2.5rem;

color: #00ffaa;

margin-bottom: 2rem;

text-align: center;

text-shadow: 0 0 10px rgba(0, 255, 170, 0.5);

transform: translateZ(20px);

}

.card {

background: rgba(0, 0, 0, 0.5);

padding: 2rem;

border-radius: 20px;

border: 1px solid rgba(0, 255, 170, 0.3);

backdrop-filter: blur(10px);

box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5),

0 0 0 1px rgba(0, 255, 170, 0.1),

0 0 30px rgba(0, 255, 170, 0.2);

transform-style: preserve-3d;

transition: all 0.5s ease;

}

body.light-mode .card {

background: rgba(255, 255, 255, 0.8);

box-shadow: 0 20px 50px rgba(0, 0, 0, 0.1),

0 0 0 1px rgba(0, 200, 150, 0.2);

}

.info-text {

margin-bottom: 1.5rem;

line-height: 1.5;

color: rgba(255, 255, 255, 0.8);

transform: translateZ(10px);

}

body.light-mode .info-text {

color: rgba(0, 0, 0, 0.8);

}

.theme-toggle {

position: absolute;

top: 20px;

right: 20px;

cursor: pointer;

background: rgba(0, 255, 170, 0.1);

padding: 0.5rem 1rem;

border-radius: 30px;

border: 1px solid rgba(0, 255, 170, 0.3);

display: flex;

align-items: center;

gap: 0.5rem;

transform: translateZ(20px);

transition: all 0.3s ease;

}

.theme-toggle:hover {

background: rgba(0, 255, 170, 0.2);

}

.input-group {

margin-bottom: 1.5rem;

transform: translateZ(15px);

}

.input-label {

display: block;

margin-bottom: 0.5rem;

color: #00ffaa;

}

.text-input {

width: 100%;

padding: 0.8rem;

border-radius: 10px;

background: rgba(255, 255, 255, 0.1);

border: 1px solid rgba(0, 255, 170, 0.3);

color: white;

font-size: 1rem;

transition: all 0.3s ease;

}

.text-input:focus {

outline: none;

border-color: #00ffaa;

box-shadow: 0 0 10px rgba(0, 255, 170, 0.3);

}

body.light-mode .text-input {

background: rgba(0, 0, 0, 0.05);

color: #000;

}

.checkbox-group {

display: flex;

flex-wrap: wrap;

gap: 1rem;

margin-bottom: 1.5rem;

transform: translateZ(15px);

}

.checkbox-label {

display: flex;

align-items: center;

gap: 0.5rem;

padding: 0.5rem 1rem;

background: rgba(0, 255, 170, 0.1);

border-radius: 30px;

border: 1px solid rgba(0, 255, 170, 0.3);

cursor: pointer;

transition: all 0.3s ease;

}

.checkbox-label:hover {

background: rgba(0, 255, 170, 0.2);

}

.checkbox-label i {

color: #00ffaa;

}

.slider-container {

margin-bottom: 1.5rem;

transform: translateZ(15px);

}

.slider-header {

display: flex;

justify-content: space-between;

margin-bottom: 0.5rem;

}

.slider {

-webkit-appearance: none;

width: 100%;

height: 8px;

background: rgba(0, 255, 170, 0.1);

border-radius: 10px;

outline: none;

}

.slider::-webkit-slider-thumb {

-webkit-appearance: none;

width: 20px;

height: 20px;

background: #00ffaa;

border-radius: 50%;

cursor: pointer;

box-shadow: 0 0 10px rgba(0, 255, 170, 0.5);

transition: all 0.3s ease;

}

.slider::-webkit-slider-thumb:hover {

transform: scale(1.2);

}

.generate-btn {

width: 100%;

padding: 1rem;

background: linear-gradient(135deg, rgba(0, 255, 170, 0.3) 0%, rgba(0, 200, 150, 0.5) 100%);

border: none;

border-radius: 10px;

color: white;

font-size: 1rem;

cursor: pointer;

margin-bottom: 1.5rem;

transition: all 0.3s ease;

transform: translateZ(20px);

box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);

}

.generate-btn:hover {

background: linear-gradient(135deg, rgba(0, 255, 170, 0.5) 0%, rgba(0, 200, 150, 0.7) 100%);

transform: translateZ(20px) translateY(-3px);

box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);

}

.output-container {

display: flex;

gap: 0.5rem;

margin-bottom: 1.5rem;

transform: translateZ(15px);

}

.password-output {

flex: 1;

padding: 0.8rem;

background: rgba(255, 255, 255, 0.1);

border: 1px solid rgba(0, 255, 170, 0.3);

border-radius: 10px;

color: white;

font-size: 1rem;

}

body.light-mode .password-output {

background: rgba(0, 0, 0, 0.05);

color: #000;

}

.copy-btn {

padding: 0 1rem;

background: rgba(0, 255, 170, 0.3);

border: none;

border-radius: 10px;

color: white;

cursor: pointer;

transition: all 0.3s ease;

}

.copy-btn:hover {

background: rgba(0, 255, 170, 0.5);

transform: scale(1.05);

}

.strength-meter {

height: 10px;

background: rgba(255, 255, 255, 0.1);

border-radius: 10px;

margin-bottom: 1.5rem;

overflow: hidden;

transform: translateZ(10px);

}

.strength-bar {

height: 100%;

width: 0%;

background: linear-gradient(90deg, #ff0000 0%, #ff9900 50%, #00ff00 100%);

border-radius: 10px;

transition: width 0.5s ease, background 0.5s ease;

}

.notification {

position: fixed;

bottom: 20px;

left: 50%;

transform: translateX(-50%) translateZ(30px);

background: rgba(0, 255, 170, 0.9);

color: #000;

padding: 1rem 2rem;

border-radius: 10px;

box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);

opacity: 0;

transition: all 0.5s ease;

z-index: 100;

}

.notification.show {

opacity: 1;

bottom: 30px;

}

.particles {

position: fixed;

top: 0;

left: 0;

width: 100%;

height: 100%;

pointer-events: none;

z-index: -1;

}

.particle {

position: absolute;

background: rgba(0, 255, 170, 0.5);

border-radius: 50%;

pointer-events: none;

}

@media (max-width: 600px) {

.header {

font-size: 2rem;

}

.card {

padding: 1.5rem;

}

.checkbox-group {

flex-direction: column;

}

</style>

</head>

<body>

<h1 class="header"><i class="fas fa-lock"></i> 3D Password Generator</h1>

Generate ultra-secure passwords with 3D effects. Customize with your own words

or create easy-to-remember passwords with our smart generator.

</p>

<span>Light Mode</span>

</div>

<label class="input-label">Custom Word (optional):</label>

</div>

<span>Uppercase</span>

</label>

<span>Numbers</span>

</label>

<span>Symbols</span>

</label>

</label>

</div>

<span>Password Length:</span>

</div>

</div>

<i class="fas fa-magic"></i> Generate Password

</button>

</button>

</div>

</div>

// DOM Elements

const container = document.getElementById('container');

const card = document.getElementById('card');

const themeToggle = document.getElementById('themeToggle');

const customWord = document.getElementById('customWord');

const includeUppercase = document.getElementById('includeUppercase');

const includeNumbers = document.getElementById('includeNumbers');

const includeSymbols = document.getElementById('includeSymbols');

const easyMode = document.getElementById('easyMode');

const lengthSlider = document.getElementById('length');

const lengthValue = document.getElementById('lengthValue');

const generateBtn = document.getElementById('generateBtn');

const passwordOutput = document.getElementById('passwordOutput');

const copyBtn = document.getElementById('copyBtn');

const strengthBar = document.getElementById('strengthBar');

const notification = document.getElementById('notification');

const particles = document.getElementById('particles');

// 3D Effect

document.addEventListener('mousemove', (e) => {

const xAxis = (window.innerWidth / 2 - e.pageX) / 25;

const yAxis = (window.innerHeight / 2 - e.pageY) / 25;

container.style.transform = `rotateY(${xAxis}deg) rotateX(${yAxis}deg)`;

});

// Reset position when mouse leaves

document.addEventListener('mouseleave', () => {

container.style.transform = 'rotateY(0deg) rotateX(0deg)';

});

// Theme Toggle

themeToggle.addEventListener('click', () => {

document.body.classList.toggle('light-mode');

if (document.body.classList.contains('light-mode')) {

themeToggle.innerHTML = '<i class="fas fa-moon"></i><span>Dark Mode</span>';

} else {

themeToggle.innerHTML = '<i class="fas fa-sun"></i><span>Light Mode</span>';

}

});

// Update length value display

lengthSlider.addEventListener('input', () => {

lengthValue.textContent = lengthSlider.value;

});

// Generate Password

generateBtn.addEventListener('click', generatePassword);

function generatePassword() {

const length = parseInt(lengthSlider.value);

const word = customWord.value.trim();

const easy = easyMode.checked;

if (easy) {

// Easy to remember password

const words = ["blue", "car", "tree", "pizza", "sky", "lunar", "code", "star", "games"];

const word1 = word || words[Math.floor(Math.random() * words.length)];

const word2 = words[Math.floor(Math.random() * words.length)];

const number = Math.floor(Math.random() * 10000);

const easyPass = word1 + number + word2;

passwordOutput.value = easyPass;

updateStrengthMeter(easyPass);

showNotification('Easy password generated!');

return;

}

let charset = 'abcdefghijklmnopqrstuvwxyz';

if (includeUppercase.checked) charset += 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';

if (includeNumbers.checked) charset += '0123456789';

if (includeSymbols.checked) charset += '!@#$%^&*()_+-=[]{}|;:,.<>?';

if (!includeUppercase.checked && !includeNumbers.checked && !includeSymbols.checked) {

showNotification('Please select at least one option!', 'error');

return;

}

let password = '';

let randomPartLength = length - word.length;

for (let i = 0; i < randomPartLength; i++) {

password += charset.charAt(Math.floor(Math.random() * charset.length));

}

// Insert custom word at random position

const insertAt = Math.floor(Math.random() * (password.length + 1));

const finalPassword = password.slice(0, insertAt) + word + password.slice(insertAt);

passwordOutput.value = finalPassword;

updateStrengthMeter(finalPassword);

showNotification('Password generated successfully!');

}

// Copy Password

copyBtn.addEventListener('click', copyPassword);

function copyPassword() {

if (!passwordOutput.value) {

showNotification('Nothing to copy!', 'error');

return;

}

passwordOutput.select();

document.execCommand('copy');

// Show copied effect

passwordOutput.style.backgroundColor = 'rgba(0, 255, 170, 0.3)';

setTimeout(() => {

passwordOutput.style.backgroundColor = '';

}, 300);

showNotification('Password copied to clipboard!');

}

// Password Strength Meter

function updateStrengthMeter(password) {

let strength = 0;

// Length check

if (password.length >= 8) strength++;

if (password.length >= 12) strength++;

// Character diversity checks

if (/[A-Z]/.test(password)) strength++;

if (/\d/.test(password)) strength++;

if (/[^A-Za-z0-9]/.test(password)) strength++;

// Calculate percentage (max 5 checks)

const percentage = (strength / 5) * 100;

// Update bar

strengthBar.style.width = `${percentage}%`;

// Change color based on strength

if (percentage < 40) {

strengthBar.style.background = '#ff0000';

} else if (percentage < 70) {

strengthBar.style.background = '#ff9900';

} else {

strengthBar.style.background = '#00ff00';

}

// Notification

function showNotification(message, type = 'success') {

notification.textContent = message;

notification.className = 'notification';

if (type === 'error') {

notification.style.background = 'rgba(255, 0, 0, 0.9)';

notification.style.color = 'white';

} else {

notification.style.background = 'rgba(0, 255, 170, 0.9)';

notification.style.color = 'black';

}

notification.classList.add('show');

setTimeout(() => {

notification.classList.remove('show');

}, 3000);

}

// Create particles

function createParticles() {

const particleCount = 30;

for (let i = 0; i < particleCount; i++) {

const particle = document.createElement('div');

particle.classList.add('particle');

// Random size between 2px and 6px

const size = Math.random() * 4 + 2;

particle.style.width = `${size}px`;

particle.style.height = `${size}px`;

// Random position

particle.style.left = `${Math.random() * 100}%`;

particle.style.top = `${Math.random() * 100}%`;

// Random animation

const duration = Math.random() * 20 + 10;

particle.style.animation = `float ${duration}s linear infinite`;

// Random delay

particle.style.animationDelay = `${Math.random() * 10}s`;

particles.appendChild(particle);

}

// Initialize

createParticles();

// Add keyframe animation for particles

const style = document.createElement('style');

style.textContent = `

@keyframes float {

0% {

transform: translateY(0) translateX(0) rotate(0deg);

opacity: 1;

}

100% {

transform: translateY(-100vh) translateX(20px) rotate(360deg);

opacity: 0;

}

`;

document.head.appendChild(style);

</script>

</body>

</html>

CSS

JS

Key

Recommended