fade in and out terminal on focus
Build and Push Container / build-and-push (push) Successful in 28s

This commit is contained in:
2026-05-28 16:33:56 -04:00
parent 23ed5b510b
commit 20100800a1
2 changed files with 20 additions and 2 deletions
+10
View File
@@ -529,11 +529,13 @@ function createServerRack() {
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';
terminal.classList.add('grown');
terminal.classList.add('opaque');
const face = terminal.closest('.server-face');
const unit = face?.closest('.rack-unit');
face?.classList.add('grown');
unit?.classList.add('grown');
document.getElementById('hero').classList.add('shifted');
document.querySelector('.rack-container')?.classList.add('opaque');
});
terminal.addEventListener('blur', () => {
@@ -541,11 +543,13 @@ function createServerRack() {
terminal.style.boxShadow = '';
terminal.style.borderColor = '#2a2a2e';
terminal.classList.remove('grown');
terminal.classList.remove('opaque');
const face = terminal.closest('.server-face');
const unit = face?.closest('.rack-unit');
face?.classList.remove('grown');
unit?.classList.remove('grown');
document.getElementById('hero').classList.remove('shifted');
document.querySelector('.rack-container')?.classList.remove('opaque');
});
mobileInput.addEventListener('keydown', (e) => {
@@ -559,11 +563,13 @@ function createServerRack() {
terminal.style.boxShadow = '';
terminal.style.borderColor = '#2a2a2e';
terminal.classList.remove('grown');
terminal.classList.remove('opaque');
const face = terminal.closest('.server-face');
const unit = face?.closest('.rack-unit');
face?.classList.remove('grown');
unit?.classList.remove('grown');
document.getElementById('hero').classList.remove('shifted');
document.querySelector('.rack-container')?.classList.remove('opaque');
});
let lastInputValue = '';
@@ -777,20 +783,24 @@ heroEl.addEventListener('click', (e) => {
if (activeTerminal && activeTerminal._mobileInput) {
if (activeTerminal.classList.contains('grown')) {
activeTerminal.classList.remove('grown');
activeTerminal.classList.remove('opaque');
const face = activeTerminal.closest('.server-face');
const unit = face?.closest('.rack-unit');
face?.classList.remove('grown');
unit?.classList.remove('grown');
heroEl.classList.remove('shifted');
activeTerminal._mobileInput.blur();
document.querySelector('.rack-container')?.classList.remove('opaque');
} else {
activeTerminal._mobileInput.focus();
activeTerminal.classList.add('grown');
activeTerminal.classList.add('opaque');
const face = activeTerminal.closest('.server-face');
const unit = face?.closest('.rack-unit');
face?.classList.add('grown');
unit?.classList.add('grown');
heroEl.classList.add('shifted');
document.querySelector('.rack-container')?.classList.add('opaque');
}
}
});