services/homepage
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
Reese Wells
2026-05-28 16:33:56 -04:00
parent 23ed5b510b
commit 20100800a1
2 changed files with 20 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/script.js
+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');
}
}
});
src/style.css
+10 -2
View File
@@ -51,11 +51,15 @@ body {
top: 100px;
transform: translateX(-50%);
width: 680px;
transition: transform 0.1s linear;
transition: transform 0.1s linear, opacity 0.5s ease;
opacity: 0.4;
pointer-events: auto;
}
.rack-container.opaque {
opacity: 1;
}
.rack-top-bar {
width: 100%;
height: 36px;
@@ -201,7 +205,11 @@ body {
position: relative;
overflow: hidden;
cursor: text;
transition: height 0.5s cubic-bezier(0.16, 1, 0.3, 1);
transition: height 0.5s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.5s ease;
}
.terminal-display.opaque {
opacity: 1;
}
.terminal-display.grown {