js_lis 2.0.6 → 2.0.8

package/VirtualKeyboard.js

@@ -14,35 +14,16 @@ export class VirtualKeyboard {
     this.shiftActive = false;
     this.capsLockActive = false;
     this.isScrambled = false;
-    this.isVirtualKeyboardActive = false; // Flag to track VK operations
+    this.isVirtualKeyboardActive = false; 
 
-    // Maintain plaintext buffers per input (not stored in DOM). DOM will store only encrypted text.
     this.inputPlaintextBuffers = new WeakMap();
-
-    // Security state
-    // this.security = {
-    //   detectorStatus: "idle",
-    //   suspiciousEvents: [],
-    //   observer: null,
-    //   addSuspicious(event) {
-    //     try {
-    //       this.suspiciousEvents.push({
-    //         time: new Date().toISOString(),
-    //         ...event,
-    //       });
-    //       console.warn("[VK Security] Suspicious activity detected:", event);
-    //     } catch (_) {}
-    //   },
-    // };
-
-    injectCSS();
+    
     this.initialize();
   }
 
   async initialize() {
     try {
-      // this.applyCSPReportOnly();
-      // this.startKeyloggerDetector();
+      injectCSS();
       this.render();
       this.initializeInputListeners();
       console.log("VirtualKeyboard initialized successfully.");
@@ -51,113 +32,6 @@ export class VirtualKeyboard {
     }
   }
 
-  // Inject CSP Report-Only meta for runtime visibility into potential violations
-  // applyCSPReportOnly() {
-  //   // Disabled: Report-Only CSP must be set via HTTP headers. See server middleware in app.js.
-  //   return;
-  // }
-
-  // Start MutationObserver and limited listener-hook to detect potential keylogger injections
-  // startKeyloggerDetector() {
-  //   try {
-  //     const allowlistedScriptHosts = new Set([
-  //       window.location.host,
-  //       "cdnjs.cloudflare.com",
-  //     ]);
-
-  //     const isSuspiciousScript = (node) => {
-  //       try {
-  //         if (!(node instanceof HTMLScriptElement)) return false;
-  //         const src = node.getAttribute("src") || "";
-  //         if (!src) {
-  //           const code = (node.textContent || "").toLowerCase();
-  //           return /addEventListener\(['\"]key|document\.onkey|keylogger|send\(|fetch\(|xmlhttprequest/i.test(code);
-  //         }
-  //         const url = new URL(src, window.location.href);
-  //         return !Array.from(allowlistedScriptHosts).some((h) => url.host.endsWith(h));
-  //       } catch (_) {
-  //         return true;
-  //       }
-  //     };
-
-  //     const isSuspiciousElement = (node) => {
-  //       try {
-  //         if (!(node instanceof Element)) return false;
-  //         const hasKeyHandlers = node.hasAttribute("onkeydown") || node.hasAttribute("onkeypress") || node.hasAttribute("onkeyup");
-  //         const hiddenFrame = node.tagName === "IFRAME" && (node.getAttribute("sandbox") === null || node.getAttribute("srcdoc") !== null);
-  //         return hasKeyHandlers || hiddenFrame;
-  //       } catch (_) {
-  //         return false;
-  //       }
-  //     };
-
-  //     const quarantineScript = (script) => {
-  //       try {
-  //         script.type = "text/plain";
-  //         script.setAttribute("data-quarantined", "true");
-  //       } catch (_) {}
-  //     };
-
-  //     const observer = new MutationObserver((mutations) => {
-  //       for (const m of mutations) {
-  //         if (m.type === "childList") {
-  //           m.addedNodes.forEach((node) => {
-  //             if (isSuspiciousScript(node)) {
-  //               this.security.addSuspicious({ type: "script", reason: "suspicious source or inline pattern", node });
-  //               quarantineScript(node);
-  //             } else if (isSuspiciousElement(node)) {
-  //               this.security.addSuspicious({ type: "element", reason: "inline key handlers or risky frame", node });
-  //             }
-  //           });
-  //         } else if (m.type === "attributes" && isSuspiciousElement(m.target)) {
-  //           this.security.addSuspicious({ type: "attr", reason: `attribute ${m.attributeName}`, node: m.target });
-  //         }
-  //       }
-  //     });
-
-  //     observer.observe(document.documentElement, {
-  //       childList: true,
-  //       subtree: true,
-  //       attributes: true,
-  //       attributeFilter: ["onkeydown", "onkeypress", "onkeyup", "src", "type", "sandbox", "srcdoc"],
-  //     });
-
-  //     // Hook addEventListener to monitor keyboard listeners registration
-  //     const OriginalAddEventListener = EventTarget.prototype.addEventListener;
-  //     const selfRef = this;
-  //     EventTarget.prototype.addEventListener = function(type, listener, options) {
-  //       try {
-  //         if (type && /^(key(?:down|up|press))$/i.test(type)) {
-  //           const info = {
-  //             type: "event-listener",
-  //             reason: `keyboard listener registered: ${type}`,
-  //             target: this,
-  //           };
-  //           selfRef.security.addSuspicious(info);
-  //         }
-  //       } catch (_) {}
-  //       return OriginalAddEventListener.call(this, type, listener, options);
-  //     };
-
-  //     this.security.observer = observer;
-  //     this.security.detectorStatus = "running";
-
-  //     // Expose minimal security API
-  //     window.VKSecurity = {
-  //       getStatus: () => this.security.detectorStatus,
-  //       getEvents: () => [...this.security.suspiciousEvents],
-  //       stop: () => {
-  //         try { observer.disconnect(); } catch (_) {}
-  //         this.security.detectorStatus = "stopped";
-  //       },
-  //     };
-  //     console.info("[VK Security] Keylogger detector started");
-  //   } catch (err) {
-  //     this.security.detectorStatus = "error";
-  //     console.warn("[VK Security] Detector error:", err);
-  //   }
-  // }
-
   getLayoutName(layout) {
     switch (layout) {
       case "full":
@@ -170,6 +44,8 @@ export class VirtualKeyboard {
         return "Numpad Keyboard";
       case "symbols":
         return "Symbols Keyboard";
+      case "full-layouts":
+        return "Full English + Numpad";
       default:
         return "Unknown Layout";
     }
@@ -179,13 +55,8 @@ export class VirtualKeyboard {
     document.addEventListener("click", (e) => {
       const target = e.target;
       if (target.tagName === "INPUT" || target.tagName === "TEXTAREA") {
-        // Store the cursor position immediately after click
         const clickCursorPos = target.selectionStart;
-        
-        // Don't move cursor to end if virtual keyboard is currently active
         this.setCurrentInput(target, !this.isVirtualKeyboardActive);
-        
-        // Restore the cursor position that user clicked to set
         setTimeout(() => {
           if (target.selectionStart !== clickCursorPos) {
             target.setSelectionRange(clickCursorPos, clickCursorPos);
@@ -194,12 +65,9 @@ export class VirtualKeyboard {
       }
     });
 
-    document.addEventListener(
-      "focus",
-      (e) => {
+    document.addEventListener("focus", (e) => {
         const target = e.target;
         if (target.tagName === "INPUT" || target.tagName === "TEXTAREA") {
-          // Don't move cursor to end if virtual keyboard is currently active
           this.setCurrentInput(target, !this.isVirtualKeyboardActive);
         }
       },
@@ -210,21 +78,28 @@ export class VirtualKeyboard {
     document.addEventListener("input", (e) => {
       const target = e.target;
       if ((target.tagName === "INPUT" || target.tagName === "TEXTAREA") && target === this.currentInput) {
-        // Only handle real keyboard input if it's not coming from virtual keyboard operations
         if (!this.isVirtualKeyboardActive) {
-          this.handleRealKeyboardInput(target);
+          this.handleRealKeyboardInput(target, e);
         }
       }
     });
 
-    // Add real keyboard arrow key support
+    // Add real keyboard keydown listener for proper character tracking
     document.addEventListener("keydown", (e) => {
       const target = e.target;
       if ((target.tagName === "INPUT" || target.tagName === "TEXTAREA") && target === this.currentInput) {
-        // Handle arrow keys, HOME, END from real keyboard
+        // Reset the virtual keyboard flag when real keyboard is used
+        if (!['ArrowLeft', 'ArrowRight', 'ArrowUp', 'ArrowDown', 'Home', 'End'].includes(e.code)) {
+          this.isVirtualKeyboardActive = false;
+        }
+        
+        // Handle real keyboard input
+        if (!this.isVirtualKeyboardActive) {
+          this.handleRealKeyboardKeydown(target, e);
+        }
+        
+        // Handle arrow keys for all input types
         if (['ArrowLeft', 'ArrowRight', 'ArrowUp', 'ArrowDown', 'Home', 'End'].includes(e.code)) {
-          // Let the browser handle the navigation naturally
-          // Just ensure the input stays focused
           setTimeout(() => {
             target.focus();
           }, 0);
@@ -246,7 +121,6 @@ export class VirtualKeyboard {
     this.currentInput = inputElement;
     this.currentInput.classList.add("keyboard-active");
 
-    // Ensure the input is focused and cursor is visible
     this.currentInput.focus();
     
     // Ensure buffer initialized for this input
@@ -293,6 +167,7 @@ export class VirtualKeyboard {
 
     const layoutSelector = document.createElement("select");
     layoutSelector.id = "layout-selector";
+    layoutSelector.setAttribute("aria-label", "Select keyboard layout"); // ✅ เพิ่มบรรทัดนี้
     layoutSelector.onchange = (e) => this.changeLayout(e.target.value);
 
     const layouts = ["full", "en", "th", "numpad", "symbols"];
@@ -305,6 +180,7 @@ export class VirtualKeyboard {
     layoutSelector.value = this.currentLayout;
     controlsContainer.appendChild(layoutSelector);
 
+
     keyboard.appendChild(controlsContainer);
 
     const layout = this.layouts[this.currentLayout];
@@ -325,13 +201,14 @@ export class VirtualKeyboard {
           keyElement.classList.add("concat-keys");
         }
 
-        if (key === "Space") {
+        if (key === " ") {
           keyElement.className += " space";
+          keyElement.innerHTML = 'ฺ';
         }
 
         if (key === "backspace" || key === "Backspace") {
           keyElement.className += " backspacew";
-          keyElement.innerHTML = '<i class="fa fa-backspace"></i>';
+          keyElement.innerHTML = '<i class="fa fa-backspace"></i>ฺ';
         }
 
         keyElement.onclick = (e) => {
@@ -434,6 +311,20 @@ export class VirtualKeyboard {
           key.classList.toggle("active", this.isScrambled);
         });
       }
+
+      if (this.currentLayout === "full") {
+        if (this.isScrambled) {
+          this.unscrambleKeys();
+        } else {
+          this.scrambleFullLayoutKeys();
+        }
+        this.isScrambled = !this.isScrambled;
+        document
+          .querySelectorAll('.key[data-key="scrambled"]')
+          .forEach((key) => {
+            key.classList.toggle("active", this.isScrambled);
+          });
+      }
       this.isVirtualKeyboardActive = false;
       return;
     }
@@ -535,28 +426,12 @@ export class VirtualKeyboard {
       case "←":
         const leftNewPos = Math.max(0, start - 1);
         this.currentInput.setSelectionRange(leftNewPos, leftNewPos);
-        // Force immediate focus and ensure cursor is visible
-        this.currentInput.focus();
-        setTimeout(() => {
-          this.currentInput.setSelectionRange(leftNewPos, leftNewPos);
-          this.currentInput.focus();
-        }, 5);
-        // Skip the general cursor repositioning for arrow keys
-        this.isVirtualKeyboardActive = false;
         break;
 
       case "→":
         const bufferLength = this.getCurrentBuffer().length;
         const rightNewPos = Math.min(bufferLength, start + 1);
         this.currentInput.setSelectionRange(rightNewPos, rightNewPos);
-        // Force immediate focus and ensure cursor is visible
-        this.currentInput.focus();
-        setTimeout(() => {
-          this.currentInput.setSelectionRange(rightNewPos, rightNewPos);
-          this.currentInput.focus();
-        }, 5);
-        // Skip the general cursor repositioning for arrow keys
-        this.isVirtualKeyboardActive = false;
         break;
 
       case "↑":
@@ -602,24 +477,20 @@ export class VirtualKeyboard {
 
     if (isShiftActive && !isCapsActive) this.toggleShift();
 
-    // Only apply general focus and cursor management if not an arrow key
-    // Arrow keys handle their own cursor positioning and return early
     this.currentInput.focus();
-    
-    // Use setTimeout to ensure cursor positioning happens after DOM updates
+
     setTimeout(() => {
       this.currentInput.focus();
-      // Ensure cursor is visible by setting selection range
       const cursorPos = this.currentInput.selectionStart;
       this.currentInput.setSelectionRange(cursorPos, cursorPos);
     }, 0);
     
+    this.currentInput.focus();
     const event = new Event("input", { bubbles: true });
     this.currentInput.dispatchEvent(event);
     
-    // Reset flag after virtual keyboard operation is complete
+    // Reset the flag after virtual keyboard operation is complete
     this.isVirtualKeyboardActive = false;
-    // console.log(keyPressed)
   }
 
   // [3]
@@ -632,17 +503,11 @@ export class VirtualKeyboard {
     const newBuffer = buffer.slice(0, start) + textvalue + buffer.slice(end);
     this.setCurrentBuffer(newBuffer);
     
-    // Calculate new cursor position first
     const newCursorPos = start + textvalue.length;
     
-    // Update displayed value without preserving old cursor position
     this.updateDisplayedValue(false);
     
-    // Set cursor position after the inserted text
     this.currentInput.setSelectionRange(newCursorPos, newCursorPos);
-    
-    // Ensure the input remains focused with visible cursor
-    // this.currentInput.focus();
   }
 
   // Helper: get current plaintext buffer for active input
@@ -677,22 +542,110 @@ export class VirtualKeyboard {
     }
   }
 
-  // Handle real keyboard input and encrypt it
-  handleRealKeyboardInput(input) {
+  // Handle real keyboard keydown events to track actual input before masking
+  handleRealKeyboardKeydown(input, event) {
     if (!input) return;
     
-    // Get the current value from the input
-    const currentValue = input.value;
+    const key = event.key;
+    const start = input.selectionStart;
+    const end = input.selectionEnd;
+    const buffer = this.getCurrentBuffer();
     
-    // Update the plaintext buffer with the real keyboard input
-    this.inputPlaintextBuffers.set(input, currentValue);
+    // Skip modifier keys and special keys
+    if (event.ctrlKey || event.altKey || event.metaKey || 
+        ['Shift', 'Control', 'Alt', 'Meta', 'CapsLock', 'Tab', 'Escape', 
+         'ArrowLeft', 'ArrowRight', 'ArrowUp', 'ArrowDown', 'Home', 'End',
+         'F1', 'F2', 'F3', 'F4', 'F5', 'F6', 'F7', 'F8', 'F9', 'F10', 'F11', 'F12'].includes(key)) {
+      return;
+    }
     
-    // Encrypt and store in data-encrypted attribute
-    this.updateDomEncrypted(input, currentValue);
+    let newBuffer = buffer;
     
-    // this.updateDisplayedValue();
-    // console.log("Real keyboard input captured and encrypted for:", input.id || input.name || "unnamed input");
-    // console.log("Input type:", input.type, "Value length:", currentValue.length);
+    if (key === 'Backspace') {
+      if (start === end && start > 0) {
+        // Single character deletion
+        newBuffer = buffer.slice(0, start - 1) + buffer.slice(start);
+      } else if (start !== end) {
+        // Range deletion
+        newBuffer = buffer.slice(0, start) + buffer.slice(end);
+      }
+      
+      // Prevent default and update manually
+      event.preventDefault();
+      this.setCurrentBuffer(newBuffer);
+      this.updateDisplayedValue(false);
+      
+      // Set cursor position
+      const newCursorPos = start === end ? Math.max(0, start - 1) : start;
+      setTimeout(() => {
+        input.setSelectionRange(newCursorPos, newCursorPos);
+        input.focus();
+      }, 0);
+      
+    } else if (key === 'Delete') {
+      if (start === end && start < buffer.length) {
+        // Single character deletion forward
+        newBuffer = buffer.slice(0, start) + buffer.slice(start + 1);
+      } else if (start !== end) {
+        // Range deletion
+        newBuffer = buffer.slice(0, start) + buffer.slice(end);
+      }
+      
+      // Prevent default and update manually
+      event.preventDefault();
+      this.setCurrentBuffer(newBuffer);
+      this.updateDisplayedValue(false);
+      
+      // Set cursor position
+      setTimeout(() => {
+        input.setSelectionRange(start, start);
+        input.focus();
+      }, 0);
+      
+    } else if (key === 'Enter') {
+      if (input.tagName === 'TEXTAREA') {
+        newBuffer = buffer.slice(0, start) + '\n' + buffer.slice(end);
+        
+        // Prevent default and update manually
+        event.preventDefault();
+        this.setCurrentBuffer(newBuffer);
+        this.updateDisplayedValue(false);
+        
+        // Set cursor position
+        const newCursorPos = start + 1;
+        setTimeout(() => {
+          input.setSelectionRange(newCursorPos, newCursorPos);
+          input.focus();
+        }, 0);
+      }
+      // For input fields, let the default behavior handle form submission
+      
+    } else if (key.length === 1) {
+      // Regular character input
+      newBuffer = buffer.slice(0, start) + key + buffer.slice(end);
+      
+      // Prevent default and update manually
+      event.preventDefault();
+      this.setCurrentBuffer(newBuffer);
+      this.updateDisplayedValue(false);
+      
+      // Set cursor position
+      const newCursorPos = start + key.length;
+      setTimeout(() => {
+        input.setSelectionRange(newCursorPos, newCursorPos);
+        input.focus();
+      }, 0);
+    }
+  }
+
+  // Handle real keyboard input and encrypt it (simplified version)
+  handleRealKeyboardInput(input, event) {
+    if (!input) return;
+    
+    // For most cases, the keydown handler already took care of updating the buffer
+    // This method now just ensures the encryption is up to date
+    const currentBuffer = this.getCurrentBuffer();
+    this.updateDomEncrypted(input, currentBuffer);
   }
 
   // Helper: encrypt and store ciphertext in DOM attribute
@@ -855,7 +808,7 @@ export class VirtualKeyboard {
   // [12]
   scrambleEnglishKeys() {
     const keys = document.querySelectorAll(
-      ".key:not([data-key='scrambled']):not([data-key='std']):not([data-key='scr']):not([data-key='Space']):not([data-key='Backspace']):not([data-key='Caps 🄰']):not([data-key='Shift ⇧']):not([data-key='Enter']):not([data-key='Tab ↹'])"
+      ".key:not([data-key='scrambled']):not([data-key='std']):not([data-key='scr']):not([data-key=' ']):not([data-key='Backspace']):not([data-key='Caps 🄰']):not([data-key='Shift ⇧']):not([data-key='Enter']):not([data-key='Tab ↹'])"
     );
     const englishAlphabet = "abcdefghijklmnopqrstuvwxyz/.,';\\][`1234567890-=".split("");
     this.shuffleArray(englishAlphabet);
@@ -868,7 +821,7 @@ export class VirtualKeyboard {
   // [13]
   scrambleThaiKeys() {
     const keys = document.querySelectorAll(
-      ".key:not([data-key='scrambled']):not([data-key='scr']):not([data-key='Backspace']):not([data-key='Caps 🄰']):not([data-key='Shift ⇧']):not([data-key='Enter']):not([data-key='Space']):not([data-key='Tab ↹'])"
+      ".key:not([data-key='scrambled']):not([data-key='scr']):not([data-key='Backspace']):not([data-key='Caps 🄰']):not([data-key='Shift ⇧']):not([data-key='Enter']):not([data-key=' ']):not([data-key='Tab ↹'])"
     );
     const ThaiAlphabet = '_ๅ/-ภถุึคตจขชๆไำพะัีรนยบลฃฟหกดเ้่าสวงผปแอิืทมใฝ%+๑๒๓๔ู฿๕๖๗๘๙๐"ฎฑธํ๊ณฯญฐ,ฅฤฆฏโฌ็๋ษศซ.ฦฬฒ?์ฺฮฉ)('.split("");
     this.shuffleArray(ThaiAlphabet);
@@ -891,6 +844,21 @@ export class VirtualKeyboard {
     });
   }
 
+
+  scrambleFullLayoutKeys() {
+    const keys = document.querySelectorAll(
+      ".key:not(.concat-keys):not([data-key='scrambled']):not([data-key='std']):not([data-key='scr']):not([data-key=' ']):not([data-key='Backspace']):not([data-key='Caps 🄰']):not([data-key='Shift ⇧']):not([data-key='Enter']):not([data-key='Tab ↹'])"
+    );
+    const englishChars = "abcdefghijklmnopqrstuvwxyz1234567890;'\\/][`,.-=".split("");
+    this.shuffleArray(englishChars);
+    keys.forEach((key, index) => {
+      if (index < englishChars.length) {
+        key.textContent = englishChars[index];
+        key.dataset.key = englishChars[index];
+      }
+    });
+  }
+
   // [14] จัดการการลากคีย์บอร์ด
   startDrag(event) {
     this.isDragging = true;

package/layouts.js

@@ -1,11 +1,11 @@
 export const layouts = {
   full: [
-    // ["Esc", "F1", "F2", "F3", "F4", "F5", "F6", "F7", "F8", "F9", "F10", "F11", "F12", "DEL⌦", "HOME", "END"],
+    // ["Esc", "F1", "F2", "F3", "F4", "F5", "F6", "F7", "F8", "F9", "F10", "F11", "F12", "DEL⌦", "HOME", "END"],"ㅤ","ㅤ","ㅤ","ㅤ",
     ["`", "1", "2", "3", "4", "5", "6", "7", "8", "9", "0", "-", "=", "Backspace"].concat(["+", "-", "*","/"]),
     ["Tab ↹", "q", "w", "e", "r", "t", "y", "u", "i", "o", "p", "[", "]", "\\"].concat(["7", "8", "9", "%"]),
     ["Caps 🄰", "a", "s", "d", "f", "g", "h", "j", "k", "l", ";", "'", "Enter"].concat(["4", "5", "6", "_"]),
     ["Shift ⇧", "z", "x", "c", "v", "b", "n", "m", ",", ".", "/", "Shift ⇧", "↑"].concat(["1", "2", "3", "="]),
-    ["@", " ", "←", "↓", "→"].concat(["0", "."]),
+    ["scrambled", " ", "←", "↓", "→"].concat(["0", "."]),
   ],
   en: [
     ["`", "1", "2", "3", "4", "5", "6", "7", "8", "9", "0", "-", "=", "Backspace"],

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "js_lis",
-  "version": "2.0.6",
+  "version": "2.0.8",
   "main": "index.js",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1"

package/style/kbstyle.js

@@ -1,6 +1,6 @@
 // CSS-in-JS version of kbstyle.css
 export const css = `
-.keyboard-row,.virtual-keyboard{display:flex;display:flex}.keyb,.keyboard-key{cursor:pointer;font-size:16px;text-align:center}.virtual-keyboard{flex-direction:column;width:100%;max-width:800px;margin:0 auto;border:2px solid #333;border-radius:10px;padding:20px;background-color:#f5f5f5;box-shadow:0 4px 10px rgba(0,0,0,.1)}.keyboard-row{justify-content:space-between}.keyboard-key{flex:1;padding:10px 15px;margin:2px;border:1px solid #ccc;border-radius:5px;background-color:#fff;transition:background-color .2s}.keyboard-active,input:focus,textarea:focus{border-color:#007bff;box-shadow:0 0 0 .2rem rgba(0,123,255,.25)}.backspacew{flex:1.5;width:260px}.keyboard-key:hover{background:#e0e0e0}.keyboard-key:active{background:#d0d0d0;transform:translateY(1px)}.keyboard-row{display:flex;justify-content:flex-start;margin:5px 0}.controls{margin-bottom:20px}button,select{margin-right:10px;padding:8px 12px;border:1px solid #ccc;border-radius:4px;font-size:14px;cursor:pointer}button:hover{background:#f0f0f0}input:focus,textarea:focus{outline:0}#keyboard{position:absolute;cursor:move;top:80%;left:50%;transform:translate(-50%,-50%)}.keyb{color:#fff;border:#000;width:40px;height:25px;line-height:50px;margin:8px}.keyboard-row .active{background:#c7c7c7}body.dark-mode .virtual-keyboard{background-color:#333;box-shadow:0 4px 8px rgba(247,245,245,.1)}body.dark-mode{background-color:#333}body.dark-mode .login-container{background-color:#000;box-shadow:0 4px 8px rgba(247,245,245,.1);color:#fff}body.dark-mode .login-container input{background-color:#3333335d;color:#fff}body.dark-mode .login-container button{background-color:#005703;color:#fff}.fa-keyboard{color:#000}body.dark-mode .keyb .fa-keyboard{color:#ffffffde}body.dark-mode .keyboard-key.key{background-color:#222;color:#ffffffde}[data-key="Caps 🄰"],[data-key="Shift ⇧"],[data-key="Tab ↹"]{min-width:90px}.keyboard-key.key[data-key="Shift ⇧"]{color:#333}.virtual-keyboard.full [data-key=Enter]{min-width:95px}.virtual-keyboard.full [data-key="Shift ⇧"]{min-width:92px}.virtual-keyboard.full [data-key=" "]{min-width:620.8px}.virtual-keyboard.full .concat-keys[data-key="0"]{min-width:102px}.virtual-keyboard.full{min-width:1000px}.virtual-keyboard.Scnum,.virtual-keyboard.numpad{max-width:300px}.hidden{display:none!important}[data-key="Tab ↹"],[data-key=Backspace]{min-width:80px}[data-key="Shift ⇧"]{min-width:100px}[data-key=" "]{min-width:670px} 
+.keyboard-row,.virtual-keyboard{display:flex;display:flex}.keyb,.keyboard-key{cursor:pointer;font-size:16px;text-align:center}.virtual-keyboard{flex-direction:column;width:100%;max-width:800px;margin:0 auto;border:2px solid #333;border-radius:10px;padding:20px;background-color:#f5f5f5;box-shadow:0 4px 10px rgba(0,0,0,.1)}.keyboard-row{justify-content:space-between}.keyboard-key{flex:1;padding:10px 15px;margin:2px;border:1px solid #ccc;border-radius:5px;background-color:#fff;transition:background-color .2s}.keyboard-active,input:focus,textarea:focus{border-color:#007bff;box-shadow:0 0 0 .2rem rgba(0,123,255,.25)}.backspacew{flex:1.5;width:260px}.keyboard-key:hover{background:#e0e0e0}.keyboard-key:active{background:#d0d0d0;transform:translateY(1px)}.keyboard-row{display:flex;justify-content:flex-start;margin:5px 0}.controls{margin-bottom:20px}button,select{margin-right:10px;padding:8px 12px;border:1px solid #ccc;border-radius:4px;font-size:14px;cursor:pointer}button:hover{background:#f0f0f0}input:focus,textarea:focus{outline:0}#keyboard{position:absolute;cursor:move;top:80%;left:50%;transform:translate(-50%,-50%)}.keyb{color:#fff;border:#000;width:40px;height:25px;line-height:50px;margin:8px}.keyboard-row .active{background:#c7c7c7}body.dark-mode .virtual-keyboard{background-color:#333;box-shadow:0 4px 8px rgba(247,245,245,.1)}body.dark-mode{background-color:#333}body.dark-mode .login-container{background-color:#000;box-shadow:0 4px 8px rgba(247,245,245,.1);color:#fff}body.dark-mode .login-container input{background-color:#3333335d;color:#fff}body.dark-mode .login-container button{background-color:#005703;color:#fff}.fa-keyboard{color:#000}body.dark-mode .keyb .fa-keyboard{color:#ffffffde}body.dark-mode .keyboard-key.key{background-color:#222;color:#ffffffde}[data-key="Caps 🄰"],[data-key="Shift ⇧"],[data-key="Tab ↹"]{min-width:90px}.keyboard-key.key[data-key="Shift ⇧"]{color:#333}.virtual-keyboard.full [data-key=Enter]{min-width:95px}.virtual-keyboard.full [data-key="Shift ⇧"]{min-width:92px}.virtual-keyboard.full [data-key=" "]{min-width:563.8px}.virtual-keyboard.full .concat-keys[data-key="0"]{min-width:102px}.virtual-keyboard.full{min-width:1000px}.virtual-keyboard.Scnum,.virtual-keyboard.numpad{max-width:300px}.hidden{display:none!important}[data-key="Tab ↹"],[data-key=Backspace]{min-width:80px}[data-key="Shift ⇧"]{min-width:100px}[data-key=" "]{min-width:670px} 
 `;
 
 export function injectCSS() {