Oliver
922 lines
36 KiB
HTML
922 lines
36 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="en">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>Hermes Hosting — Find Your Perfect Setup</title>
|
||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600&display=swap" rel="stylesheet">
|
||
<style>
|
||
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
|
||
:root {
|
||
--bg-base: #0a0a0b;
|
||
--bg-surface: #121213;
|
||
--bg-card: #18181b;
|
||
--bg-elevated: #1f1f23;
|
||
--bg-hover: #27272a;
|
||
--border-color: #2a2a2e;
|
||
--border-light: #3a3a40;
|
||
--text-primary: #f4f4f5;
|
||
--text-secondary: #a1a1aa;
|
||
--text-tertiary: #71717a;
|
||
--accent: #a78bfa;
|
||
--accent-dim: #7c3aed;
|
||
--accent-glow: rgba(167, 139, 250, 0.15);
|
||
--green: #4ade80;
|
||
--green-dim: #22c55e;
|
||
--yellow: #fbbf24;
|
||
--orange: #fb923c;
|
||
--red: #f87171;
|
||
--blue: #60a5fa;
|
||
--radius: 12px;
|
||
--radius-sm: 8px;
|
||
--radius-lg: 16px;
|
||
}
|
||
html { scroll-behavior: smooth; }
|
||
body {
|
||
font-family: 'Inter', system-ui, -apple-system, sans-serif;
|
||
background: var(--bg-base);
|
||
color: var(--text-primary);
|
||
line-height: 1.6;
|
||
-webkit-font-smoothing: antialiased;
|
||
}
|
||
|
||
/* ─── Header / Hero ─── */
|
||
header {
|
||
padding: 24px 0 0;
|
||
border-bottom: 1px solid var(--border-color);
|
||
}
|
||
.nav-inner {
|
||
max-width: 1200px;
|
||
margin: 0 auto;
|
||
padding: 0 24px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
}
|
||
.logo {
|
||
font-weight: 700;
|
||
font-size: 20px;
|
||
letter-spacing: -0.5px;
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 8px;
|
||
}
|
||
.logo span { color: var(--accent); }
|
||
.logo-icon {
|
||
width: 28px; height: 28px;
|
||
background: linear-gradient(135deg, var(--accent), var(--accent-dim));
|
||
border-radius: 6px;
|
||
display: inline-flex; align-items: center; justify-content: center;
|
||
font-size: 14px; font-weight: 800; color: #fff;
|
||
}
|
||
.nav-links { display: flex; gap: 24px; align-items: center; }
|
||
.nav-links a {
|
||
color: var(--text-secondary); text-decoration: none;
|
||
font-size: 14px; font-weight: 500; transition: color 0.2s;
|
||
}
|
||
.nav-links a:hover { color: var(--text-primary); }
|
||
.hero {
|
||
max-width: 1200px; margin: 0 auto; padding: 80px 24px 60px;
|
||
text-align: center;
|
||
}
|
||
.hero-label {
|
||
display: inline-block;
|
||
padding: 4px 14px;
|
||
border-radius: 100px;
|
||
background: var(--accent-glow);
|
||
border: 1px solid rgba(167,139,250,0.25);
|
||
color: var(--accent);
|
||
font-size: 13px; font-weight: 600;
|
||
margin-bottom: 24px;
|
||
}
|
||
.hero h1 {
|
||
font-size: clamp(36px, 6vw, 64px);
|
||
font-weight: 800;
|
||
letter-spacing: -2px;
|
||
line-height: 1.1;
|
||
margin-bottom: 20px;
|
||
}
|
||
.hero h1 .highlight {
|
||
background: linear-gradient(135deg, var(--accent), #c084fc);
|
||
-webkit-background-clip: text; -webkit-text-fill-color: transparent;
|
||
background-clip: text;
|
||
}
|
||
.hero p {
|
||
font-size: 18px; color: var(--text-secondary);
|
||
max-width: 640px; margin: 0 auto 32px;
|
||
}
|
||
.hero-btns { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
|
||
.btn {
|
||
display: inline-flex; align-items: center; gap: 8px;
|
||
padding: 12px 28px; border-radius: var(--radius-sm);
|
||
font-weight: 600; font-size: 15px; text-decoration: none;
|
||
transition: all 0.2s; cursor: pointer; border: none;
|
||
}
|
||
.btn-primary {
|
||
background: linear-gradient(135deg, var(--accent-dim), var(--accent));
|
||
color: #fff;
|
||
}
|
||
.btn-primary:hover { transform: translateY(-1px); box-shadow: 0 8px 24px var(--accent-glow); }
|
||
.btn-secondary {
|
||
background: var(--bg-card); color: var(--text-primary);
|
||
border: 1px solid var(--border-color);
|
||
}
|
||
.btn-secondary:hover { background: var(--bg-hover); border-color: var(--border-light); }
|
||
|
||
/* ─── Section common ─── */
|
||
section { max-width: 1200px; margin: 0 auto; padding: 80px 24px; }
|
||
.section-label {
|
||
display: inline-block;
|
||
padding: 3px 12px;
|
||
border-radius: 100px;
|
||
background: var(--accent-glow);
|
||
color: var(--accent);
|
||
font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px;
|
||
margin-bottom: 12px;
|
||
}
|
||
.section-title {
|
||
font-size: clamp(28px, 4vw, 40px);
|
||
font-weight: 700;
|
||
letter-spacing: -1px;
|
||
margin-bottom: 16px;
|
||
}
|
||
.section-sub {
|
||
color: var(--text-secondary);
|
||
font-size: 16px;
|
||
max-width: 580px;
|
||
margin-bottom: 48px;
|
||
}
|
||
|
||
/* ─── Options Overview ─── */
|
||
.options-grid {
|
||
display: grid;
|
||
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
|
||
gap: 16px;
|
||
margin-bottom: 64px;
|
||
}
|
||
.option-card {
|
||
background: var(--bg-card);
|
||
border: 1px solid var(--border-color);
|
||
border-radius: var(--radius);
|
||
padding: 28px;
|
||
transition: all 0.25s;
|
||
position: relative;
|
||
overflow: hidden;
|
||
}
|
||
.option-card:hover {
|
||
border-color: var(--border-light);
|
||
transform: translateY(-2px);
|
||
}
|
||
.option-card.recommended {
|
||
border-color: rgba(167,139,250,0.4);
|
||
background: linear-gradient(180deg, rgba(167,139,250,0.06), var(--bg-card));
|
||
}
|
||
.option-card.recommended::before {
|
||
content: 'Recommended';
|
||
position: absolute; top: 12px; right: 12px;
|
||
font-size: 10px; font-weight: 700; text-transform: uppercase;
|
||
letter-spacing: 0.8px;
|
||
padding: 2px 10px;
|
||
border-radius: 100px;
|
||
background: var(--accent-glow);
|
||
color: var(--accent);
|
||
border: 1px solid rgba(167,139,250,0.25);
|
||
}
|
||
.option-icon {
|
||
width: 44px; height: 44px;
|
||
border-radius: 10px;
|
||
display: flex; align-items: center; justify-content: center;
|
||
font-size: 20px; margin-bottom: 16px;
|
||
}
|
||
.option-icon.purple { background: rgba(167,139,250,0.15); }
|
||
.option-icon.blue { background: rgba(96,165,250,0.15); }
|
||
.option-icon.green { background: rgba(74,222,128,0.15); }
|
||
.option-icon.orange { background: rgba(251,146,60,0.15); }
|
||
.option-card h3 { font-size: 18px; font-weight: 700; margin-bottom: 8px; }
|
||
.option-card p { color: var(--text-secondary); font-size: 14px; line-height: 1.6; }
|
||
.option-cost {
|
||
display: inline-block;
|
||
margin-top: 16px;
|
||
padding: 4px 12px;
|
||
border-radius: 6px;
|
||
background: var(--bg-elevated);
|
||
font-size: 14px; font-weight: 600;
|
||
font-family: 'JetBrains Mono', monospace;
|
||
}
|
||
.option-cost .free { color: var(--green); }
|
||
.option-cost .low { color: var(--green); }
|
||
.option-cost .mid { color: var(--yellow); }
|
||
.option-cost .high { color: var(--orange); }
|
||
|
||
/* ─── Comparison Table ─── */
|
||
.table-wrap {
|
||
overflow-x: auto;
|
||
border-radius: var(--radius);
|
||
border: 1px solid var(--border-color);
|
||
background: var(--bg-card);
|
||
}
|
||
table {
|
||
width: 100%;
|
||
border-collapse: collapse;
|
||
font-size: 14px;
|
||
min-width: 640px;
|
||
}
|
||
thead th {
|
||
text-align: left;
|
||
padding: 16px 20px;
|
||
font-weight: 600;
|
||
font-size: 13px;
|
||
text-transform: uppercase;
|
||
letter-spacing: 0.5px;
|
||
color: var(--text-secondary);
|
||
border-bottom: 1px solid var(--border-color);
|
||
background: var(--bg-surface);
|
||
white-space: nowrap;
|
||
}
|
||
thead th:first-child { border-radius: var(--radius) 0 0 0; }
|
||
thead th:last-child { border-radius: 0 var(--radius) 0 0; }
|
||
tbody td {
|
||
padding: 16px 20px;
|
||
border-bottom: 1px solid var(--border-color);
|
||
vertical-align: middle;
|
||
}
|
||
tbody tr:last-child td { border-bottom: none; }
|
||
tbody tr:hover { background: var(--bg-hover); }
|
||
tbody td:first-child { font-weight: 600; color: var(--text-primary); }
|
||
/* Star rating / score bar */
|
||
.score {
|
||
display: flex; gap: 3px; align-items: center;
|
||
}
|
||
.score .star { color: var(--accent); font-size: 14px; }
|
||
.score .star.empty { color: var(--border-light); }
|
||
.score-label { margin-left: 6px; font-size: 12px; color: var(--text-tertiary); font-weight: 500; }
|
||
.pill {
|
||
display: inline-block;
|
||
padding: 2px 10px;
|
||
border-radius: 100px;
|
||
font-size: 12px; font-weight: 600;
|
||
}
|
||
.pill.green { background: rgba(74,222,128,0.15); color: var(--green); }
|
||
.pill.yellow { background: rgba(251,191,36,0.15); color: var(--yellow); }
|
||
.pill.orange { background: rgba(251,146,60,0.15); color: var(--orange); }
|
||
.pill.red { background: rgba(248,113,113,0.15); color: var(--red); }
|
||
.pill.blue { background: rgba(96,165,250,0.15); color: var(--blue); }
|
||
.pill.purple { background: var(--accent-glow); color: var(--accent); }
|
||
.check { color: var(--green); font-weight: 700; }
|
||
.cross { color: var(--text-tertiary); }
|
||
.rank-badge {
|
||
display: inline-flex; align-items: center; justify-content: center;
|
||
width: 28px; height: 28px;
|
||
border-radius: 8px;
|
||
font-weight: 700; font-size: 13px;
|
||
}
|
||
.rank-1 { background: linear-gradient(135deg, rgba(167,139,250,0.25), rgba(167,139,250,0.1)); color: var(--accent); }
|
||
.rank-2 { background: var(--bg-elevated); color: var(--text-secondary); }
|
||
.rank-3 { background: var(--bg-elevated); color: var(--text-secondary); }
|
||
.rank-4 { background: var(--bg-elevated); color: var(--text-secondary); }
|
||
|
||
/* ─── Quiz Tool ─── */
|
||
.quiz-card {
|
||
background: var(--bg-card);
|
||
border: 1px solid var(--border-color);
|
||
border-radius: var(--radius-lg);
|
||
padding: 0;
|
||
overflow: hidden;
|
||
}
|
||
.quiz-header {
|
||
padding: 40px 40px 0;
|
||
}
|
||
.quiz-header .section-sub { margin-bottom: 0; }
|
||
.quiz-body {
|
||
padding: 40px;
|
||
}
|
||
.step-indicator {
|
||
display: flex; gap: 8px; margin-bottom: 40px;
|
||
}
|
||
.step-dot {
|
||
width: 8px; height: 8px;
|
||
border-radius: 100px;
|
||
background: var(--border-color);
|
||
transition: all 0.3s;
|
||
}
|
||
.step-dot.active { background: var(--accent); width: 32px; }
|
||
.step-dot.done { background: var(--green); }
|
||
.quiz-question { display: none; }
|
||
.quiz-question.active { display: block; }
|
||
.quiz-question h3 {
|
||
font-size: 22px; font-weight: 700; margin-bottom: 8px;
|
||
}
|
||
.quiz-question .q-sub {
|
||
color: var(--text-secondary); font-size: 14px; margin-bottom: 28px;
|
||
}
|
||
.quiz-options { display: flex; flex-direction: column; gap: 10px; }
|
||
.quiz-option {
|
||
padding: 16px 20px;
|
||
border-radius: var(--radius-sm);
|
||
border: 1px solid var(--border-color);
|
||
background: var(--bg-surface);
|
||
color: var(--text-primary);
|
||
font-size: 15px; font-weight: 500;
|
||
cursor: pointer;
|
||
transition: all 0.2s;
|
||
text-align: left;
|
||
display: flex; align-items: center; gap: 12px;
|
||
}
|
||
.quiz-option:hover {
|
||
border-color: var(--accent);
|
||
background: var(--accent-glow);
|
||
}
|
||
.quiz-option.selected {
|
||
border-color: var(--accent);
|
||
background: rgba(167,139,250,0.1);
|
||
}
|
||
.quiz-option .emoji { font-size: 20px; }
|
||
.quiz-nav {
|
||
display: flex; gap: 12px; margin-top: 32px;
|
||
}
|
||
.quiz-nav button {
|
||
padding: 10px 24px;
|
||
border-radius: var(--radius-sm);
|
||
font-weight: 600; font-size: 14px;
|
||
cursor: pointer; border: none;
|
||
transition: all 0.2s;
|
||
}
|
||
.btn-next {
|
||
background: linear-gradient(135deg, var(--accent-dim), var(--accent));
|
||
color: #fff;
|
||
}
|
||
.btn-next:disabled { opacity: 0.4; cursor: not-allowed; }
|
||
.btn-next:not(:disabled):hover { transform: translateY(-1px); box-shadow: 0 4px 16px var(--accent-glow); }
|
||
.btn-back {
|
||
background: var(--bg-elevated); color: var(--text-secondary);
|
||
}
|
||
.btn-back:hover { color: var(--text-primary); }
|
||
|
||
/* Result */
|
||
.quiz-result { display: none; padding: 40px; text-align: center; }
|
||
.quiz-result.active { display: block; }
|
||
.result-icon { font-size: 48px; margin-bottom: 16px; }
|
||
.result-title { font-size: 24px; font-weight: 700; margin-bottom: 8px; }
|
||
.result-desc { color: var(--text-secondary); font-size: 15px; max-width: 480px; margin: 0 auto 24px; line-height: 1.7; }
|
||
.result-actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
|
||
.reasoning-box {
|
||
margin-top: 24px;
|
||
padding: 16px 20px;
|
||
background: var(--bg-surface);
|
||
border-radius: var(--radius-sm);
|
||
border: 1px solid var(--border-color);
|
||
text-align: left;
|
||
}
|
||
.reasoning-box h4 {
|
||
font-size: 12px; font-weight: 600; text-transform: uppercase;
|
||
letter-spacing: 0.5px;
|
||
color: var(--text-tertiary);
|
||
margin-bottom: 8px;
|
||
}
|
||
.reasoning-box p {
|
||
font-size: 14px; color: var(--text-secondary); line-height: 1.7;
|
||
}
|
||
|
||
.btn-reset {
|
||
background: var(--bg-elevated); color: var(--text-secondary);
|
||
border: 1px solid var(--border-color);
|
||
}
|
||
.btn-reset:hover { color: var(--text-primary); }
|
||
|
||
/* ─── Footer ─── */
|
||
footer {
|
||
border-top: 1px solid var(--border-color);
|
||
padding: 40px 24px;
|
||
text-align: center;
|
||
}
|
||
footer p { color: var(--text-tertiary); font-size: 13px; }
|
||
footer a { color: var(--text-secondary); text-decoration: none; }
|
||
footer a:hover { color: var(--accent); }
|
||
|
||
/* ─── Responsive ─── */
|
||
@media (max-width: 768px) {
|
||
.hero { padding: 48px 20px 40px; }
|
||
section { padding: 48px 20px; }
|
||
.quiz-body { padding: 24px; }
|
||
.quiz-header { padding: 24px 24px 0; }
|
||
.quiz-result { padding: 24px; }
|
||
.nav-links { display: none; }
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
|
||
<!-- ─── HEADER ─── -->
|
||
<header>
|
||
<div class="nav-inner">
|
||
<div class="logo">
|
||
<span class="logo-icon">H</span>
|
||
Hermes<span>Host</span>
|
||
</div>
|
||
<div class="nav-links">
|
||
<a href="#options">Options</a>
|
||
<a href="#compare">Compare</a>
|
||
<a href="#quiz">Find Yours</a>
|
||
<a href="https://derez.ai" style="color:var(--accent)">derez.ai →</a>
|
||
</div>
|
||
</div>
|
||
</header>
|
||
|
||
<!-- ─── HERO ─── -->
|
||
<section class="hero">
|
||
<div class="hero-label">⚡ Hermes Agent Hosting Guide</div>
|
||
<h1>
|
||
Find the Perfect Home<br>
|
||
for Your <span class="highlight">Hermes Agent</span>
|
||
</h1>
|
||
<p>
|
||
From a raspberry Pi on your desk to a managed cloud — every hosting option
|
||
has trade-offs. We break down cost, complexity, and control so you can
|
||
pick the right one.
|
||
</p>
|
||
<div class="hero-btns">
|
||
<a href="#compare" class="btn btn-primary">Compare Options ↓</a>
|
||
<a href="#quiz" class="btn btn-secondary">Take the Quiz →</a>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ─── OPTIONS OVERVIEW ─── -->
|
||
<section id="options">
|
||
<div style="text-align:center;margin-bottom:48px;">
|
||
<div class="section-label">The Options</div>
|
||
<h2 class="section-title">Four Ways to Run Hermes</h2>
|
||
<p class="section-sub" style="margin:0 auto 48px;">
|
||
Each approach fits a different user profile. Here's what you need to know.
|
||
</p>
|
||
</div>
|
||
<div class="options-grid">
|
||
<div class="option-card">
|
||
<div class="option-icon orange">🖥️</div>
|
||
<h3>Your Own PC</h3>
|
||
<p>Run Hermes directly on your laptop or desktop. Zero extra cost — you already own the hardware. Best for tinkering and development.</p>
|
||
<div class="option-cost"><span class="free">$0 / month</span></div>
|
||
</div>
|
||
<div class="option-card">
|
||
<div class="option-icon green">🖧</div>
|
||
<h3>Dedicated PC</h3>
|
||
<p>A bare-metal machine you control entirely — colocated or rented. Maximum performance, full isolation, no noisy neighbours.</p>
|
||
<div class="option-cost"><span class="high">$50–300+ / month</span></div>
|
||
</div>
|
||
<div class="option-card">
|
||
<div class="option-icon blue">☁️</div>
|
||
<h3>VPS</h3>
|
||
<p>Virtual Private Server from providers like Hetzner, DigitalOcean, or Linode. Great balance of control and cost. You handle setup.</p>
|
||
<div class="option-cost"><span class="mid">$5–100 / month</span></div>
|
||
</div>
|
||
<div class="option-card recommended">
|
||
<div class="option-icon purple">⚡</div>
|
||
<h3>derez.ai</h3>
|
||
<p>Managed Hermes hosting. Signup → purchase → prompt builder → working agent in ~10 Minutes. Backups, SSH, dashboard included.</p>
|
||
<div class="option-cost"><span class="mid">$15–50 / month</span></div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ─── COMPARISON TABLE ─── -->
|
||
<section id="compare">
|
||
<div style="text-align:center;margin-bottom:48px;">
|
||
<div class="section-label">Side by Side</div>
|
||
<h2 class="section-title">Hosting Comparison</h2>
|
||
<p class="section-sub" style="margin:0 auto 48px;">
|
||
How each option stacks up across the dimensions that matter.
|
||
</p>
|
||
</div>
|
||
<div class="table-wrap">
|
||
<table>
|
||
<thead>
|
||
<tr>
|
||
<th></th>
|
||
<th>Your Own PC</th>
|
||
<th>Dedicated PC</th>
|
||
<th>VPS</th>
|
||
<th>⚡ derez.ai</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
<!-- Ease of Setup -->
|
||
<tr>
|
||
<td>Ease of Setup</td>
|
||
<td>
|
||
<div class="score">
|
||
<span class="star">★</span><span class="star">★</span><span class="star empty">★</span><span class="star empty">★</span><span class="star empty">★</span>
|
||
<span class="score-label">2/5</span>
|
||
</div>
|
||
</td>
|
||
<td>
|
||
<div class="score">
|
||
<span class="star">★</span><span class="star empty">★</span><span class="star empty">★</span><span class="star empty">★</span><span class="star empty">★</span>
|
||
<span class="score-label">1/5</span>
|
||
</div>
|
||
</td>
|
||
<td>
|
||
<div class="score">
|
||
<span class="star">★</span><span class="star">★</span><span class="star">★</span><span class="star empty">★</span><span class="star empty">★</span>
|
||
<span class="score-label">3/5</span>
|
||
</div>
|
||
</td>
|
||
<td>
|
||
<div class="score">
|
||
<span class="star">★</span><span class="star">★</span><span class="star">★</span><span class="star">★</span><span class="star">★</span>
|
||
<span class="score-label">5/5</span>
|
||
</div>
|
||
</td>
|
||
</tr>
|
||
<!-- Cost -->
|
||
<tr>
|
||
<td>Monthly Cost</td>
|
||
<td><span class="pill green">$0</span></td>
|
||
<td><span class="pill orange">$50–300+</span></td>
|
||
<td><span class="pill yellow">$5–100</span></td>
|
||
<td><span class="pill green">$15–50</span></td>
|
||
</tr>
|
||
<!-- Backup -->
|
||
<tr>
|
||
<td>Backup</td>
|
||
<td><span class="pill yellow">Manual</span></td>
|
||
<td><span class="pill green">Full Control</span></td>
|
||
<td><span class="pill yellow">Snapshots</span></td>
|
||
<td><span class="pill green">Automated</span></td>
|
||
</tr>
|
||
<!-- User Level -->
|
||
<tr>
|
||
<td>User Level</td>
|
||
<td><span class="pill blue">Intermediate</span></td>
|
||
<td><span class="pill red">Advanced</span></td>
|
||
<td><span class="pill orange">Intermediate+</span></td>
|
||
<td><span class="pill green">All Levels</span></td>
|
||
</tr>
|
||
<!-- Data & Security -->
|
||
<tr>
|
||
<td>Data & Security</td>
|
||
<td>
|
||
<div class="score">
|
||
<span class="star">★</span><span class="star">★</span><span class="star empty">★</span><span class="star empty">★</span><span class="star empty">★</span>
|
||
<span class="score-label">2/5</span>
|
||
</div>
|
||
<div style="font-size:12px;color:var(--text-tertiary);margin-top:2px;">Your machine = your risk</div>
|
||
</td>
|
||
<td>
|
||
<div class="score">
|
||
<span class="star">★</span><span class="star">★</span><span class="star">★</span><span class="star">★</span><span class="star">★</span>
|
||
<span class="score-label">5/5</span>
|
||
</div>
|
||
<div style="font-size:12px;color:var(--text-tertiary);margin-top:2px;">Full isolation + your firewall</div>
|
||
</td>
|
||
<td>
|
||
<div class="score">
|
||
<span class="star">★</span><span class="star">★</span><span class="star">★</span><span class="star empty">★</span><span class="star empty">★</span>
|
||
<span class="score-label">3/5</span>
|
||
</div>
|
||
<div style="font-size:12px;color:var(--text-tertiary);margin-top:2px;">Shared hypervisor, provider trust</div>
|
||
</td>
|
||
<td>
|
||
<div class="score">
|
||
<span class="star">★</span><span class="star">★</span><span class="star">★</span><span class="star">★</span><span class="star empty">★</span>
|
||
<span class="score-label">4/5</span>
|
||
</div>
|
||
<div style="font-size:12px;color:var(--text-tertiary);margin-top:2px;">Isolated instances + backups</div>
|
||
</td>
|
||
</tr>
|
||
<!-- Accessibility -->
|
||
<tr>
|
||
<td>Accessibility</td>
|
||
<td><span class="pill yellow">Local only</span></td>
|
||
<td><span class="pill green">Remote (your setup)</span></td>
|
||
<td><span class="pill green">Remote (SSH)</span></td>
|
||
<td><span class="pill green">Remote + Dashboard</span></td>
|
||
</tr>
|
||
<!-- Uptime -->
|
||
<tr>
|
||
<td>Uptime Reliability</td>
|
||
<td><span class="pill orange">Your uptime</span></td>
|
||
<td><span class="pill green">99.9%+</span></td>
|
||
<td><span class="pill green">99.9%+</span></td>
|
||
<td><span class="pill green">99.9%+</span></td>
|
||
</tr>
|
||
<!-- Scalability -->
|
||
<tr>
|
||
<td>Scalability</td>
|
||
<td><span class="pill red">None</span></td>
|
||
<td><span class="pill yellow">Manual (buy more)</span></td>
|
||
<td><span class="pill green">Resize anytime</span></td>
|
||
<td><span class="pill green">Upgrade plan</span></td>
|
||
</tr>
|
||
<!-- Overall Rank -->
|
||
<tr style="background:var(--bg-surface);">
|
||
<td style="font-weight:700;">Overall Rank</td>
|
||
<td>
|
||
<span class="rank-badge rank-4">#4</span>
|
||
<span style="font-size:12px;color:var(--text-tertiary);margin-left:8px;">Best for dev & testing</span>
|
||
</td>
|
||
<td>
|
||
<span class="rank-badge rank-3">#3</span>
|
||
<span style="font-size:12px;color:var(--text-tertiary);margin-left:8px;">Maximum control</span>
|
||
</td>
|
||
<td>
|
||
<span class="rank-badge rank-2">#2</span>
|
||
<span style="font-size:12px;color:var(--text-tertiary);margin-left:8px;">Best value/control</span>
|
||
</td>
|
||
<td>
|
||
<span class="rank-badge rank-1">#1</span>
|
||
<span style="font-size:12px;color:var(--accent);margin-left:8px;font-weight:500;">Best for most people</span>
|
||
</td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ─── QUIZ TOOL ─── -->
|
||
<section id="quiz">
|
||
<div class="quiz-card">
|
||
<div class="quiz-header">
|
||
<div class="section-label">Find Your Match</div>
|
||
<h2 class="section-title" style="margin-bottom:8px;">Which Hosting Fits You?</h2>
|
||
<p class="section-sub" style="font-size:15px;">
|
||
Three quick questions. No accounts, no forms. Get a personalized recommendation.
|
||
</p>
|
||
</div>
|
||
<div class="quiz-body" id="quizBody">
|
||
<!-- Step dots -->
|
||
<div class="step-indicator" id="stepDots">
|
||
<div class="step-dot active"></div>
|
||
<div class="step-dot"></div>
|
||
<div class="step-dot"></div>
|
||
</div>
|
||
|
||
<!-- Question 1: Technical Level -->
|
||
<div class="quiz-question active" data-q="1">
|
||
<h3>What's your technical level?</h3>
|
||
<p class="q-sub">How comfortable are you with the command line and server administration?</p>
|
||
<div class="quiz-options">
|
||
<button class="quiz-option" data-value="beginner">
|
||
<span class="emoji">🌱</span> Beginner — I just want things to work
|
||
</button>
|
||
<button class="quiz-option" data-value="intermediate">
|
||
<span class="emoji">🔧</span> Intermediate — I can SSH, run commands, set up a server
|
||
</button>
|
||
<button class="quiz-option" data-value="advanced">
|
||
<span class="emoji">⚙️</span> Advanced — I manage infrastructure professionally
|
||
</button>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Question 2: Data & Security -->
|
||
<div class="quiz-question" data-q="2">
|
||
<h3>How important is data security to you?</h3>
|
||
<p class="q-sub">What level of isolation and data protection do you need?</p>
|
||
<div class="quiz-options">
|
||
<button class="quiz-option" data-value="casual">
|
||
<span class="emoji">🙂</span> Casual — It's a personal project, no sensitive data
|
||
</button>
|
||
<button class="quiz-option" data-value="important">
|
||
<span class="emoji">🔒</span> Important — I handle customer data, want proper isolation
|
||
</button>
|
||
<button class="quiz-option" data-value="critical">
|
||
<span class="emoji">🛡️</span> Mission-Critical — Compliance, encryption, full control
|
||
</button>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Question 3: Budget -->
|
||
<div class="quiz-question" data-q="3">
|
||
<h3>What's your monthly budget?</h3>
|
||
<p class="q-sub">How much are you willing to spend on hosting per month?</p>
|
||
<div class="quiz-options">
|
||
<button class="quiz-option" data-value="free">
|
||
<span class="emoji">🆓</span> $0 — Free only (I already have hardware)
|
||
</button>
|
||
<button class="quiz-option" data-value="low">
|
||
<span class="emoji">💵</span> $5–20 / month — Budget-friendly
|
||
</button>
|
||
<button class="quiz-option" data-value="medium">
|
||
<span class="emoji">💰</span> $20–100 / month — Mid-range
|
||
</button>
|
||
<button class="quiz-option" data-value="high">
|
||
<span class="emoji">🏦</span> $100+ / month — Enterprise budget
|
||
</button>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Navigation -->
|
||
<div class="quiz-nav">
|
||
<button class="btn-back" id="btnBack" style="display:none;">← Back</button>
|
||
<button class="btn-next" id="btnNext" disabled>Next →</button>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Result -->
|
||
<div class="quiz-result" id="quizResult">
|
||
<div class="result-icon" id="resultIcon">⚡</div>
|
||
<div class="result-title" id="resultTitle">derez.ai</div>
|
||
<p class="result-desc" id="resultDesc">Your best fit based on your answers.</p>
|
||
<div class="reasoning-box" id="resultReasoning">
|
||
<h4>Why this fits you</h4>
|
||
<p id="resultReasoningText"></p>
|
||
</div>
|
||
<div class="result-actions">
|
||
<button class="btn btn-reset">Take Again</button>
|
||
<a href="#compare" class="btn btn-secondary">View Full Comparison</a>
|
||
<a href="https://derez.ai" class="btn btn-primary">Try derez.ai →</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ─── FOOTER ─── -->
|
||
<footer>
|
||
<p>
|
||
Built for <a href="https://hermes-agent.nousresearch.com?utm_source=derez">Hermes Agent</a> by
|
||
<a href="https://derez.ai">derez.ai</a> — managed Hermes hosting.
|
||
</p>
|
||
<p style="margin-top:8px;font-size:12px;">
|
||
Prices are estimates. Your actual costs may vary by provider and region.
|
||
</p>
|
||
</footer>
|
||
|
||
<script>
|
||
// ── Quiz State ──
|
||
const answers = {};
|
||
let currentQ = 1;
|
||
const totalQ = 3;
|
||
|
||
function selectOption(el, qNum) {
|
||
const container = el.closest('.quiz-question');
|
||
container.querySelectorAll('.quiz-option').forEach(b => b.classList.remove('selected'));
|
||
el.classList.add('selected');
|
||
answers[qNum] = el.dataset.value;
|
||
|
||
// Enable next button
|
||
const nextBtn = document.getElementById('btnNext');
|
||
if (currentQ === qNum) nextBtn.disabled = false;
|
||
}
|
||
|
||
// Attach click handlers via delegation on quiz-options containers
|
||
(function() {
|
||
document.querySelectorAll('.quiz-options').forEach(container => {
|
||
container.addEventListener('click', function(e) {
|
||
const btn = e.target.closest('.quiz-option');
|
||
if (!btn) return;
|
||
const qNum = parseInt(btn.closest('.quiz-question').dataset.q);
|
||
container.querySelectorAll('.quiz-option').forEach(b => b.classList.remove('selected'));
|
||
btn.classList.add('selected');
|
||
answers[qNum] = btn.dataset.value;
|
||
const nextBtn = document.getElementById('btnNext');
|
||
if (currentQ === qNum) nextBtn.disabled = false;
|
||
});
|
||
});
|
||
// Attach nav/control buttons
|
||
document.getElementById('btnNext').addEventListener('click', nextQuestion);
|
||
document.getElementById('btnBack').addEventListener('click', prevQuestion);
|
||
document.querySelector('.btn-reset')?.addEventListener('click', resetQuiz);
|
||
})();
|
||
|
||
function nextQuestion() {
|
||
if (!answers[currentQ]) return;
|
||
|
||
if (currentQ < totalQ) {
|
||
// Hide current
|
||
document.querySelector(`.quiz-question[data-q="${currentQ}"]`).classList.remove('active');
|
||
// Show next
|
||
currentQ++;
|
||
document.querySelector(`.quiz-question[data-q="${currentQ}"]`).classList.add('active');
|
||
|
||
// Update dots
|
||
updateDots();
|
||
|
||
// Reset next button
|
||
const nextBtn = document.getElementById('btnNext');
|
||
nextBtn.disabled = !answers[currentQ];
|
||
|
||
// Show back button
|
||
document.getElementById('btnBack').style.display = 'inline-block';
|
||
|
||
// Change button text on last question
|
||
if (currentQ === totalQ) {
|
||
nextBtn.textContent = 'See My Result →';
|
||
}
|
||
} else {
|
||
showResult();
|
||
}
|
||
}
|
||
|
||
function prevQuestion() {
|
||
if (currentQ <= 1) return;
|
||
document.querySelector(`.quiz-question[data-q="${currentQ}"]`).classList.remove('active');
|
||
currentQ--;
|
||
document.querySelector(`.quiz-question[data-q="${currentQ}"]`).classList.add('active');
|
||
|
||
updateDots();
|
||
|
||
const nextBtn = document.getElementById('btnNext');
|
||
nextBtn.disabled = !answers[currentQ];
|
||
nextBtn.textContent = currentQ === totalQ ? 'See My Result →' : 'Next →';
|
||
|
||
if (currentQ === 1) {
|
||
document.getElementById('btnBack').style.display = 'none';
|
||
}
|
||
}
|
||
|
||
function updateDots() {
|
||
const dots = document.querySelectorAll('.step-dot');
|
||
dots.forEach((dot, i) => {
|
||
dot.classList.remove('active', 'done');
|
||
if (i + 1 === currentQ) dot.classList.add('active');
|
||
else if (i + 1 < currentQ) dot.classList.add('done');
|
||
});
|
||
}
|
||
|
||
// ── Result Logic ──
|
||
function showResult() {
|
||
document.getElementById('quizBody').style.display = 'none';
|
||
const resultDiv = document.getElementById('quizResult');
|
||
resultDiv.classList.add('active');
|
||
|
||
const level = answers[1];
|
||
const security = answers[2];
|
||
const budget = answers[3];
|
||
|
||
let result = {};
|
||
let icon, title, desc, reasoning;
|
||
|
||
// Decision tree
|
||
if (level === 'beginner') {
|
||
// Beginners always get Derez
|
||
result = {
|
||
icon: '⚡',
|
||
title: 'derez.ai',
|
||
desc: 'Nothing to install, nothing to configure. You get a production-ready Hermes agent in ~10 Minutes.',
|
||
reasoning: 'As a beginner, you want the fastest path from signup to a working agent. derez.ai handles SSH, backups, the dashboard, and updates so you don\'t have to learn server administration. The prompt builder gets you started immediately, and your agent is accessible from anywhere.'
|
||
};
|
||
} else if (level === 'advanced' && security === 'critical') {
|
||
result = {
|
||
icon: '🖧',
|
||
title: 'Dedicated PC',
|
||
desc: 'Maximum isolation and full hardware control for mission-critical deployments.',
|
||
reasoning: 'You have the skills to manage bare metal and you need every security layer available. A dedicated machine gives you full disk encryption, your own firewall rules, physical isolation from other tenants, and total control over the software stack. No shared hypervisor, no noisy neighbours.'
|
||
};
|
||
} else if (level === 'advanced' && budget === 'free') {
|
||
result = {
|
||
icon: '🖥️',
|
||
title: 'Your Own PC',
|
||
desc: 'You already have the hardware and the skills. Run Hermes from your own machine at zero cost.',
|
||
reasoning: 'With your advanced skills, you can set up port forwarding, dynamic DNS, and proper security on your personal machine. The cost is $0, and you have complete control. Just make sure you have backup power and internet — your uptime depends on your home setup.'
|
||
};
|
||
} else if (security === 'important' && (budget === 'medium' || budget === 'high')) {
|
||
result = {
|
||
icon: '⚡',
|
||
title: 'derez.ai',
|
||
desc: 'Isolated instances with automated backups — security without the ops burden.',
|
||
reasoning: 'derez.ai gives each client their own Linux instance with full backups, SSH access, and proper isolation. You get strong security without needing to be a DevOps expert. The mid-range pricing fits your budget, and you get a dashboard for management.'
|
||
};
|
||
} else if (level === 'intermediate' && budget !== 'free') {
|
||
result = {
|
||
icon: '☁️',
|
||
title: 'VPS',
|
||
desc: 'The classic sweet spot. You handle setup, the provider handles the hardware.',
|
||
reasoning: `You know enough to SSH in and configure a server. A VPS from Hetzner, DigitalOcean, or Linode gives you a public IP, 99.9% uptime SLA, and the ability to resize when you need more power. ${budget === 'low' ? 'At $5–20/mo this is the cheapest way to get a 24/7 server.' : 'At $20–100/mo you get plenty of RAM and CPU for multiple agents or heavy workloads.'}`
|
||
};
|
||
} else if (budget === 'free' && level !== 'advanced') {
|
||
result = {
|
||
icon: '🖥️',
|
||
title: 'Your Own PC',
|
||
desc: 'Free, but requires some setup. Best for learning and prototyping.',
|
||
reasoning: 'You want to spend $0, which means using hardware you already own. Your Own PC works for development and testing, but keep in mind: your agent only runs while your computer is on. For a 24/7 agent you\'ll need either a VPS or derez.ai. Consider this as a starting point to learn Hermes.'
|
||
};
|
||
} else {
|
||
// Default recommendation
|
||
result = {
|
||
icon: '⚡',
|
||
title: 'derez.ai',
|
||
desc: 'The balanced choice for most users. Managed, secure, and fairly priced.',
|
||
reasoning: 'derez.ai combines the ease of managed hosting with proper isolation and backups. You get SSH access when you need it, a dashboard for daily management, and automated backups for peace of mind. At $15–50/mo it\'s competitive with a mid-range VPS but saves you hours of setup time.'
|
||
};
|
||
}
|
||
|
||
document.getElementById('resultIcon').textContent = result.icon;
|
||
document.getElementById('resultTitle').textContent = result.title;
|
||
document.getElementById('resultDesc').textContent = result.desc;
|
||
document.getElementById('resultReasoningText').textContent = result.reasoning;
|
||
}
|
||
|
||
function resetQuiz() {
|
||
Object.keys(answers).forEach(k => delete answers[k]);
|
||
currentQ = 1;
|
||
document.querySelectorAll('.quiz-question').forEach(q => q.classList.remove('active'));
|
||
document.querySelector('.quiz-question[data-q="1"]').classList.add('active');
|
||
document.querySelectorAll('.quiz-option').forEach(b => b.classList.remove('selected'));
|
||
document.getElementById('quizResult').classList.remove('active');
|
||
document.getElementById('quizBody').style.display = 'block';
|
||
document.getElementById('btnNext').disabled = true;
|
||
document.getElementById('btnNext').textContent = 'Next →';
|
||
document.getElementById('btnBack').style.display = 'none';
|
||
updateDots();
|
||
}
|
||
</script>
|
||
</body>
|
||
</html> |