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
parent
daedec6957
commit
84e45b5c40
3 changed files with 242 additions and 32 deletions
|
|
@ -69,14 +69,38 @@
|
|||
</p>
|
||||
|
||||
<div class="hero-install">
|
||||
<div class="install-box">
|
||||
<code id="install-command">curl -fsSL https://raw.githubusercontent.com/NousResearch/hermes-agent/main/scripts/install.sh | bash</code>
|
||||
<button class="copy-btn" onclick="copyInstall()" title="Copy to clipboard">
|
||||
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="9" y="9" width="13" height="13" rx="2" ry="2"/><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"/></svg>
|
||||
<span class="copy-text">Copy</span>
|
||||
</button>
|
||||
<div class="install-widget">
|
||||
<div class="install-widget-header">
|
||||
<div class="install-dots">
|
||||
<span class="dot dot-red"></span>
|
||||
<span class="dot dot-yellow"></span>
|
||||
<span class="dot dot-green"></span>
|
||||
</div>
|
||||
<div class="install-tabs">
|
||||
<button class="install-tab active" data-platform="linux" onclick="switchPlatform('linux')">
|
||||
<svg width="14" height="14" viewBox="0 0 24 24" fill="currentColor" style="opacity:0.7"><path d="M12.504 0c-.155 0-.315.008-.48.021-4.226.333-3.105 4.807-3.17 6.298-.076 1.092-.3 1.953-1.05 3.02-.885 1.051-2.127 2.75-2.716 4.521-.278.832-.41 1.684-.287 2.489a.424.424 0 00-.11.135c-.26.268-.45.6-.663.839-.199.199-.485.267-.797.4-.313.136-.658.269-.864.68-.09.189-.136.394-.132.602 0 .199.027.4.055.536.058.399.116.728.04.97-.249.68-.28 1.145-.106 1.484.174.334.535.47.94.601.81.2 1.91.135 2.774.6.926.466 1.866.67 2.616.47.526-.116.97-.464 1.208-.946.587-.003 1.23-.269 2.26-.334.699-.058 1.574.267 2.577.2.025.134.063.198.114.333l.003.003c.391.778 1.113 1.368 1.884 1.43.39.03.8-.066 1.109-.199.69-.3 1.286-1.006 1.652-1.963.086-.235.188-.479.152-.88-.064-.406-.358-.597-.548-.899-.19-.301-.2-.335-.2-.68 0-.348.076-.664.152-.901.1-.256.233-.478.21-.783l-.003-.003c-.091-.472-.279-.861-.607-1.144-.327-.283-.762-.409-1.032-.433-.18-.04-.33-.063-.44-.143-.12-.09-.21-.29-.19-.543 .029-.272.089-.549.178-.822.188-.57.456-1.128.748-1.633.02-.044.04-.09.06-.133a.205.205 0 00.015-.04c.413-.916.64-1.866.64-2.699 0-1.039-.258-1.904-.608-2.572-.11-.188-.208-.368-.32-.527a.604.604 0 00-.038-.06c-.725-1.05-1.735-1.572-2.74-1.795a6.986 6.986 0 00-1.18-.133h-.005c-.163 0-.32.01-.478.025z"/></svg>
|
||||
Linux / macOS
|
||||
</button>
|
||||
<button class="install-tab" data-platform="powershell" onclick="switchPlatform('powershell')">
|
||||
<svg width="14" height="14" viewBox="0 0 24 24" fill="currentColor" style="opacity:0.7"><path d="M0 3.449L9.75 2.1v9.451H0m10.949-9.602L24 0v11.4H10.949M0 12.6h9.75v9.451L0 20.699M10.949 12.6H24V24l-12.9-1.801"/></svg>
|
||||
PowerShell
|
||||
</button>
|
||||
<button class="install-tab" data-platform="cmd" onclick="switchPlatform('cmd')">
|
||||
<svg width="14" height="14" viewBox="0 0 24 24" fill="currentColor" style="opacity:0.7"><path d="M0 3.449L9.75 2.1v9.451H0m10.949-9.602L24 0v11.4H10.949M0 12.6h9.75v9.451L0 20.699M10.949 12.6H24V24l-12.9-1.801"/></svg>
|
||||
CMD
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="install-widget-body">
|
||||
<span class="install-prompt" id="install-prompt">$</span>
|
||||
<code id="install-command">curl -fsSL https://raw.githubusercontent.com/NousResearch/hermes-agent/main/scripts/install.sh | bash</code>
|
||||
<button class="copy-btn" onclick="copyInstall()" title="Copy to clipboard">
|
||||
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="9" y="9" width="13" height="13" rx="2" ry="2"/><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"/></svg>
|
||||
<span class="copy-text">Copy</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<p class="install-note">Works on Linux & macOS · No Python prerequisite · Installs everything automatically</p>
|
||||
<p class="install-note" id="install-note">Works on Linux, macOS & WSL · No prerequisites · Installs everything automatically</p>
|
||||
</div>
|
||||
|
||||
<div class="hero-links">
|
||||
|
|
@ -330,12 +354,16 @@
|
|||
<h4>Install</h4>
|
||||
<div class="code-block">
|
||||
<div class="code-header">
|
||||
<span>bash</span>
|
||||
<button class="copy-btn" onclick="copyText(this)" data-text="curl -fsSL https://raw.githubusercontent.com/NousResearch/hermes-agent/main/scripts/install.sh | bash">Copy</button>
|
||||
<div class="code-tabs">
|
||||
<button class="code-tab active" data-platform="linux" onclick="switchStepPlatform('linux')">Linux / macOS</button>
|
||||
<button class="code-tab" data-platform="powershell" onclick="switchStepPlatform('powershell')">PowerShell</button>
|
||||
<button class="code-tab" data-platform="cmd" onclick="switchStepPlatform('cmd')">CMD</button>
|
||||
</div>
|
||||
<button class="copy-btn" id="step1-copy" onclick="copyText(this)" data-text="curl -fsSL https://raw.githubusercontent.com/NousResearch/hermes-agent/main/scripts/install.sh | bash">Copy</button>
|
||||
</div>
|
||||
<pre><code>curl -fsSL https://raw.githubusercontent.com/NousResearch/hermes-agent/main/scripts/install.sh | bash</code></pre>
|
||||
<pre><code id="step1-command">curl -fsSL https://raw.githubusercontent.com/NousResearch/hermes-agent/main/scripts/install.sh | bash</code></pre>
|
||||
</div>
|
||||
<p class="step-note">Installs uv, Python 3.11, clones the repo, sets up everything. No sudo needed.</p>
|
||||
<p class="step-note" id="step1-note">Installs uv, Python 3.11, clones the repo, sets up everything. No sudo needed.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
@ -394,14 +422,7 @@ hermes gateway install</code></pre>
|
|||
</div>
|
||||
|
||||
<div class="install-windows">
|
||||
<p>Windows? Use WSL or PowerShell:</p>
|
||||
<div class="code-block code-block-sm">
|
||||
<div class="code-header">
|
||||
<span>powershell</span>
|
||||
<button class="copy-btn" onclick="copyText(this)" data-text="irm https://raw.githubusercontent.com/NousResearch/hermes-agent/main/scripts/install.ps1 | iex">Copy</button>
|
||||
</div>
|
||||
<pre><code>irm https://raw.githubusercontent.com/NousResearch/hermes-agent/main/scripts/install.ps1 | iex</code></pre>
|
||||
</div>
|
||||
<p>🪟 Windows requires <a href="https://git-scm.com/download/win" target="_blank" rel="noopener">Git for Windows</a> — Hermes uses Git Bash internally for shell commands.</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue