🔧 Enter your pin mobile ui with the html css and javascript coding.
Nachrichtenbereich: 🔧 Programmierung
🔗 Quelle: dev.to
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=
, initial-scale=1.0">
<title>Mobile Pin Entry</title>
<style>
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body{
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
height: 100vh;
background: #000;
font-family: Arial, Helvetica, sans-serif;
color:white;
}
.pin-display {
margin-bottom: 30px;
font-size: 48px;
letter-spacing: 15px;
font-family: 'Courier New', monospace;
}
.keypad {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 10px;
}
.keypad button {
width: 60px;
height: 60px;
border-radius: 50%;
border: 2px solid rgba(255, 255, 255, 0.3);
background: rgba(255, 255, 255, 0.1);
backdrop-filter: blur(10px);
color: white;
font-size: 28px;
font-weight: bold;
cursor: pointer;
transition: all 0.2s ease-in-out;
}
.keypad button:hover {
transform: scale(1);
background: rgba(255, 255, 255, 0.2);
}
.backspace {
font-size: 24px;
}
.clear-text {
margin-top: 20px;
font-size: 18px;
color: #ff4d4d;
cursor: pointer;
transition: color 0.3s;
}
.clear-text:hover{
color:#ff8000;
}
</style>
</head>
<body>
<div class="pin-display" id="pinDisplay">____</div>
<div class="keypad">
<button onclick="addDigit(1)">1</button>
<button onclick="addDigit(2)">2</button>
<button onclick="addDigit(3)">3</button>
<button onclick="addDigit(4)">4</button>
<button onclick="addDigit(5)">5</button>
<button onclick="addDigit(6)">6</button>
<button onclick="addDigit(7)">7</button>
<button onclick="addDigit(8)">8</button>
<button onclick="addDigit(9)">9</button>
<button onclick="backspace()" class="backspace">⌫</button>
<button onclick="addDigit(0)">0</button>
<button onclick="submitPin()"> ✔</button>
</div>
<script>
let pin = "";
function addDigit(digit) {
if (pin.length < 4) {
pin += digit;
updateDisplay();
}
}
function backspace() {
pin = pin.slice(0, -1);
updateDisplay();
}
function clearPin(){
pin="";
updateDisplay();
}
function updateDisplay(){
const display=document.getElementById('pinDisplay');
display.textContent=pin.padEnd(4,"_")
}
</script>
</body>
</html>
🔧 Grok 3: AI Thông Minh Nhất Thế Giới
📈 28.6 Punkte
🔧 Programmierung
🔧 Có thể bạn chưa biết (Phần 1)
📈 28.6 Punkte
🔧 Programmierung
🪟 3-Pin-Lüfter am 4-Pin-Anschluss betreiben
📈 21.41 Punkte
🪟 Windows Tipps