Futuristic Virtual Keyboard

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Futuristic Virtual Keyboard</title>
    <style>
        body {
            font-family: 'Arial', sans-serif;
            justify-content: center;
            align-items: center;
            background: linear-gradient(135deg, #12c2e9, #c471ed, #f64f59);
            margin: 0;
            background-attachment: fixed;
            padding: 5%;
        }
        .keyboard {
            width: 50%;
            display: grid;
            grid-template-columns: repeat(10, 1fr);
            gap: 10px;
            background: rgba(0, 0, 0, 0.8);
            padding: 20px;
            border-radius: 20px;
            box-shadow: 0 10px 20px rgba(0, 0, 0, 0.5);
            margin: auto;
        }
        .key {
            display: flex;
            justify-content: center;
            align-items: center;
            background: rgba(255, 255, 255, 0.2);
            border-radius: 10px;
            box-shadow: 0 5px 10px rgba(0, 0, 0, 0.3);
            padding: 15px;
            font-size: 18px;
            cursor: pointer;
            transition: transform 0.2s, background 0.2s;
            color: #fff;
        }
        .key:hover {
            background: rgba(255, 255, 255, 0.4);
            transform: scale(1.1);
        }
        .key:active {
            transform: scale(0.9);
        }
        .emoji {
            font-size: 24px;
        }
        .icon {
            font-size: 18px;
            margin-right: 5px;
        }
        .input-container {
            display: flex;
            justify-content: center;
            margin-bottom: 20px;
        }
        .input-field {
            width: 50%;
            padding: 15px;
            border: none;
            border-radius: 10px;
            box-shadow: 0 5px 10px rgba(0, 0, 0, 0.3);
            font-size: 18px;
            outline: none;
            background: rgba(255, 255, 255, 0.2);
            color: #fff;
        }
    </style>
</head>
<body>
    <div class="input-container">
        <input type="text" id="input" class="input-field" placeholder="Type here...">
    </div>
    <div class="keyboard" id="keyboard">
        <div class="key">1</div>
        <div class="key">2</div>
        <div class="key">3</div>
        <div class="key">4</div>
        <div class="key">5</div>
        <div class="key">6</div>
        <div class="key">7</div>
        <div class="key">8</div>
        <div class="key">9</div>
        <div class="key">0</div>
        <div class="key">Q</div>
        <div class="key">W</div>
        <div class="key">E</div>
        <div class="key">R</div>
        <div class="key">T</div>
        <div class="key">Y</div>
        <div class="key">U</div>
        <div class="key">I</div>
        <div class="key">O</div>
        <div class="key">P</div>
        <div class="key">A</div>
        <div class="key">S</div>
        <div class="key">D</div>
        <div class="key">F</div>
        <div class="key">G</div>
        <div class="key">H</div>
        <div class="key">J</div>
        <div class="key">K</div>
        <div class="key">L</div>
        <div class="key">Z</div>
        <div class="key">X</div>
        <div class="key">C</div>
        <div class="key">V</div>
        <div class="key">B</div>
        <div class="key">N</div>
        <div class="key">M</div>
        <div class="key emoji">😀</div>
        <div class="key emoji">😂</div>
        <div class="key emoji">😍</div>
        <div class="key emoji">🥺</div>
        <div class="key emoji">😎</div>
        <div class="key emoji">😭</div>
        <div class="key emoji">😡</div>
        <div class="key icon">🔍</div>
        <div class="key icon">⌫</div>
        <div class="key icon">⏎</div>
    </div>
    <script>
        const input = document.getElementById('input');
        const keyboard = document.getElementById('keyboard');
        keyboard.addEventListener('click', function(event) {
            if (event.target.classList.contains('key')) {
                let keyValue = event.target.textContent;
                if (keyValue === '⌫') {
                    input.value = input.value.slice(0, -1);
                } else if (keyValue === '⏎') {
                    input.value += '\n';
                } else {
                    input.value += keyValue;
                }
            }
        });
    </script>
</body>
</html>

Futuristic Virtual Keyboard - MeggiTools