trending/context-mode
1
0
Fork 0
mirror of https://github.com/mksglu/context-mode.git synced 2026-10-02 04:14:38 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix(web): re-apply hero pattern + make Insight user-count dynamic

Browse Source 
Mirrors the main-branch fix so next stays in sync.
This commit is contained in:
Mert Koseoglu
2026-06-12 16:42:15 +03:00
parent 744c6c587c
commit 438c1d34b9
2 changed files with 28 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files
web/index.html
+3 -3
View File
@@ -119,7 +119,7 @@ code{font-family:var(--mono);font-size:.9em;background:var(--bg-code);color:var(
}
/* ── Master wordmark (hero) ── */
.cm-master{display:inline-flex;align-items:baseline;gap:0;line-height:1;font-family:var(--sans);font-weight:600;letter-spacing:-.035em;color:var(--ink);font-size:clamp(3rem,8vw,5.5rem)}
.cm-master{display:flex;align-items:baseline;gap:0;line-height:1;font-family:var(--sans);font-weight:600;letter-spacing:-.035em;color:var(--ink);font-size:clamp(3rem,8vw,5.5rem)}
.cm-master .cursor{display:inline-block;background:var(--accent);margin-left:.10em;width:.30em;height:.92em}
/* ── Hero ── */
@@ -127,7 +127,7 @@ code{font-family:var(--mono);font-size:.9em;background:var(--bg-code);color:var(
.hero::before{content:'';position:absolute;top:-20%;right:-10%;width:520px;height:520px;background:radial-gradient(circle,var(--accent-light) 0%,transparent 70%);opacity:.55;pointer-events:none}
.hero::after{content:'';position:absolute;bottom:-30%;left:-15%;width:480px;height:480px;background:radial-gradient(circle,var(--accent-dev-bg) 0%,transparent 70%);opacity:.5;pointer-events:none}
.hero-inner{position:relative;z-index:1}
.hero-tag{font-family:var(--mono);font-size:13px;color:var(--text-4);margin-bottom:24px;letter-spacing:.04em;display:inline-flex;align-items:center;gap:10px;padding:6px 14px;background:var(--bg-alt);border:1px solid var(--border-light);border-radius:6px}
.hero-tag{font-family:var(--mono);font-size:13px;color:var(--text-4);margin-top:24px;letter-spacing:.04em;display:inline-flex;align-items:center;gap:10px;padding:6px 14px;background:var(--bg-alt);border:1px solid var(--border-light);border-radius:6px;align-self:flex-start}
.hero-tag .dot{width:6px;height:6px;border-radius:50%;background:var(--accent-dev);box-shadow:0 0 10px rgba(16,185,129,.6)}
.hero-sub{font-size:clamp(1.1rem,2.5vw,1.45rem);color:var(--text-2);font-weight:300;margin-top:22px;max-width:880px;line-height:1.55}
.hero-sub strong{color:var(--ink);font-weight:600}
@@ -445,8 +445,8 @@ footer{padding:64px 0 40px;text-align:center;background:var(--bg-alt);border-top
<!-- ═══════════════════════════════════════ HERO ═══════════════════════════════════════ -->
<section class="hero">
<div class="hero-inner wrap rev">
<p class="hero-tag"><span class="dot"></span>open-source plugin · commercial platform · <span id="stat-tag-users">287,000+</span> developers</p>
<h1 class="cm-master">Context Mode<span class="cursor"></span></h1>
<p class="hero-tag"><span class="dot"></span>open-source plugin · commercial platform · <span id="stat-tag-users">287,000+</span> developers</p>
<p class="hero-sub">
<strong>The other half of the context problem</strong> — for developers and for engineering orgs.
An MCP plugin that keeps raw data out of the LLM context window. A Platform that surfaces <em>what your team is doing</em>
web/insight.html
+25 -6
View File
@@ -112,9 +112,9 @@ code{font-family:var(--mono);font-size:.9em;background:var(--bg-alt);color:var(-
@media(max-width:720px){.topnav-menu{display:none}.topnav-cta .btn{height:2.25rem;padding:.5rem .75rem;font-size:13px}}
/* Wordmark (hero) */
.cm-wordmark{display:inline-flex;align-items:baseline;gap:0;line-height:1;font-size:clamp(3rem,8vw,5.5rem)}
.cm-wordmark{display:flex;align-items:baseline;gap:0;line-height:1;font-size:clamp(3rem,8vw,5.5rem)}
.cm-wordmark .sans{font-family:var(--sans);font-weight:600;color:var(--ink);letter-spacing:-.035em}
.cm-wordmark .italic{font-family:var(--serif);font-style:italic;font-weight:400;color:var(--accent);letter-spacing:-.03em;font-size:1.18em;margin-left:.12em}
.cm-wordmark .italic{font-family:var(--serif);font-style:italic;font-weight:400;color:var(--accent);letter-spacing:-.03em;font-size:1em;margin-left:.14em}
.cm-wordmark .cursor{display:inline-block;background:var(--accent);width:.30em;height:.92em;margin-left:.10em}
/* Hero */
@@ -122,7 +122,7 @@ code{font-family:var(--mono);font-size:.9em;background:var(--bg-alt);color:var(-
.hero::before{content:'';position:absolute;top:-20%;right:-10%;width:520px;height:520px;background:radial-gradient(circle,var(--accent-light) 0%,transparent 70%);opacity:.55;pointer-events:none}
.hero::after{content:'';position:absolute;bottom:-30%;left:-15%;width:480px;height:480px;background:radial-gradient(circle,var(--accent-dev-bg) 0%,transparent 70%);opacity:.5;pointer-events:none}
.hero-inner{position:relative;z-index:1}
.hero-tag{font-family:var(--mono);font-size:13px;color:var(--text-4);margin-bottom:24px;letter-spacing:.04em;display:inline-flex;align-items:center;gap:10px;padding:6px 14px;background:var(--bg-alt);border:1px solid var(--border-light);border-radius:6px}
.hero-tag{font-family:var(--mono);font-size:13px;color:var(--text-4);margin-top:24px;letter-spacing:.04em;display:inline-flex;align-items:center;gap:10px;padding:6px 14px;background:var(--bg-alt);border:1px solid var(--border-light);border-radius:6px;align-self:flex-start}
.hero-tag .dot{width:6px;height:6px;border-radius:50%;background:var(--accent);box-shadow:0 0 10px rgba(26,86,219,.6)}
.hero-tag a{color:var(--text-3)}
.hero-sub{font-size:clamp(1.1rem,2.5vw,1.4rem);color:var(--text-2);font-weight:300;margin-top:22px;max-width:880px;line-height:1.55}
@@ -350,12 +350,12 @@ footer{padding:64px 0 40px;text-align:center;background:var(--bg-alt);border-top
<!-- ═══════════════════════════════════════ HERO ═══════════════════════════════════════ -->
<section class="hero">
<div class="hero-inner wrap rev">
<p class="hero-tag"><span class="dot"></span>the first Solution on <a href="https://context-mode.com">Context Mode Platform</a></p>
<h1 class="cm-wordmark"><span class="sans">Context Mode</span><span class="italic">Insight</span><span class="cursor"></span></h1>
<p class="hero-tag"><span class="dot"></span>the first Solution on <a href="https://context-mode.com">Context Mode Platform</a></p>
<p class="hero-sub">
<strong>Engineering signal for AI-assisted teams.</strong> Per-engineer productive rate. Retry waste per team. Patterns named, actions prescribed. Role-narrowed for <em>CTO, EM, IC, CISO, FinOps, DevOps</em> — same MCP endpoint, six different views.
</p>
<p class="hero-price">Built on the OSS plugin <strong>287,000+ developers</strong> already trust. <strong>$20 / seat / month.</strong></p>
<p class="hero-price">Built on the OSS plugin <strong><span class="js-user-count">287,000+</span> developers</strong> already trust. <strong>$20 / seat / month.</strong></p>
<div class="hero-cta">
<a href="https://platform.context-mode.com" class="btn btn-primary">Sign in →</a>
@@ -437,7 +437,7 @@ footer{padding:64px 0 40px;text-align:center;background:var(--bg-alt);border-top
<p class="section-num">§ 02 · the solution</p>
<h2 class="h2">Same plugin. <em>Three new doors.</em></h2>
<div class="rule"></div>
<p class="lead">The OSS plugin <strong>287,000+ developers</strong> already trust now optionally forwards <em>structural events</em> to your org — never source code, never prompt content. Insight runs <strong>222 patterns</strong> over those events server-side.</p>
<p class="lead">The OSS plugin <strong><span class="js-user-count">287,000+</span> developers</strong> already trust now optionally forwards <em>structural events</em> to your org — never source code, never prompt content. Insight runs <strong>222 patterns</strong> over those events server-side.</p>
</div>
<div class="flow rev">
@@ -699,6 +699,25 @@ footer{padding:64px 0 40px;text-align:center;background:var(--bg-alt);border-top
<script>
const o=new IntersectionObserver(e=>{e.forEach(x=>{if(x.isIntersecting){x.target.classList.add('v');o.unobserve(x.target);}});},{threshold:.06,rootMargin:'0px 0px -20px 0px'});
document.querySelectorAll('.rev').forEach(e=>o.observe(e));
// Dynamic user count from context-mode/main/stats.json — single source of truth
function toLongForm(short){
if(!short) return null;
const m=String(short).match(/^([\d.]+)\s*([kKmM])?\+?$/);
if(!m) return short;
let num=parseFloat(m[1]);
if(m[2]&&/k/i.test(m[2])) num*=1000;
else if(m[2]&&/m/i.test(m[2])) num*=1000000;
return Math.round(num).toLocaleString('en-US')+'+';
}
fetch('https://raw.githubusercontent.com/mksglu/context-mode/main/stats.json')
.then(r=>r.json())
.then(d=>{
if(!d) return;
const longForm=d.message_long||d.users_long||toLongForm(d.message);
if(longForm) document.querySelectorAll('.js-user-count').forEach(el=>{el.textContent=longForm});
})
.catch(()=>{});
</script>
</body>
</html>