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

add formatting

Browse Source
This commit is contained in:
Reese Wells
2026-05-30 21:32:35 -04:00
parent f34ac3210e
commit 13a7306d5b
3 changed files with 901 additions and 692 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/index.html
+570 -455
View File
File diff suppressed because it is too large Load Diff
src/script.js
+79 -79
View File
@@ -78,7 +78,7 @@ function createServerRack() {
const isSwitch = i > 0 && (i % 7 === 0 || i % 11 === 0); const isSwitch = i > 0 && (i % 7 === 0 || i % 11 === 0);
if (isSwitch) { if (isSwitch) {
const switchFace = document.createElement('div'); const switchFace = document.createElement('div');
switchFace.className = 'eth-switch-face'; switchFace.className = 'eth-switch-face';
@@ -273,99 +273,99 @@ function createServerRack() {
content.innerHTML = ''; content.innerHTML = '';
} }
if (cmdText === 'exit') { if (cmdText === 'exit') {
if (!isRoot) { if (!isRoot) {
const newAchievements = checkAchievements(cmdText, false); const newAchievements = checkAchievements(cmdText, false);
if (newAchievements.length > 0) { if (newAchievements.length > 0) {
revealAchievements(); revealAchievements();
newAchievements.forEach(a => showToast(a)); newAchievements.forEach(a => showToast(a));
} }
isLoginScreen = true; isLoginScreen = true;
document.body.innerHTML = ''; document.body.innerHTML = '';
document.body.style.background = '#000'; document.body.style.background = '#000';
document.body.style.color = '#fff'; document.body.style.color = '#fff';
document.body.style.fontFamily = 'monospace'; document.body.style.fontFamily = 'monospace';
document.body.style.padding = '20px'; document.body.style.padding = '20px';
document.body.style.minHeight = '100vh'; document.body.style.minHeight = '100vh';
document.body.style.margin = '0'; document.body.style.margin = '0';
document.body.style.lineHeight = '1.6'; document.body.style.lineHeight = '1.6';
const loginContainer = document.createElement('div'); const loginContainer = document.createElement('div');
loginContainer.style.marginBottom = '10px'; loginContainer.style.marginBottom = '10px';
loginContainer.textContent = 'homelab tty1'; loginContainer.textContent = 'homelab tty1';
document.body.appendChild(loginContainer); document.body.appendChild(loginContainer);
const loginInput = document.createElement('input'); const loginInput = document.createElement('input');
loginInput.type = 'text'; loginInput.type = 'text';
loginInput.style.background = 'transparent'; loginInput.style.background = 'transparent';
loginInput.style.border = 'none'; loginInput.style.border = 'none';
loginInput.style.outline = 'none'; loginInput.style.outline = 'none';
loginInput.style.color = '#fff'; loginInput.style.color = '#fff';
loginInput.style.fontFamily = 'monospace'; loginInput.style.fontFamily = 'monospace';
loginInput.style.fontSize = '14px'; loginInput.style.fontSize = '14px';
loginInput.style.width = '300px'; loginInput.style.width = '300px';
loginInput.style.caretColor = '#fff'; loginInput.style.caretColor = '#fff';
loginInput.autofocus = true; loginInput.autofocus = true;
const loginLine = document.createElement('div'); const loginLine = document.createElement('div');
loginLine.style.marginBottom = '20px'; loginLine.style.marginBottom = '20px';
loginLine.appendChild(document.createTextNode('homelab login: ')); loginLine.appendChild(document.createTextNode('homelab login: '));
loginLine.appendChild(loginInput); loginLine.appendChild(loginInput);
document.body.appendChild(loginLine); document.body.appendChild(loginLine);
loginInput.focus(); loginInput.focus();
const handleLogin = (e) => { const handleLogin = (e) => {
if (e.key === 'Enter') { if (e.key === 'Enter') {
const deniedLine = document.createElement('div'); const deniedLine = document.createElement('div');
deniedLine.textContent = 'Access denied'; deniedLine.textContent = 'Access denied';
deniedLine.style.marginTop = '10px'; deniedLine.style.marginTop = '10px';
document.body.appendChild(deniedLine); document.body.appendChild(deniedLine);
const newLoginLine = document.createElement('div'); const newLoginLine = document.createElement('div');
newLoginLine.style.marginTop = '10px'; newLoginLine.style.marginTop = '10px';
const newInput = document.createElement('input'); const newInput = document.createElement('input');
newInput.type = 'text'; newInput.type = 'text';
newInput.style.background = 'transparent'; newInput.style.background = 'transparent';
newInput.style.border = 'none'; newInput.style.border = 'none';
newInput.style.outline = 'none'; newInput.style.outline = 'none';
newInput.style.color = '#fff'; newInput.style.color = '#fff';
newInput.style.fontFamily = 'monospace'; newInput.style.fontFamily = 'monospace';
newInput.style.fontSize = '14px'; newInput.style.fontSize = '14px';
newInput.style.width = '300px'; newInput.style.width = '300px';
newInput.style.caretColor = '#fff'; newInput.style.caretColor = '#fff';
newInput.autofocus = true; newInput.autofocus = true;
newLoginLine.appendChild(document.createTextNode('homelab login: ')); newLoginLine.appendChild(document.createTextNode('homelab login: '));
newLoginLine.appendChild(newInput); newLoginLine.appendChild(newInput);
document.body.appendChild(newLoginLine); document.body.appendChild(newLoginLine);
loginInput.remove(); loginInput.remove();
newInput.focus(); newInput.focus();
newInput.addEventListener('keydown', handleLogin); newInput.addEventListener('keydown', handleLogin);
} }
}; };
loginInput.addEventListener('keydown', handleLogin); loginInput.addEventListener('keydown', handleLogin);
return; return;
} else { } else {
isRoot = false; isRoot = false;
} }
const newLine = document.createElement('div'); const newLine = document.createElement('div');
newLine.innerHTML = '<span class="terminal-prompt">$</span> '; newLine.innerHTML = '<span class="terminal-prompt">$</span> ';
content.appendChild(newLine); content.appendChild(newLine);
const newCursor = document.createElement('span'); const newCursor = document.createElement('span');
newCursor.className = 'terminal-cursor'; newCursor.className = 'terminal-cursor';
newLine.appendChild(newCursor); newLine.appendChild(newCursor);
content.scrollTop = content.scrollHeight; content.scrollTop = content.scrollHeight;
return; return;
} }
if (cmdText === 'rm -rf /') { if (cmdText === 'rm -rf /') {
if (!isRoot) { if (!isRoot) {
src/style.css
+139 -45
View File
@@ -1,4 +1,6 @@
*, *::before, *::after { *,
*::before,
*::after {
margin: 0; margin: 0;
padding: 0; padding: 0;
box-sizing: border-box; box-sizing: border-box;
@@ -225,13 +227,11 @@ body {
content: ''; content: '';
position: absolute; position: absolute;
inset: 0; inset: 0;
background: repeating-linear-gradient( background: repeating-linear-gradient(0deg,
0deg, transparent,
transparent, transparent 2px,
transparent 2px, rgba(0, 0, 0, 0.15) 2px,
rgba(0, 0, 0, 0.15) 2px, rgba(0, 0, 0, 0.15) 4px);
rgba(0, 0, 0, 0.15) 4px
);
z-index: 1; z-index: 1;
pointer-events: none; pointer-events: none;
} }
@@ -270,8 +270,15 @@ body {
} }
@keyframes cursorBlink { @keyframes cursorBlink {
0%, 100% { opacity: 1; }
50% { opacity: 0; } 0%,
100% {
opacity: 1;
}
50% {
opacity: 0;
}
} }
.eth-brand { .eth-brand {
@@ -506,8 +513,13 @@ body {
} }
@keyframes spin { @keyframes spin {
from { transform: rotate(0deg); } from {
to { transform: rotate(360deg); } transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
} }
.fan-slow { .fan-slow {
@@ -572,25 +584,59 @@ body {
} }
@keyframes blink1 { @keyframes blink1 {
0%, 100% { opacity: 1; }
50% { opacity: 0.2; } 0%,
100% {
opacity: 1;
}
50% {
opacity: 0.2;
}
} }
@keyframes blink2 { @keyframes blink2 {
0%, 100% { opacity: 0.3; }
50% { opacity: 1; } 0%,
100% {
opacity: 0.3;
}
50% {
opacity: 1;
}
} }
@keyframes blink3 { @keyframes blink3 {
0%, 100% { opacity: 1; }
30% { opacity: 0.1; } 0%,
60% { opacity: 0.8; } 100% {
opacity: 1;
}
30% {
opacity: 0.1;
}
60% {
opacity: 0.8;
}
} }
@keyframes blink4 { @keyframes blink4 {
0%, 100% { opacity: 0.5; }
25% { opacity: 1; } 0%,
75% { opacity: 0.2; } 100% {
opacity: 0.5;
}
25% {
opacity: 1;
}
75% {
opacity: 0.2;
}
} }
.rack-mount { .rack-mount {
@@ -649,13 +695,11 @@ body {
left: 0; left: 0;
right: 0; right: 0;
bottom: 0; bottom: 0;
background: repeating-linear-gradient( background: repeating-linear-gradient(180deg,
180deg, transparent,
transparent, transparent 20px,
transparent 20px, rgba(0, 0, 0, 0.3) 20px,
rgba(0, 0, 0, 0.3) 20px, rgba(0, 0, 0, 0.3) 21px);
rgba(0, 0, 0, 0.3) 21px
);
} }
.rack-label { .rack-label {
@@ -808,8 +852,15 @@ nav .nav-inner {
} }
@keyframes pulse { @keyframes pulse {
0%, 100% { opacity: 1; }
50% { opacity: 0.4; } 0%,
100% {
opacity: 1;
}
50% {
opacity: 0.4;
}
} }
.hero h1 { .hero h1 {
@@ -1234,12 +1285,30 @@ section {
line-height: 1.8; line-height: 1.8;
} }
.code-keyword { color: #c084fc; } .code-keyword {
.code-function { color: #60a5fa; } color: #c084fc;
.code-string { color: #34d399; } }
.code-comment { color: #52525b; font-style: italic; }
.code-variable { color: #f472b6; } .code-function {
.code-operator { color: #fbbf24; } color: #60a5fa;
}
.code-string {
color: #34d399;
}
.code-comment {
color: #52525b;
font-style: italic;
}
.code-variable {
color: #f472b6;
}
.code-operator {
color: #fbbf24;
}
.project-info { .project-info {
padding: 1.5rem; padding: 1.5rem;
@@ -1625,6 +1694,7 @@ footer p {
opacity: 0; opacity: 0;
transform: translateX(100px) scale(0.9); transform: translateX(100px) scale(0.9);
} }
to { to {
opacity: 1; opacity: 1;
transform: translateX(0) scale(1); transform: translateX(0) scale(1);
@@ -1636,6 +1706,7 @@ footer p {
opacity: 1; opacity: 1;
transform: translateX(0) scale(1); transform: translateX(0) scale(1);
} }
to { to {
opacity: 0; opacity: 0;
transform: translateX(100px) scale(0.9); transform: translateX(100px) scale(0.9);
@@ -1679,14 +1750,37 @@ footer p {
transform: translateY(0); transform: translateY(0);
} }
.nav-links.active li:nth-child(1) { transition-delay: 0.05s; } .nav-links.active li:nth-child(1) {
.nav-links.active li:nth-child(2) { transition-delay: 0.1s; } transition-delay: 0.05s;
.nav-links.active li:nth-child(3) { transition-delay: 0.15s; } }
.nav-links.active li:nth-child(4) { transition-delay: 0.2s; }
.nav-links.active li:nth-child(5) { transition-delay: 0.25s; } .nav-links.active li:nth-child(2) {
.nav-links.active li:nth-child(6) { transition-delay: 0.3s; } transition-delay: 0.1s;
.nav-links.active li:nth-child(7) { transition-delay: 0.35s; } }
.nav-links.active li:nth-child(8) { transition-delay: 0.4s; }
.nav-links.active li:nth-child(3) {
transition-delay: 0.15s;
}
.nav-links.active li:nth-child(4) {
transition-delay: 0.2s;
}
.nav-links.active li:nth-child(5) {
transition-delay: 0.25s;
}
.nav-links.active li:nth-child(6) {
transition-delay: 0.3s;
}
.nav-links.active li:nth-child(7) {
transition-delay: 0.35s;
}
.nav-links.active li:nth-child(8) {
transition-delay: 0.4s;
}
.hamburger { .hamburger {
display: flex; display: flex;