fix mobile keyboard

src/script.js

@@ -136,6 +136,24 @@ function createServerRack() {
                 terminal.className = 'terminal-display';
                 terminal.setAttribute('tabindex', '0');
                 
+                const mobileInput = document.createElement('input');
+                mobileInput.type = 'text';
+                mobileInput.style.opacity = '0';
+                mobileInput.style.position = 'absolute';
+                mobileInput.style.width = '1px';
+                mobileInput.style.height = '1px';
+                mobileInput.style.padding = '0';
+                mobileInput.style.border = '0';
+                mobileInput.style.outline = 'none';
+                mobileInput.style.background = 'transparent';
+                mobileInput.setAttribute('autocorrect', 'off');
+                mobileInput.setAttribute('spellcheck', 'false');
+                mobileInput.setAttribute('autocomplete', 'off');
+                mobileInput.setAttribute('autocapitalize', 'off');
+                mobileInput.autocapitalize = 'off';
+                terminal.appendChild(mobileInput);
+                terminal._mobileInput = mobileInput;
+                
                 const content = document.createElement('div');
                 content.className = 'terminal-content';
                 
@@ -162,7 +180,7 @@ function createServerRack() {
                 
                 terminal.addEventListener('click', (e) => {
                     e.stopPropagation();
-                    terminal.focus();
+                    mobileInput.focus();
                 });
                 
                 const commandHistory = [];
@@ -208,6 +226,8 @@ function createServerRack() {
                     
                     if (e.key === 'Enter') {
                         e.preventDefault();
+                        mobileInput.value = '';
+                        lastInputValue = '';
                         const lastLine = content.lastElementChild;
                         const oldCursor = lastLine?.querySelector('.terminal-cursor');
                         if (oldCursor) oldCursor.remove();
@@ -475,20 +495,11 @@ function createServerRack() {
                                 }
                             }
                         }
-                    } else if (e.key.length === 1 && !e.ctrlKey && !e.metaKey && !e.altKey) {
-                        e.preventDefault();
-                        const lastLine = content.lastElementChild;
-                        if (lastLine) {
-                            const cursorEl = lastLine.querySelector('.terminal-cursor');
-                            if (cursorEl) {
-                                const textNode = document.createTextNode(e.key);
-                                lastLine.insertBefore(textNode, cursorEl);
-                            }
-                        }
                     }
                 });
                 
                 terminal.addEventListener('focus', () => {
+                    mobileInput.focus();
                     terminal.style.boxShadow = '0 0 8px rgba(234, 179, 8, 0.3), inset 0 0 20px rgba(34, 197, 94, 0.1)';
                     terminal.style.borderColor = '#eab308';
                 });
@@ -496,6 +507,28 @@ function createServerRack() {
                 terminal.addEventListener('blur', () => {
                     terminal.style.boxShadow = '';
                     terminal.style.borderColor = '#2a2a2e';
+                    mobileInput.blur();
+                });
+                
+                let lastInputValue = '';
+                
+                mobileInput.addEventListener('input', () => {
+                    const lastLine = content.lastElementChild;
+                    if (!lastLine) return;
+                    
+                    const cursorEl = lastLine.querySelector('.terminal-cursor');
+                    const inputText = mobileInput.value;
+                    const addedText = inputText.slice(lastInputValue.length);
+                    
+                    if (addedText) {
+                        if (cursorEl) cursorEl.remove();
+                        lastLine.insertAdjacentText('beforeend', addedText);
+                        const newCursor = document.createElement('span');
+                        newCursor.className = 'terminal-cursor' + (isRoot ? ' red' : '');
+                        lastLine.appendChild(newCursor);
+                    }
+                    
+                    lastInputValue = inputText;
                 });
                 
             } else if (serverType < 0.35) {
@@ -677,8 +710,9 @@ function createServerRack() {
 let activeTerminal = null;
 createServerRack();
 
-document.getElementById('hero').addEventListener('click', () => {
+document.getElementById('hero').addEventListener('click', (e) => {
-    if (activeTerminal) {
+    if (e.target.closest('.btn')) return;
-        activeTerminal.focus();
+    if (activeTerminal && activeTerminal._mobileInput) {
+        activeTerminal._mobileInput.focus();
     }
 });