Webleb - Snippets de Código -

1310 Andev.web

Abrir no Editor Publique Seu Código

Recomendado

19 May 2025

caminhão basculante

25 July 2025

Caixa de inscrição de login 3D HTML CSS

19 July 2025

Fragmento HTML de animação de texto 3D

HTML

<!DOCTYPE html>
<html>

<head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css"> 
        <link rel="stylesheet" href="style.css">
        <title>Andev Web</title>
</head>

<body>
<div class="container">
  <div class="password-box">
     <h3 class="password">i3R&C=!Z(#BK</h3> 
     <div class="copy-btn">
        <i class="fa-regular fa-copy" id="copy-btn"></i>
        <span>Copied!</span>
     </div>
  </div>    
  <div class="checkboxes-box">
    <div class="uppercase">
      <input type="checkbox" name="" id="uppercase"> 
      <span>Uppercase</span>
    </div>  
    <div class="lowercase">
       <input type="checkbox" name="" id="" checked>
       <span>Lowercase</span>
    </div>  
    <div class="numbers">
            <input type="checkbox" name="" id="numbers">
            <span>Numbers</span>
    </div> 
    <div class="symbols">
            <input type="checkbox" name="" id="symbols">
            <span>Symbols</span>
    </div>    
  </div>
  <div class="password-length">
   <h3>Password Length</h3>  
   <input type="range" min="6" max="32" value="12" oninput="getPassLengthValue()">
   <div class="length-value">12</div>
  </div>
  <button class="generate-btn">Generate Password</button>
</div>
<script src="app.js"></script>
</body>

</html>

CSS

@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
*{
margin:0;  
padding:0;
box-sizing:border-box;
}

body{
background:#7BDAF3;   
font-family: 'poppins', sans-serif;
}

.container{
padding:40px;   
width:380px;
background:#ffffff;
border-radius:7px;
position:absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%);
}

.container .password-box{
height:45px;
width:100%;
border-radius:30px;
background:#FFFFFF;
border:1px solid grey;
padding:25px;
display:flex;
align-items:center;
}
.container .password-box h3{
font-size:14px;
color:grey;
font-weight:400;
}

.container .password-box .copy-btn{
position:absolute;  
right:63px;
color:grey;
font-size:17px;
cursor:pointer;
}

.container .checkboxes-box{
padding:1px; 
margin-top:15px;
}

.container .checkboxes-box .lowercase{
pointer-events:none;        
}

.container .checkboxes-box div{
height:35px;   
width:100%;
padding-left:35px;
display:flex;
align-items:center;
}

.container .checkboxes-box div span{
padding-left:20px;        
}

.container .checkboxes-box div input{
-webkit-appearance:none;   
height:18px;
width:18px;
border:1px solid grey;
border-radius:5px;
display:flex;
align-items:center;
justify-content:center;
cursor:pointer;
}

.container .checkboxes-box div input::before{
content:"\f00c";  
position:absolute;
font-family:FontAwesome;
color:white;
font-size:11px;
display:none;
}

.container .checkboxes-box div input:checked{
background:#38b3eb; 
border-color:#38b3eb;
}

.container .checkboxes-box div input:checked::before{
display:block;        
}

.container .password-length{
padding:2px; 
padding-left:35px;
}

.container .password-length h3{
font-size:15px;
color:grey;
font-weight:500;
margin-top:12px;
}

.container .password-length input{
-webkit-appearance:none;
height:3px;
width:70%;
background:lightgrey;
position:relative;
top:-3px;
cursor:pointer;
border-radius:3px;
}

.container .password-length input::-webkit-slider-thumb{
-webkit-appearance:none;
height:13px;
width:13px;
border-radius:100%;
background:#38b3eb; 
cursor:pointer;
}

.container .password-length .length-value{
height:30px;  
width:55px;
background:white;
display:flex;
align-items:center;
justify-content:center;
border-radius:3px;
border:1px solid grey;
position:absolute;
right:55px;
margin-top:-25px;
}

.container .generate-btn{
all:unset;
height:50px;
width:260px;
background:#38b3eb;
color:white;
border-radius:30px;
display:flex;
align-items:center;
justify-content:center;
margin:auto;
margin-top:30px;
cursor:pointer;
}

.container .copy-btn span{
position:absolute;  
font-size:9px;
top:50%;
left:50%;
transform:translate(-50%,-50%);
display:none;
margin-left:-8px;
}

::selection{
background:rgb(100, 149, 237,0.8); 
color:white;
}

JS

let passLength = document.querySelector('.password-length input');
let options = document.querySelectorAll('.checkboxes-box div input');
let generateBtn = document.querySelector('.generate-btn');
let password = document.querySelector('.password');
let copyBtn = document.querySelector('#copy-btn');
let copiedMsg = document.querySelector('.container .copy-btn span');
let copiedIcon = document.querySelector('.container .copy-btn i');

let getPassLengthValue = () => {
        document.querySelector('.length-value').innerHTML = passLength.value;
}

const characters = {
        uppercase: "ABCDEFGHIJKLMNOPQRSTUVWXYZ",
        lowercase: "abcdefghijklmnopqrstuvwxyz",
        numbers: "0123456789",
        symbols: "!@#$%^&*()_+~`|}{[]:;?><,./-="
};

let copyPassword = () => {
        navigator.clipboard.writeText(password.textContent);
        copiedIcon.style.display = 'none';
        copiedMsg.style.display = 'block';
        setTimeout(() => {
                copiedIcon.style.display = 'block';
                copiedMsg.style.display = 'none';
        }, 1000)
}

copyBtn.addEventListener('click', copyPassword);
generateBtn.addEventListener('click', getPassword);

Recomendado

caminhão basculante

Caixa de inscrição de login 3D HTML CSS

Fragmento HTML de animação de texto 3D

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS