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.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.style.borderColor = '#eab308';
terminal.classList.add('grown'); terminal.classList.add('grown');
terminal.classList.add('opaque');
const face = terminal.closest('.server-face'); const face = terminal.closest('.server-face');
const unit = face?.closest('.rack-unit'); const unit = face?.closest('.rack-unit');
face?.classList.add('grown'); face?.classList.add('grown');
unit?.classList.add('grown'); unit?.classList.add('grown');
document.getElementById('hero').classList.add('shifted'); document.getElementById('hero').classList.add('shifted');
document.querySelector('.rack-container')?.classList.add('opaque');
}); });
terminal.addEventListener('blur', () => { terminal.addEventListener('blur', () => {
@@ -541,11 +543,13 @@ function createServerRack() {
terminal.style.boxShadow = ''; terminal.style.boxShadow = '';
terminal.style.borderColor = '#2a2a2e'; terminal.style.borderColor = '#2a2a2e';
terminal.classList.remove('grown'); terminal.classList.remove('grown');
terminal.classList.remove('opaque');
const face = terminal.closest('.server-face'); const face = terminal.closest('.server-face');
const unit = face?.closest('.rack-unit'); const unit = face?.closest('.rack-unit');
face?.classList.remove('grown'); face?.classList.remove('grown');
unit?.classList.remove('grown'); unit?.classList.remove('grown');
document.getElementById('hero').classList.remove('shifted'); document.getElementById('hero').classList.remove('shifted');
document.querySelector('.rack-container')?.classList.remove('opaque');
}); });
mobileInput.addEventListener('keydown', (e) => { mobileInput.addEventListener('keydown', (e) => {
@@ -559,11 +563,13 @@ function createServerRack() {
terminal.style.boxShadow = ''; terminal.style.boxShadow = '';
terminal.style.borderColor = '#2a2a2e'; terminal.style.borderColor = '#2a2a2e';
terminal.classList.remove('grown'); terminal.classList.remove('grown');
terminal.classList.remove('opaque');
const face = terminal.closest('.server-face'); const face = terminal.closest('.server-face');
const unit = face?.closest('.rack-unit'); const unit = face?.closest('.rack-unit');
face?.classList.remove('grown'); face?.classList.remove('grown');
unit?.classList.remove('grown'); unit?.classList.remove('grown');
document.getElementById('hero').classList.remove('shifted'); document.getElementById('hero').classList.remove('shifted');
document.querySelector('.rack-container')?.classList.remove('opaque');
}); });
let lastInputValue = ''; let lastInputValue = '';
@@ -777,20 +783,24 @@ heroEl.addEventListener('click', (e) => {
if (activeTerminal && activeTerminal._mobileInput) { if (activeTerminal && activeTerminal._mobileInput) {
if (activeTerminal.classList.contains('grown')) { if (activeTerminal.classList.contains('grown')) {
activeTerminal.classList.remove('grown'); activeTerminal.classList.remove('grown');
activeTerminal.classList.remove('opaque');
const face = activeTerminal.closest('.server-face'); const face = activeTerminal.closest('.server-face');
const unit = face?.closest('.rack-unit'); const unit = face?.closest('.rack-unit');
face?.classList.remove('grown'); face?.classList.remove('grown');
unit?.classList.remove('grown'); unit?.classList.remove('grown');
heroEl.classList.remove('shifted'); heroEl.classList.remove('shifted');
activeTerminal._mobileInput.blur(); activeTerminal._mobileInput.blur();
document.querySelector('.rack-container')?.classList.remove('opaque');
} else { } else {
activeTerminal._mobileInput.focus(); activeTerminal._mobileInput.focus();
activeTerminal.classList.add('grown'); activeTerminal.classList.add('grown');
activeTerminal.classList.add('opaque');
const face = activeTerminal.closest('.server-face'); const face = activeTerminal.closest('.server-face');
const unit = face?.closest('.rack-unit'); const unit = face?.closest('.rack-unit');
face?.classList.add('grown'); face?.classList.add('grown');
unit?.classList.add('grown'); unit?.classList.add('grown');
heroEl.classList.add('shifted'); 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; top: 100px;
transform: translateX(-50%); transform: translateX(-50%);
width: 680px; width: 680px;
transition: transform 0.1s linear; transition: transform 0.1s linear, opacity 0.5s ease;
opacity: 0.4; opacity: 0.4;
pointer-events: auto; pointer-events: auto;
} }
.rack-container.opaque {
opacity: 1;
}
.rack-top-bar { .rack-top-bar {
width: 100%; width: 100%;
height: 36px; height: 36px;
@@ -201,7 +205,11 @@ body {
position: relative; position: relative;
overflow: hidden; overflow: hidden;
cursor: text; 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 { .terminal-display.grown {