diff --git a/website/styles.css b/website/styles.css index 26b6c5a..b219eb7 100644 --- a/website/styles.css +++ b/website/styles.css @@ -439,6 +439,56 @@ body { } } +/* Very skinny screens - no border at all */ +@media (max-width: 350px) { + .crt-border-overlay { + display: none; + } + + .container, + .boot-screen { + top: 0; + left: 0; + right: 0; + bottom: 0; + border-radius: 0; + border: none; + } + + .terminal-header { + border-bottom: 1px solid #0f0; + } + + .status-bar { + border-top: 1px solid #0f0; + } +} + +/* Keyboard open on mobile - detected via JS */ +body.keyboard-open .crt-border-overlay { + display: none; +} + +body.keyboard-open .container, +body.keyboard-open .boot-screen { + top: 0; + left: 0; + right: 0; + bottom: 0; + border-radius: 0; + border: none; +} + +body.keyboard-open .terminal-header { + border-bottom: 1px solid #0f0; + padding: 3px 8px; +} + +body.keyboard-open .status-bar { + border-top: 1px solid #0f0; + padding: 3px 8px; +} + /* Scrollbar styling */ ::-webkit-scrollbar { width: 8px; diff --git a/website/terminal.js b/website/terminal.js index 22508f3..8939482 100644 --- a/website/terminal.js +++ b/website/terminal.js @@ -125,6 +125,40 @@ window.addEventListener('resize', () => { adjustFontSize(); }); +// Mobile keyboard detection using Visual Viewport API +let initialViewportHeight = window.innerHeight; + +/** + * Detect if mobile keyboard is open based on viewport height reduction + */ +function checkKeyboardState() { + if (window.visualViewport) { + const viewportHeight = window.visualViewport.height; + const heightReduction = initialViewportHeight - viewportHeight; + // If viewport shrank by more than 150px, keyboard is likely open + if (heightReduction > 150) { + document.body.classList.add('keyboard-open'); + } else { + document.body.classList.remove('keyboard-open'); + } + } +} + +if (window.visualViewport) { + window.visualViewport.addEventListener('resize', () => { + checkKeyboardState(); + adjustFontSize(); + setTimeout(positionInlineInput, 50); + }); +} + +// Update initial height on orientation change +window.addEventListener('orientationchange', () => { + setTimeout(() => { + initialViewportHeight = window.innerHeight; + }, 300); +}); + // Update system time function updateTime() { const now = new Date(); @@ -970,10 +1004,6 @@ const welcomeBannerFull = [ ' ███████╗██║ ██║██╗██║ ██║╚██████╔╝ ╚████╔╝██╗╚███╔███╔╝ ██║ ██║ ', ' ╚══════╝╚═╝ ╚═╝╚═╝╚═╝ ╚═╝ ╚═════╝ ╚═══╝ ╚═╝ ╚══╝╚══╝ ╚═╝ ╚═╝ ', '', - ' ▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓', - ' ░░ TERMINAL v' + VERSION + ' · EST 2024 · LITRUV ░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░', - ' ▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓', - '', ' Type "help" for available commands.', ' Use ↑/↓ arrows to navigate command history.', ''