mawkone
c51c3c21b3
This commit addresses the issue where DeepSeek's raw XML markup (like <tool_calls> and <think>) was leaking into chat history, causing hallucinations in subsequent turns. It also patches a vulnerability in the git commit tool where arbitrary shell injection was possible. Additionally, it includes UX copy and color contrast adjustments for the marketing homepage breadcrumbs.
220 lines
8.7 KiB
HTML
220 lines
8.7 KiB
HTML
<!doctype html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="utf-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
|
<title>Vibn — Keep vibing. All the way to launch.</title>
|
|
<link rel="preconnect" href="https://fonts.googleapis.com" />
|
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
|
|
<link rel="icon" type="image/png" href="assets/logo-black.png" />
|
|
<link href="https://fonts.googleapis.com/css2?family=Geist:wght@300;400;500;600;700&family=Geist+Mono:wght@400;500&display=swap" rel="stylesheet" />
|
|
|
|
<style>
|
|
:root {
|
|
--bg: oklch(0.155 0.008 60);
|
|
--bg-1: oklch(0.185 0.009 60);
|
|
--bg-2: oklch(0.225 0.010 60);
|
|
--hairline: oklch(0.32 0.010 60 / 0.55);
|
|
--hairline-2: oklch(0.40 0.012 60 / 0.35);
|
|
--fg: oklch(0.97 0.005 80);
|
|
--fg-dim: oklch(0.78 0.006 80);
|
|
--fg-mute: oklch(0.58 0.006 80);
|
|
--fg-faint: oklch(0.42 0.006 80);
|
|
|
|
--accent: oklch(0.74 0.175 35); /* warm coral, default */
|
|
--accent-soft: oklch(0.74 0.175 35 / 0.18);
|
|
--accent-glow: oklch(0.74 0.175 35 / 0.35);
|
|
--accent-fg: oklch(0.18 0.04 35);
|
|
|
|
--ok: oklch(0.78 0.16 155);
|
|
|
|
--r-sm: 8px;
|
|
--r-md: 12px;
|
|
--r-lg: 18px;
|
|
--r-xl: 28px;
|
|
|
|
--maxw: 1240px;
|
|
--pad: clamp(20px, 4vw, 56px);
|
|
|
|
--font-sans: "Geist", ui-sans-serif, system-ui, -apple-system, "Helvetica Neue", sans-serif;
|
|
--font-mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, monospace;
|
|
}
|
|
|
|
* { box-sizing: border-box; }
|
|
html, body { margin: 0; padding: 0; }
|
|
body {
|
|
background: var(--bg);
|
|
color: var(--fg);
|
|
font-family: var(--font-sans);
|
|
font-weight: 400;
|
|
line-height: 1.45;
|
|
-webkit-font-smoothing: antialiased;
|
|
text-rendering: optimizeLegibility;
|
|
overflow-x: hidden;
|
|
}
|
|
body::before {
|
|
/* subtle grid */
|
|
content: "";
|
|
position: fixed; inset: 0;
|
|
background-image:
|
|
linear-gradient(to right, oklch(0.30 0.01 60 / 0.10) 1px, transparent 1px),
|
|
linear-gradient(to bottom, oklch(0.30 0.01 60 / 0.10) 1px, transparent 1px);
|
|
background-size: 56px 56px;
|
|
mask-image: radial-gradient(ellipse 90% 70% at 50% 30%, #000 30%, transparent 80%);
|
|
-webkit-mask-image: radial-gradient(ellipse 90% 70% at 50% 30%, #000 30%, transparent 80%);
|
|
pointer-events: none;
|
|
z-index: 0;
|
|
}
|
|
body::after {
|
|
/* film grain */
|
|
content: "";
|
|
position: fixed; inset: 0;
|
|
pointer-events: none;
|
|
z-index: 1;
|
|
opacity: 0.035;
|
|
mix-blend-mode: overlay;
|
|
background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)' opacity='0.85'/></svg>");
|
|
}
|
|
|
|
/* base typography */
|
|
h1, h2, h3, h4 { margin: 0; font-weight: 500; letter-spacing: -0.02em; line-height: 1.05; }
|
|
p { margin: 0; }
|
|
a { color: inherit; text-decoration: none; }
|
|
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
|
|
::selection { background: var(--accent); color: var(--accent-fg); }
|
|
|
|
/* re-usable layout */
|
|
.wrap {
|
|
position: relative;
|
|
width: 100%;
|
|
max-width: var(--maxw);
|
|
margin: 0 auto;
|
|
padding-inline: var(--pad);
|
|
z-index: 2;
|
|
}
|
|
|
|
.mono { font-family: var(--font-mono); font-feature-settings: "ss01" on; }
|
|
.eyebrow {
|
|
display: inline-flex; align-items: center; gap: 8px;
|
|
font-family: var(--font-mono);
|
|
font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase;
|
|
color: var(--fg-mute);
|
|
}
|
|
.eyebrow::before {
|
|
content: ""; width: 5px; height: 5px; border-radius: 50%;
|
|
background: var(--accent); box-shadow: 0 0 12px var(--accent-glow);
|
|
}
|
|
|
|
/* primary button */
|
|
.btn {
|
|
display: inline-flex; align-items: center; gap: 10px;
|
|
height: 46px; padding: 0 22px;
|
|
border-radius: 999px;
|
|
font-weight: 500;
|
|
transition: transform .12s ease, box-shadow .2s ease, background .2s ease;
|
|
white-space: nowrap;
|
|
}
|
|
.btn-primary {
|
|
background: var(--accent);
|
|
color: var(--accent-fg);
|
|
box-shadow:
|
|
0 0 0 1px oklch(0.84 0.16 35 / 0.5) inset,
|
|
0 10px 40px -10px var(--accent-glow),
|
|
0 0 50px -8px var(--accent-glow);
|
|
}
|
|
.btn-primary:hover { transform: translateY(-1px); }
|
|
.btn-primary .arrow { transition: transform .15s ease; }
|
|
.btn-primary:hover .arrow { transform: translateX(3px); }
|
|
.btn-ghost {
|
|
color: var(--fg-dim);
|
|
border: 1px solid var(--hairline);
|
|
background: oklch(0.20 0.009 60 / 0.4);
|
|
backdrop-filter: blur(8px);
|
|
}
|
|
.btn-ghost:hover { color: var(--fg); border-color: var(--hairline-2); }
|
|
|
|
/* gradient hairline card */
|
|
.card {
|
|
position: relative;
|
|
background: linear-gradient(180deg, oklch(0.20 0.009 60 / 0.55), oklch(0.17 0.008 60 / 0.5));
|
|
border-radius: var(--r-lg);
|
|
padding: 28px;
|
|
}
|
|
.card::before {
|
|
content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px;
|
|
background: linear-gradient(180deg, var(--hairline-2), oklch(0.22 0.010 60 / 0.2));
|
|
-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
|
|
mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
|
|
-webkit-mask-composite: xor;
|
|
mask-composite: exclude;
|
|
pointer-events: none;
|
|
}
|
|
|
|
/* hide ::-webkit-scrollbar globally where it'd jitter layout */
|
|
.no-scrollbar::-webkit-scrollbar { display: none; }
|
|
|
|
/* nav */
|
|
.nav {
|
|
position: sticky; top: 0;
|
|
z-index: 50;
|
|
backdrop-filter: blur(12px) saturate(140%);
|
|
-webkit-backdrop-filter: blur(12px) saturate(140%);
|
|
background: oklch(0.155 0.008 60 / 0.55);
|
|
border-bottom: 1px solid oklch(0.30 0.01 60 / 0.0);
|
|
transition: border-color .2s;
|
|
}
|
|
.nav.scrolled { border-bottom-color: oklch(0.30 0.01 60 / 0.4); }
|
|
.nav-inner {
|
|
display: flex; align-items: center; justify-content: space-between;
|
|
height: 64px;
|
|
}
|
|
.logo {
|
|
display: inline-flex; align-items: center; gap: 9px;
|
|
font-weight: 600; font-size: 17px; letter-spacing: -0.02em;
|
|
}
|
|
.logo-mark {
|
|
width: 26px; height: 26px; border-radius: 50%;
|
|
background: linear-gradient(135deg, var(--accent) 0%, oklch(0.65 0.20 18) 100%);
|
|
box-shadow: 0 0 22px var(--accent-glow), inset 0 1px 0 oklch(1 0 0 / 0.25);
|
|
display: grid; place-items: center;
|
|
color: var(--accent-fg);
|
|
flex-shrink: 0;
|
|
}
|
|
.logo-mark svg { display: block; }
|
|
.logo-caret { animation: caret-blink 1.4s steps(2) infinite; }
|
|
@keyframes caret-blink { 50% { opacity: 0.25; } }
|
|
.nav-links { display: flex; gap: 28px; color: var(--fg-mute); font-size: 14px; }
|
|
.nav-links a:hover { color: var(--fg); }
|
|
.nav-cta { display: flex; gap: 10px; align-items: center; }
|
|
.nav-cta .btn { height: 36px; padding: 0 16px; font-size: 14px; }
|
|
@media (max-width: 760px) { .nav-links { display: none; } }
|
|
|
|
/* section spacing */
|
|
.section { position: relative; padding-block: clamp(80px, 11vh, 140px); }
|
|
.section-tight { padding-block: clamp(60px, 8vh, 100px); }
|
|
|
|
/* responsive grid helper */
|
|
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
|
|
@media (max-width: 880px) { .grid-3 { grid-template-columns: 1fr; } }
|
|
</style>
|
|
|
|
<!-- React + Babel -->
|
|
<script src="https://unpkg.com/react@18.3.1/umd/react.development.js" integrity="sha384-hD6/rw4ppMLGNu3tX5cjIb+uRZ7UkRJ6BPkLpg4hAu/6onKUg4lLsHAs9EBPT82L" crossorigin="anonymous"></script>
|
|
<script src="https://unpkg.com/react-dom@18.3.1/umd/react-dom.development.js" integrity="sha384-u6aeetuaXnQ38mYT8rp6sbXaQe3NL9t+IBXmnYxwkUI2Hw4bsp2Wvmx4yRQF1uAm" crossorigin="anonymous"></script>
|
|
<script src="https://unpkg.com/@babel/standalone@7.29.0/babel.min.js" integrity="sha384-m08KidiNqLdpJqLq95G/LEi8Qvjl/xUYll3QILypMoQ65QorJ9Lvtp2RXYGBFj1y" crossorigin="anonymous"></script>
|
|
</head>
|
|
<body>
|
|
<div id="root"></div>
|
|
|
|
<script type="text/babel" src="tweaks-panel.jsx"></script>
|
|
<script type="text/babel" src="primitives.jsx"></script>
|
|
<script type="text/babel" src="hero.jsx"></script>
|
|
<script type="text/babel" src="wall.jsx"></script>
|
|
<script type="text/babel" src="crossed.jsx"></script>
|
|
<script type="text/babel" src="journey.jsx"></script>
|
|
<script type="text/babel" src="audience.jsx"></script>
|
|
<script type="text/babel" src="closing.jsx"></script>
|
|
<script type="text/babel" src="app.jsx"></script>
|
|
</body>
|
|
</html>
|