Webleb - Snippets de Código

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>

Chave

Recomendado

Um Código do Sr. Pato

Modelo de site HTML da Starbucks

Fundo animado Matrix

HTML

CSS

JS

Recomendado

Um Código do Sr. Pato

Modelo de site HTML da Starbucks

Fundo animado Matrix

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS