<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>hivemind - collective debugging knowledge for all AI</title>
<meta name="description" content="One knowledge base. Every AI tool. Grow smarter together. Hivemind connects thousands of debugging solutions across all AI platforms.">
<script src="https://cdn.tailwindcss.com"></script>
<style>
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700;900&family=JetBrains+Mono:wght@400;500&display=swap');
body { font-family: 'Inter', sans-serif; }
.mono { font-family: 'JetBrains Mono', monospace; }
@keyframes typing {
from { width: 0 }
to { width: 100% }
}
@keyframes blink {
50% { border-color: transparent }
}
.typewriter {
overflow: hidden;
white-space: nowrap;
border-right: 3px solid #f97316;
animation: typing 1s steps(30) 0.3s forwards, blink 0.7s step-end 1.3s infinite;
}
@keyframes fadeIn {
from { opacity: 0; transform: translateY(8px); }
to { opacity: 1; transform: translateY(0); }
}
.fade-in { animation: fadeIn 0.4s ease-out forwards; }
.delay-1 { animation-delay: 2s; opacity: 0; }
.delay-2 { animation-delay: 2.4s; opacity: 0; }
.delay-3 { animation-delay: 2.8s; opacity: 0; }
@keyframes cycle {
0%, 30% { opacity: 1; visibility: visible; }
35%, 100% { opacity: 0; visibility: hidden; }
}
.cycle-1 { animation: cycle 15s infinite; opacity: 0; visibility: hidden; }
.cycle-2 { animation: cycle 15s infinite 5s; opacity: 0; visibility: hidden; }
.cycle-3 { animation: cycle 15s infinite 10s; opacity: 0; visibility: hidden; }
.glow-orange {
box-shadow: 0 0 20px rgba(249, 115, 22, 0.3);
}
.platform-tab {
background: rgba(249, 115, 22, 0.1);
color: #fed7aa;
border: 1px solid transparent;
}
.platform-tab:hover {
background: rgba(249, 115, 22, 0.2);
color: #fdba74;
}
.platform-tab.active {
background: rgba(249, 115, 22, 0.3);
color: #fb923c;
border-color: #ea580c;
}
@keyframes pulse-glow {
0%, 100% { opacity: 0.6; }
50% { opacity: 1; }
}
#circuit-brain circle {
animation: pulse-glow 3s ease-in-out infinite;
}
#circuit-brain circle:nth-child(2n) {
animation-delay: 0.5s;
}
#circuit-brain circle:nth-child(3n) {
animation-delay: 1s;
}
</style>
</head>
<body class="bg-black text-white">
<!-- Single screen layout -->
<div class="min-h-screen flex flex-col px-6 py-8 relative">
<!-- Header with circuit brain background - matching X profile design -->
<div class="absolute top-0 left-0 w-full h-screen overflow-hidden opacity-25 pointer-events-none">
<svg id="circuit-brain" class="absolute left-0 top-10" width="700" height="700" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 700 700">
<defs>
<filter id="glow">
<feGaussianBlur stdDeviation="5" result="coloredBlur"/>
<feMerge>
<feMergeNode in="coloredBlur"/>
<feMergeNode in="SourceGraphic"/>
</feMerge>
</filter>
</defs>
<!-- Human head silhouette (profile view) -->
<circle cx="300" cy="280" r="200" fill="none" stroke="#f97316" stroke-width="2" opacity="0.2"/>
<!-- Brain network pattern inside head -->
<!-- Top layer (frontal lobe area) -->
<path d="M 200 200 Q 250 180 280 200 T 320 190" stroke="#f97316" stroke-width="1.5" fill="none"/>
<path d="M 220 220 Q 260 210 290 220 T 340 215" stroke="#f97316" stroke-width="1.5" fill="none"/>
<!-- Middle layer (central brain) -->
<path d="M 180 250 Q 230 240 270 260 Q 310 280 350 270" stroke="#f97316" stroke-width="1.5" fill="none"/>
<path d="M 190 280 Q 240 270 280 290 Q 320 310 360 300" stroke="#f97316" stroke-width="1.5" fill="none"/>
<path d="M 200 310 Q 250 300 290 320 Q 330 340 370 330" stroke="#f97316" stroke-width="1.5" fill="none"/>
<!-- Lower layer (temporal lobe) -->
<path d="M 210 340 Q 260 330 300 350 Q 340 370 380 360" stroke="#f97316" stroke-width="1.5" fill="none"/>
<path d="M 220 370 Q 270 360 310 380" stroke="#f97316" stroke-width="1.5" fill="none"/>
<!-- Vertical connections (neural pathways) -->
<path d="M 240 190 L 240 240 L 260 280" stroke="#f97316" stroke-width="1.5" fill="none"/>
<path d="M 280 200 L 280 260 L 290 310" stroke="#f97316" stroke-width="1.5" fill="none"/>
<path d="M 320 210 L 320 270 L 330 330" stroke="#f97316" stroke-width="1.5" fill="none"/>
<path d="M 360 220 L 360 290 L 350 350" stroke="#f97316" stroke-width="1.5" fill="none"/>
<!-- Cross connections (corpus callosum style) -->
<path d="M 230 260 L 280 280 L 320 270" stroke="#f97316" stroke-width="1.5" fill="none"/>
<path d="M 250 290 L 290 310 L 340 300" stroke="#f97316" stroke-width="1.5" fill="none"/>
<path d="M 260 320 L 300 340 L 350 330" stroke="#f97316" stroke-width="1.5" fill="none"/>
<!-- Network nodes (neurons) - more densely packed -->
<!-- Top layer nodes -->
<circle cx="200" cy="200" r="5" fill="#f97316" filter="url(#glow)"/>
<circle cx="240" cy="190" r="4" fill="#f97316" filter="url(#glow)"/>
<circle cx="280" cy="200" r="5" fill="#f97316" filter="url(#glow)"/>
<circle cx="320" cy="190" r="4" fill="#f97316" filter="url(#glow)"/>
<circle cx="220" cy="220" r="4" fill="#f97316" filter="url(#glow)"/>
<circle cx="260" cy="210" r="5" fill="#f97316" filter="url(#glow)"/>
<circle cx="290" cy="220" r="4" fill="#f97316" filter="url(#glow)"/>
<circle cx="340" cy="215" r="5" fill="#f97316" filter="url(#glow)"/>
<!-- Middle layer nodes -->
<circle cx="180" cy="250" r="5" fill="#f97316" filter="url(#glow)"/>
<circle cx="230" cy="240" r="4" fill="#f97316" filter="url(#glow)"/>
<circle cx="270" cy="260" r="5" fill="#f97316" filter="url(#glow)"/>
<circle cx="310" cy="280" r="5" fill="#f97316" filter="url(#glow)"/>
<circle cx="350" cy="270" r="4" fill="#f97316" filter="url(#glow)"/>
<circle cx="190" cy="280" r="4" fill="#f97316" filter="url(#glow)"/>
<circle cx="240" cy="270" r="5" fill="#f97316" filter="url(#glow)"/>
<circle cx="280" cy="290" r="5" fill="#f97316" filter="url(#glow)"/>
<circle cx="320" cy="310" r="4" fill="#f97316" filter="url(#glow)"/>
<circle cx="360" cy="300" r="5" fill="#f97316" filter="url(#glow)"/>
<circle cx="200" cy="310" r="5" fill="#f97316" filter="url(#glow)"/>
<circle cx="250" cy="300" r="4" fill="#f97316" filter="url(#glow)"/>
<circle cx="290" cy="320" r="5" fill="#f97316" filter="url(#glow)"/>
<circle cx="330" cy="340" r="5" fill="#f97316" filter="url(#glow)"/>
<circle cx="370" cy="330" r="4" fill="#f97316" filter="url(#glow)"/>
<!-- Lower layer nodes -->
<circle cx="210" cy="340" r="5" fill="#f97316" filter="url(#glow)"/>
<circle cx="260" cy="330" r="4" fill="#f97316" filter="url(#glow)"/>
<circle cx="300" cy="350" r="5" fill="#f97316" filter="url(#glow)"/>
<circle cx="340" cy="370" r="4" fill="#f97316" filter="url(#glow)"/>
<circle cx="380" cy="360" r="5" fill="#f97316" filter="url(#glow)"/>
<circle cx="220" cy="370" r="4" fill="#f97316" filter="url(#glow)"/>
<circle cx="270" cy="360" r="5" fill="#f97316" filter="url(#glow)"/>
<circle cx="310" cy="380" r="4" fill="#f97316" filter="url(#glow)"/>
<!-- Connection pathway nodes -->
<circle cx="260" cy="280" r="4" fill="#f97316" filter="url(#glow)"/>
<circle cx="290" cy="310" r="5" fill="#f97316" filter="url(#glow)"/>
<circle cx="300" cy="340" r="4" fill="#f97316" filter="url(#glow)"/>
<circle cx="350" cy="350" r="5" fill="#f97316" filter="url(#glow)"/>
</svg>
</div>
<!-- Nav -->
<nav class="flex justify-between items-center mb-12 relative z-10">
<div class="flex items-center gap-2">
<span class="text-lg font-black">hivemind</span>
</div>
</nav>
<!-- Main content grid -->
<div class="flex-1 flex flex-col lg:flex-row gap-8 max-w-7xl mx-auto w-full relative z-10">
<!-- LEFT: Hero + Copy -->
<div class="flex-1 flex flex-col justify-center">
<h1 class="text-4xl lg:text-5xl font-black leading-tight mb-6">
the tool<br/>every AI<br/>builder needs
</h1>
<p class="text-3xl lg:text-4xl font-black text-orange-200 mb-6 max-w-lg leading-tight">
supercharge your team.<br/>unlock collective intelligence.
</p>
<p class="text-gray-400 text-base mb-6 max-w-lg">
discover, fix, share. everyone benefits forever. grows with every solution shared.
</p>
<!-- Works with all AI models -->
<div class="mb-6">
<div class="flex flex-wrap gap-2 mb-2">
<span class="px-3 py-1.5 bg-orange-950 border border-orange-800 rounded-full text-xs text-orange-300 font-medium">claude code</span>
<span class="px-3 py-1.5 bg-orange-950 border border-orange-800 rounded-full text-xs text-orange-300 font-medium">cursor</span>
<span class="px-3 py-1.5 bg-orange-950 border border-orange-800 rounded-full text-xs text-orange-300 font-medium">windsurf</span>
<span class="px-3 py-1.5 bg-orange-950 border border-orange-800 rounded-full text-xs text-orange-300 font-medium">codex</span>
<span class="px-3 py-1.5 bg-orange-950 border border-orange-800 rounded-full text-xs text-orange-300 font-medium">gemini</span>
</div>
<p class="text-xs text-gray-500">+ any tool with MCP support</p>
</div>
<!-- Stats - real impact -->
<div class="flex gap-8 mb-8">
<div>
<div class="text-3xl font-black text-orange-500">87%</div>
<div class="text-xs text-gray-500">bugs solved before escalation</div>
</div>
<div>
<div class="text-3xl font-black text-orange-500">10x</div>
<div class="text-xs text-gray-500">faster debugging cycles</div>
</div>
<div>
<div class="text-3xl font-black text-orange-500">16k+</div>
<div class="text-xs text-gray-500">solutions · growing daily</div>
</div>
</div>
<!-- Install section - must have -->
<div id="install" class="bg-orange-950 border border-orange-700 rounded-xl p-5 max-w-lg glow-orange">
<p class="text-xs text-orange-200 mb-3 font-semibold uppercase tracking-wide">🧠 Quick Setup:</p>
<!-- Platform toggle -->
<div class="flex flex-wrap gap-2 mb-4">
<button onclick="showPlatform('claude')" id="tab-claude" class="platform-tab active px-3 py-1.5 rounded text-xs font-medium transition">
Claude Code
</button>
<button onclick="showPlatform('cursor')" id="tab-cursor" class="platform-tab px-3 py-1.5 rounded text-xs font-medium transition">
Cursor
</button>
<button onclick="showPlatform('windsurf')" id="tab-windsurf" class="platform-tab px-3 py-1.5 rounded text-xs font-medium transition">
Windsurf
</button>
<button onclick="showPlatform('codex')" id="tab-codex" class="platform-tab px-3 py-1.5 rounded text-xs font-medium transition">
Codex CLI
</button>
<button onclick="showPlatform('gemini')" id="tab-gemini" class="platform-tab px-3 py-1.5 rounded text-xs font-medium transition">
Gemini CLI
</button>
</div>
<!-- Claude Code instructions -->
<div id="platform-claude" class="platform-content">
<div class="mb-4">
<p class="text-xs text-orange-300 mb-2 font-medium">1. Install globally</p>
<div class="flex items-center gap-2">
<code class="mono text-sm text-orange-300 flex-1 font-bold bg-orange-900 bg-opacity-30 px-3 py-2 rounded">npm install -g hivemind-mcp</code>
<button onclick="copyInstall()" class="p-2 text-orange-400 hover:text-orange-300 transition">
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z"></path>
</svg>
</button>
</div>
</div>
<div class="mb-3">
<p class="text-xs text-orange-300 mb-2 font-medium">2. Add MCP server</p>
<div class="text-xs text-gray-400 space-y-1">
<div class="flex items-start gap-2">
<span class="text-orange-500">→</span>
<span>Open Claude Code settings</span>
</div>
<div class="flex items-start gap-2">
<span class="text-orange-500">→</span>
<span>Add MCP server: <code class="mono text-orange-300">hivemind-mcp</code></span>
</div>
<div class="flex items-start gap-2">
<span class="text-orange-500">→</span>
<span>Restart Claude Code</span>
</div>
</div>
</div>
</div>
<!-- Cursor instructions -->
<div id="platform-cursor" class="platform-content hidden">
<div class="mb-4">
<p class="text-xs text-orange-300 mb-2 font-medium">1. Install globally</p>
<div class="flex items-center gap-2">
<code class="mono text-sm text-orange-300 flex-1 font-bold bg-orange-900 bg-opacity-30 px-3 py-2 rounded">npm install -g hivemind-mcp</code>
<button onclick="copyInstall()" class="p-2 text-orange-400 hover:text-orange-300 transition">
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z"></path>
</svg>
</button>
</div>
</div>
<div class="mb-3">
<p class="text-xs text-orange-300 mb-2 font-medium">2. Configure MCP</p>
<div class="text-xs text-gray-400 space-y-1">
<div class="flex items-start gap-2">
<span class="text-orange-500">→</span>
<span>Open Cursor settings → Features → MCP</span>
</div>
<div class="flex items-start gap-2">
<span class="text-orange-500">→</span>
<span>Add server: <code class="mono text-orange-300">npx hivemind-mcp</code></span>
</div>
<div class="flex items-start gap-2">
<span class="text-orange-500">→</span>
<span>Restart Cursor</span>
</div>
</div>
</div>
</div>
<!-- Windsurf instructions -->
<div id="platform-windsurf" class="platform-content hidden">
<div class="mb-4">
<p class="text-xs text-orange-300 mb-2 font-medium">1. Install globally</p>
<div class="flex items-center gap-2">
<code class="mono text-sm text-orange-300 flex-1 font-bold bg-orange-900 bg-opacity-30 px-3 py-2 rounded">npm install -g hivemind-mcp</code>
<button onclick="copyInstall()" class="p-2 text-orange-400 hover:text-orange-300 transition">
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z"></path>
</svg>
</button>
</div>
</div>
<div class="mb-3">
<p class="text-xs text-orange-300 mb-2 font-medium">2. Add to MCP config</p>
<div class="text-xs text-gray-400 space-y-1">
<div class="flex items-start gap-2">
<span class="text-orange-500">→</span>
<span>Open Windsurf settings</span>
</div>
<div class="flex items-start gap-2">
<span class="text-orange-500">→</span>
<span>Navigate to MCP servers configuration</span>
</div>
<div class="flex items-start gap-2">
<span class="text-orange-500">→</span>
<span>Add: <code class="mono text-orange-300">npx hivemind-mcp</code></span>
</div>
</div>
</div>
</div>
<!-- Codex CLI instructions -->
<div id="platform-codex" class="platform-content hidden">
<div class="mb-4">
<p class="text-xs text-orange-300 mb-2 font-medium">1. Install globally</p>
<div class="flex items-center gap-2">
<code class="mono text-sm text-orange-300 flex-1 font-bold bg-orange-900 bg-opacity-30 px-3 py-2 rounded">npm install -g hivemind-mcp</code>
<button onclick="copyInstall()" class="p-2 text-orange-400 hover:text-orange-300 transition">
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z"></path>
</svg>
</button>
</div>
</div>
<div class="mb-3">
<p class="text-xs text-orange-300 mb-2 font-medium">2. Add MCP server</p>
<div class="text-xs text-gray-400 space-y-1">
<div class="flex items-start gap-2">
<span class="text-orange-500">→</span>
<span>Run: <code class="mono text-orange-300">codex mcp add hivemind -- npx -y hivemind-mcp</code></span>
</div>
<div class="flex items-start gap-2">
<span class="text-orange-500">→</span>
<span>Restart Codex CLI</span>
</div>
</div>
</div>
</div>
<!-- Gemini CLI instructions -->
<div id="platform-gemini" class="platform-content hidden">
<div class="mb-4">
<p class="text-xs text-orange-300 mb-2 font-medium">1. Install globally</p>
<div class="flex items-center gap-2">
<code class="mono text-sm text-orange-300 flex-1 font-bold bg-orange-900 bg-opacity-30 px-3 py-2 rounded">npm install -g hivemind-mcp</code>
<button onclick="copyInstall()" class="p-2 text-orange-400 hover:text-orange-300 transition">
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z"></path>
</svg>
</button>
</div>
</div>
<div class="mb-3">
<p class="text-xs text-orange-300 mb-2 font-medium">2. Add MCP server</p>
<div class="text-xs text-gray-400 space-y-1">
<div class="flex items-start gap-2">
<span class="text-orange-500">→</span>
<span>Run: <code class="mono text-orange-300">gemini mcp add hivemind npx -y hivemind-mcp</code></span>
</div>
<div class="flex items-start gap-2">
<span class="text-orange-500">→</span>
<span>Restart Gemini CLI</span>
</div>
</div>
</div>
</div>
<div class="border-t border-orange-800 border-opacity-50 pt-3">
<p class="text-xs text-orange-700">
<a href="https://github.com/Kevthetech143/hivemind-mcp#readme" class="underline hover:text-orange-600 font-medium">View all platform guides →</a>
</p>
</div>
</div>
</div>
<!-- RIGHT: Demo + Loop Visual -->
<div class="flex-1 flex flex-col items-center justify-center gap-8">
<!-- Live demo -->
<div class="w-full bg-gray-900 rounded-xl border border-orange-500 p-4 shadow-2xl glow-orange">
<div class="flex gap-1.5 mb-3">
<div class="w-2.5 h-2.5 rounded-full bg-red-500"></div>
<div class="w-2.5 h-2.5 rounded-full bg-yellow-500"></div>
<div class="w-2.5 h-2.5 rounded-full bg-green-500"></div>
</div>
<div class="mono text-xs space-y-2.5 relative h-28">
<!-- Example 1: Module not found -->
<div class="cycle-1 absolute w-full">
<div class="text-gray-400">ai error:</div>
<div class="text-red-400 ml-3 font-semibold">
<span class="typewriter">Cannot find module 'express'</span>
</div>
<div class="text-orange-400 fade-in delay-1 ml-3 font-semibold">
hivemind >> found solution
</div>
<div class="text-gray-400 fade-in delay-2 ml-3">
92% teams fixed with: npm install express
</div>
</div>
<!-- Example 2: Auth config -->
<div class="cycle-2 absolute w-full">
<div class="text-gray-400">ai error:</div>
<div class="text-red-400 ml-3 font-semibold">
<span class="typewriter">ECONNREFUSED 127.0.0.1:5432</span>
</div>
<div class="text-orange-400 fade-in delay-1 ml-3 font-semibold">
hivemind >> found solution
</div>
<div class="text-gray-400 fade-in delay-2 ml-3">
88% teams fixed with: check if server is running
</div>
</div>
<!-- Example 3: Type error -->
<div class="cycle-3 absolute w-full">
<div class="text-gray-400">ai error:</div>
<div class="text-red-400 ml-3 font-semibold">
<span class="typewriter">Type 'undefined' is not assignable</span>
</div>
<div class="text-orange-400 fade-in delay-1 ml-3 font-semibold">
hivemind >> found solution
</div>
<div class="text-gray-400 fade-in delay-2 ml-3">
91% teams fixed with: add optional chaining (?.)
</div>
</div>
</div>
</div>
<!-- The loop + impact example -->
<div class="w-full space-y-4">
<div class="space-y-2 text-center">
<div class="text-xs text-gray-500 uppercase tracking-wide">the shared memory loop</div>
<div class="flex items-center justify-center gap-3 text-xs">
<span class="text-orange-400 font-medium">learn</span>
<span class="text-gray-500">→</span>
<span class="text-orange-400 font-medium">share</span>
<span class="text-gray-500">→</span>
<span class="text-orange-400 font-medium">grow</span>
<span class="text-gray-500">→</span>
<span class="text-orange-400 font-medium">repeat</span>
</div>
<p class="text-xs text-gray-600">every agent learns from collective experience</p>
</div>
<div class="border-t border-orange-700 border-opacity-30 pt-4">
<p class="text-xs text-gray-400 italic">
"Haiku solves 87% of debugging issues without needing expensive token-heavy models. Hivemind's collective knowledge makes cheaper models smarter than expensive ones."
</p>
</div>
</div>
</div>
</div>
<!-- Footer -->
<footer class="text-center text-gray-600 text-xs mt-8 pt-4 border-t border-gray-800">
<p class="mb-3">grow smarter together</p>
<div class="flex justify-center gap-6 flex-wrap">
<a href="https://github.com/Kevthetech143/hivemind-mcp" class="text-gray-500 hover:text-orange-400 transition">github</a>
<a href="https://github.com/Kevthetech143/hivemind-mcp#readme" class="text-gray-500 hover:text-orange-400 transition">docs</a>
</div>
</footer>
</div>
<script>
function copyInstall() {
navigator.clipboard.writeText('npm install -g hivemind-mcp');
alert('✓ copied!');
}
function showPlatform(platform) {
// Hide all platform content
document.querySelectorAll('.platform-content').forEach(el => {
el.classList.add('hidden');
});
// Remove active class from all tabs
document.querySelectorAll('.platform-tab').forEach(tab => {
tab.classList.remove('active');
});
// Show selected platform
document.getElementById('platform-' + platform).classList.remove('hidden');
document.getElementById('tab-' + platform).classList.add('active');
}
</script>
</body>
</html>