feat: tabbed platform installer on landing page

Add an interactive OS selector widget to the hero section and install
steps, inspired by OpenClaw's install UI:

- macOS-style window chrome with red/yellow/green dots
- Three clickable tabs: Linux/macOS, PowerShell, CMD
- Command text, shell prompt, and note update on tab click
- Auto-detects visitor's OS and selects the right tab on page load
- Install steps section also gets synced platform tabs
- Simplified Windows note section (tabs above now cover all platforms)
- Fully responsive — icons hidden on mobile, tabs wrap properly
This commit is contained in:
teknium1
2026-03-02 22:03:43 -08:00
parent daedec6957
commit 84e45b5c40
3 changed files with 242 additions and 32 deletions

View File

@@ -2,11 +2,79 @@
// Hermes Agent Landing Page — Interactions
// =========================================================================
// --- Platform install commands ---
const PLATFORMS = {
linux: {
command: 'curl -fsSL https://raw.githubusercontent.com/NousResearch/hermes-agent/main/scripts/install.sh | bash',
prompt: '$',
note: 'Works on Linux, macOS & WSL · No prerequisites · Installs everything automatically',
stepNote: 'Installs uv, Python 3.11, clones the repo, sets up everything. No sudo needed.',
},
powershell: {
command: 'irm https://raw.githubusercontent.com/NousResearch/hermes-agent/main/scripts/install.ps1 | iex',
prompt: 'PS>',
note: 'Windows PowerShell · Requires Git for Windows · Installs everything automatically',
stepNote: 'Requires Git for Windows. Installs uv, Python 3.11, sets up everything.',
},
cmd: {
command: 'curl -fsSL https://raw.githubusercontent.com/NousResearch/hermes-agent/main/scripts/install.cmd -o install.cmd && install.cmd && del install.cmd',
prompt: '>',
note: 'Windows CMD · Requires Git for Windows · Installs everything automatically',
stepNote: 'Requires Git for Windows. Downloads and runs the installer, then cleans up.',
},
};
function detectPlatform() {
const ua = navigator.userAgent.toLowerCase();
if (ua.includes('win')) return 'powershell';
return 'linux';
}
function switchPlatform(platform) {
const cfg = PLATFORMS[platform];
if (!cfg) return;
// Update hero install widget
const commandEl = document.getElementById('install-command');
const promptEl = document.getElementById('install-prompt');
const noteEl = document.getElementById('install-note');
if (commandEl) commandEl.textContent = cfg.command;
if (promptEl) promptEl.textContent = cfg.prompt;
if (noteEl) noteEl.textContent = cfg.note;
// Update active tab in hero
document.querySelectorAll('.install-tab').forEach(tab => {
tab.classList.toggle('active', tab.dataset.platform === platform);
});
// Sync the step section tabs too
switchStepPlatform(platform);
}
function switchStepPlatform(platform) {
const cfg = PLATFORMS[platform];
if (!cfg) return;
const commandEl = document.getElementById('step1-command');
const copyBtn = document.getElementById('step1-copy');
const noteEl = document.getElementById('step1-note');
if (commandEl) commandEl.textContent = cfg.command;
if (copyBtn) copyBtn.setAttribute('data-text', cfg.command);
if (noteEl) noteEl.textContent = cfg.stepNote;
// Update active tab in step section
document.querySelectorAll('.code-tab').forEach(tab => {
tab.classList.toggle('active', tab.dataset.platform === platform);
});
}
// --- Copy to clipboard ---
function copyInstall() {
const text = document.getElementById('install-command').textContent;
navigator.clipboard.writeText(text).then(() => {
const btn = document.querySelector('.hero-install .copy-btn');
const btn = document.querySelector('.install-widget-body .copy-btn');
const original = btn.querySelector('.copy-text').textContent;
btn.querySelector('.copy-text').textContent = 'Copied!';
btn.style.color = 'var(--gold)';
@@ -243,6 +311,10 @@ class TerminalDemo {
// --- Initialize ---
document.addEventListener('DOMContentLoaded', () => {
// Auto-detect platform and set the right install command
const detectedPlatform = detectPlatform();
switchPlatform(detectedPlatform);
initScrollAnimations();
// Terminal demo - start when visible