Skip to content

Commit 5db994f

Browse files
nadilasnadilas
committed
feat: add OS-detecting download button + fix pricing checkout auth
Landing page: - New download dropdown in hero: auto-detects macOS/Linux, shows the right binary. Dropdown reveals all platforms + shell install cmd. - "Get Started Free" renamed to "Cloud Console" - "View Benchmarks" shortened to "Benchmarks" Pricing page: - Fix checkout auth: read API key from wg_session cookie and send as Bearer token (API uses header auth, not cookie auth) - Redirect to login with ?redirect=/pricing if not authenticated
1 parent 0804179 commit 5db994f

File tree

2 files changed

+174
-7
lines changed

2 files changed

+174
-7
lines changed

‎landing/index.html‎

Lines changed: 161 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -273,6 +273,81 @@
273273
background: var(--grid-850);
274274
}
275275

276+
/* ── Download Button ────────────────────────── */
277+
.download-group {
278+
position: relative;
279+
display: inline-flex;
280+
}
281+
.btn-download {
282+
display: inline-flex;
283+
align-items: center;
284+
gap: 0.5rem;
285+
padding: 0.875rem 1.5rem;
286+
background: var(--grid-800);
287+
color: var(--text-1);
288+
font-weight: 600;
289+
font-size: 1rem;
290+
border-radius: 10px 0 0 10px;
291+
text-decoration: none;
292+
border: 1px solid var(--grid-600);
293+
border-right: none;
294+
transition: all 0.25s;
295+
cursor: pointer;
296+
font-family: var(--font-display);
297+
}
298+
.btn-download:hover { background: var(--grid-700); }
299+
.btn-download svg { flex-shrink: 0; }
300+
.btn-dropdown-toggle {
301+
display: inline-flex;
302+
align-items: center;
303+
padding: 0.875rem 0.75rem;
304+
background: var(--grid-800);
305+
color: var(--text-3);
306+
border: 1px solid var(--grid-600);
307+
border-left: 1px solid var(--grid-700);
308+
border-radius: 0 10px 10px 0;
309+
cursor: pointer;
310+
transition: all 0.25s;
311+
font-family: var(--font-display);
312+
}
313+
.btn-dropdown-toggle:hover { background: var(--grid-700); }
314+
.dropdown-menu {
315+
display: none;
316+
position: absolute;
317+
top: calc(100% + 4px);
318+
left: 0;
319+
right: 0;
320+
background: var(--grid-850);
321+
border: 1px solid var(--grid-600);
322+
border-radius: 10px;
323+
overflow: hidden;
324+
z-index: 50;
325+
box-shadow: 0 8px 32px rgba(0,0,0,0.4);
326+
}
327+
.dropdown-menu.open { display: block; }
328+
.dropdown-item {
329+
display: flex;
330+
align-items: center;
331+
gap: 0.75rem;
332+
padding: 0.75rem 1rem;
333+
color: var(--text-2);
334+
text-decoration: none;
335+
font-size: 0.9rem;
336+
transition: background 0.15s;
337+
}
338+
.dropdown-item:hover { background: var(--grid-700); }
339+
.dropdown-item .dl-platform { color: var(--text-1); font-weight: 500; }
340+
.dropdown-item .dl-arch { color: var(--text-4); font-size: 0.8rem; font-family: var(--font-mono); }
341+
.dropdown-item .dl-icon { width: 18px; color: var(--text-4); flex-shrink: 0; }
342+
.dropdown-divider { border-top: 1px solid var(--grid-700); margin: 0; }
343+
.dropdown-item.shell-cmd {
344+
font-family: var(--font-mono);
345+
font-size: 0.8rem;
346+
color: var(--accent);
347+
padding: 0.6rem 1rem;
348+
background: var(--grid-900);
349+
}
350+
276351
/* ── Stat Bar ───────────────────────────────── */
277352
.stat-bar {
278353
padding: 3rem 0;
@@ -872,13 +947,41 @@ <h1 class="fade-up delay-1">
872947
sandbox themselves by default, and run 5,000 per node.
873948
</p>
874949
<div class="hero-actions fade-up delay-3">
950+
<div class="download-group">
951+
<a id="dl-primary" href="#" class="btn-download" onclick="downloadCli(event)">
952+
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M21 15v4a2 2 0 01-2 2H5a2 2 0 01-2-2v-4"/><polyline points="7 10 12 15 17 10"/><line x1="12" y1="15" x2="12" y2="3"/></svg>
953+
<span id="dl-label">Download CLI</span>
954+
</a>
955+
<button class="btn-dropdown-toggle" onclick="toggleDropdown()" aria-label="More download options">
956+
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="6 9 12 15 18 9"/></svg>
957+
</button>
958+
<div id="dl-dropdown" class="dropdown-menu">
959+
<a class="dropdown-item" href="https://github.com/dotindustries/warpgrid/releases/latest/download/warp-darwin-arm64">
960+
<span class="dl-icon">🍎</span>
961+
<span><span class="dl-platform">macOS</span> <span class="dl-arch">Apple Silicon (arm64)</span></span>
962+
</a>
963+
<a class="dropdown-item" href="https://github.com/dotindustries/warpgrid/releases/latest/download/warp-darwin-x64">
964+
<span class="dl-icon">🍎</span>
965+
<span><span class="dl-platform">macOS</span> <span class="dl-arch">Intel (x64)</span></span>
966+
</a>
967+
<div class="dropdown-divider"></div>
968+
<a class="dropdown-item" href="https://github.com/dotindustries/warpgrid/releases/latest/download/warp-linux-x64">
969+
<span class="dl-icon">🐧</span>
970+
<span><span class="dl-platform">Linux</span> <span class="dl-arch">x86_64</span></span>
971+
</a>
972+
<div class="dropdown-divider"></div>
973+
<div class="dropdown-item shell-cmd" onclick="copyInstall()">
974+
curl -fsSL warpgrid.dev/install.sh | sh
975+
</div>
976+
</div>
977+
</div>
875978
<a href="/console/login" class="btn-primary">
876-
Get Started Free
979+
Cloud Console
877980
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M7 17l9.2-9.2M7 7h10v10"/></svg>
878981
</a>
879982
<a href="/benchmarks" class="btn-secondary">
880983
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="4 17 10 11 4 5"/><line x1="12" y1="19" x2="20" y2="19"/></svg>
881-
View Benchmarks
984+
Benchmarks
882985
</a>
883986
</div>
884987
</div>
@@ -1417,5 +1520,61 @@ <h2>Deploy your first workload<br>in under a minute.</h2>
14171520
</div>
14181521
</footer>
14191522

1523+
<script>
1524+
// Detect OS and set the primary download button
1525+
(function() {
1526+
const ua = navigator.userAgent || navigator.platform || '';
1527+
const btn = document.getElementById('dl-primary');
1528+
const label = document.getElementById('dl-label');
1529+
const base = 'https://github.com/dotindustries/warpgrid/releases/latest/download/';
1530+
1531+
if (/Mac/i.test(ua)) {
1532+
// Detect Apple Silicon vs Intel
1533+
if (/arm64|aarch64/i.test(ua) || (navigator.userAgentData && navigator.userAgentData.architecture === 'arm')) {
1534+
label.textContent = 'Download for macOS';
1535+
btn.href = base + 'warp-darwin-arm64';
1536+
} else {
1537+
label.textContent = 'Download for macOS';
1538+
btn.href = base + 'warp-darwin-arm64'; // Default to arm64 (most Macs now)
1539+
}
1540+
} else if (/Linux/i.test(ua)) {
1541+
label.textContent = 'Download for Linux';
1542+
btn.href = base + 'warp-linux-x64';
1543+
} else {
1544+
label.textContent = 'Download CLI';
1545+
btn.href = 'https://github.com/dotindustries/warpgrid/releases/latest';
1546+
}
1547+
})();
1548+
1549+
function downloadCli(e) {
1550+
const btn = document.getElementById('dl-primary');
1551+
if (btn.href && btn.href !== '#' && !btn.href.endsWith('#')) {
1552+
// Let the link work naturally
1553+
return;
1554+
}
1555+
e.preventDefault();
1556+
window.location.href = 'https://github.com/dotindustries/warpgrid/releases/latest';
1557+
}
1558+
1559+
function toggleDropdown() {
1560+
const menu = document.getElementById('dl-dropdown');
1561+
menu.classList.toggle('open');
1562+
}
1563+
1564+
// Close dropdown on click outside
1565+
document.addEventListener('click', function(e) {
1566+
const group = document.querySelector('.download-group');
1567+
const menu = document.getElementById('dl-dropdown');
1568+
if (group && !group.contains(e.target)) {
1569+
menu.classList.remove('open');
1570+
}
1571+
});
1572+
1573+
function copyInstall() {
1574+
navigator.clipboard.writeText('curl -fsSL https://warpgrid.dev/install.sh | sh').then(function() {
1575+
alert('Install command copied to clipboard!');
1576+
});
1577+
}
1578+
</script>
14201579
</body>
14211580
</html>

‎landing/pricing.html‎

Lines changed: 13 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -199,16 +199,24 @@ <h2>Pricing FAQ</h2>
199199

200200
<script>
201201
async function checkout(plan) {
202-
// Check if user is logged in (has API key cookie)
202+
// Read API key from wg_session cookie
203+
const cookie = document.cookie.split('; ').find(c => c.startsWith('wg_session='));
204+
if (!cookie) {
205+
window.location.href = '/console/login?redirect=/pricing';
206+
return;
207+
}
208+
const apiKey = cookie.split('=')[1];
209+
203210
const resp = await fetch('/api/v1/cloud/billing/checkout', {
204211
method: 'POST',
205-
headers: { 'Content-Type': 'application/json' },
206-
body: JSON.stringify({ plan }),
207-
credentials: 'include'
212+
headers: {
213+
'Content-Type': 'application/json',
214+
'Authorization': 'Bearer ' + apiKey
215+
},
216+
body: JSON.stringify({ plan })
208217
});
209218

210219
if (resp.status === 401) {
211-
// Not logged in — redirect to login first
212220
window.location.href = '/console/login?redirect=/pricing';
213221
return;
214222
}

0 commit comments

Comments
 (0)