chore: ruler files update
Signed-off-by: Dmytro Stanchiev <git@dmytros.dev>
This commit is contained in:
115
.claude/skills/huashu-design/assets/showcases/INDEX.md
Normal file
115
.claude/skills/huashu-design/assets/showcases/INDEX.md
Normal file
@@ -0,0 +1,115 @@
|
||||
# Design Philosophy Showcases — 样例资产索引
|
||||
|
||||
> 8 种场景 × 3 种风格 = 24 个预制设计样例
|
||||
> 用于 Phase 3 推荐设计方向时，直接展示「这个风格做出来长什么样」
|
||||
|
||||
## 风格说明
|
||||
|
||||
| 代号 | 流派 | 风格名称 | 视觉气质 |
|
||||
|------|------|---------|---------|
|
||||
| **Pentagram** | 信息建筑派 | Pentagram / Michael Bierut | 黑白克制、瑞士网格、强字体层级、#E63946红色强调 |
|
||||
| **Build** | 极简主义派 | Build Studio | 奢侈品级留白(70%+)、微妙字重(200-600)、#D4A574暖金、精致 |
|
||||
| **Takram** | 东方哲学派 | Takram | 柔和科技感、自然色(米色/灰/绿)、圆角、图表如艺术 |
|
||||
|
||||
## 场景速查表
|
||||
|
||||
### 内容设计场景
|
||||
|
||||
| # | 场景 | 规格 | Pentagram | Build | Takram |
|
||||
|---|------|------|-----------|-------|--------|
|
||||
| 1 | 公众号封面 | 1200×510 | `cover/cover-pentagram` | `cover/cover-build` | `cover/cover-takram` |
|
||||
| 2 | PPT数据页 | 1920×1080 | `ppt/ppt-pentagram` | `ppt/ppt-build` | `ppt/ppt-takram` |
|
||||
| 3 | 竖版信息图 | 1080×1920 | `infographic/infographic-pentagram` | `infographic/infographic-build` | `infographic/infographic-takram` |
|
||||
|
||||
### 网站设计场景
|
||||
|
||||
| # | 场景 | 规格 | Pentagram | Build | Takram |
|
||||
|---|------|------|-----------|-------|--------|
|
||||
| 4 | 个人主页 | 1440×900 | `website-homepage/homepage-pentagram` | `website-homepage/homepage-build` | `website-homepage/homepage-takram` |
|
||||
| 5 | AI导航站 | 1440×900 | `website-ai-nav/ainav-pentagram` | `website-ai-nav/ainav-build` | `website-ai-nav/ainav-takram` |
|
||||
| 6 | AI写作工具 | 1440×900 | `website-ai-writing/aiwriting-pentagram` | `website-ai-writing/aiwriting-build` | `website-ai-writing/aiwriting-takram` |
|
||||
| 7 | SaaS落地页 | 1440×900 | `website-saas/saas-pentagram` | `website-saas/saas-build` | `website-saas/saas-takram` |
|
||||
| 8 | 开发者文档 | 1440×900 | `website-devdocs/devdocs-pentagram` | `website-devdocs/devdocs-build` | `website-devdocs/devdocs-takram` |
|
||||
|
||||
> 每个条目同时有 `.html`（源码）和 `.png`（截图）两个文件
|
||||
|
||||
## 使用说明
|
||||
|
||||
### Phase 3 推荐时引用
|
||||
推荐设计方向后，可展示对应场景的预制截图：
|
||||
```
|
||||
「这是 Pentagram 风格做公众号封面的效果 → [展示 cover/cover-pentagram.png]」
|
||||
「Takram 风格做 PPT 数据页是这种感觉 → [展示 ppt/ppt-takram.png]」
|
||||
```
|
||||
|
||||
### 场景匹配优先级
|
||||
1. 用户需求的场景有精确匹配 → 直接展示对应场景
|
||||
2. 无精确匹配但类型相近 → 展示最近似的场景（如「产品官网」→ 展示 SaaS 落地页）
|
||||
3. 完全不匹配 → 跳过预制样例，直接进 Phase 3.5 现场生成
|
||||
|
||||
### 横向对比展示
|
||||
同一场景的 3 个风格适合并排展示，帮助用户直观比较：
|
||||
- 「这是同一个公众号封面，分别用 3 种风格实现的效果」
|
||||
- 展示顺序：Pentagram（理性克制）→ Build（奢华极简）→ Takram（柔和温暖）
|
||||
|
||||
## 内容详情
|
||||
|
||||
### 公众号封面（cover/）
|
||||
- 内容：Claude Code Agent 工作流 — 8 个并行 Agent 架构
|
||||
- Pentagram：巨大红色「8」+ 瑞士网格线 + 数据条
|
||||
- Build：超细字重「Agent」悬浮于 70% 留白中 + 暖金细线
|
||||
- Takram：8 节点放射状流程图作为艺术品 + 米色底
|
||||
|
||||
### PPT数据页（ppt/）
|
||||
- 内容：GLM-4.7 开源模型 Coding 能力突破（AIME 95.7 / SWE-bench 73.8% / τ²-Bench 87.4）
|
||||
- Pentagram：260px「95.7」锚点 + 红/灰/浅灰对比条形图
|
||||
- Build：三组 120px 超细数字悬浮 + 暖金渐变对比条
|
||||
- Takram：SVG 雷达图 + 三色叠加 + 圆角数据卡片
|
||||
|
||||
### 竖版信息图（infographic/）
|
||||
- 内容：AI 记忆系统 CLAUDE.md 从 93KB 优化到 22KB
|
||||
- Pentagram：巨大「93→22」数字 + 编号区块 + CSS 数据条
|
||||
- Build：极致留白 + 柔影卡片 + 暖金连接线
|
||||
- Takram：SVG 环形图 + 有机曲线流程图 + 毛玻璃卡片
|
||||
|
||||
### 个人主页（website-homepage/）
|
||||
- 内容：独立开发者 Alex Chen 的作品集首页
|
||||
- Pentagram：112px 大名 + 瑞士网格分栏 + 编辑数字
|
||||
- Build：玻璃态导航 + 悬浮统计卡片 + 超细字重
|
||||
- Takram：纸质纹理 + 小圆形头像 + 发丝细分隔线 + 不对称布局
|
||||
|
||||
### AI导航站（website-ai-nav/）
|
||||
- 内容：AI Compass — 500+ AI 工具目录
|
||||
- Pentagram：方角搜索框 + 编号工具列表 + 大写分类标签
|
||||
- Build：圆角搜索框 + 精致白色工具卡片 + 药丸标签
|
||||
- Takram：有机错位卡片布局 + 柔和分类标签 + 图表式连接
|
||||
|
||||
### AI写作工具（website-ai-writing/）
|
||||
- 内容：Inkwell — AI 写作助手
|
||||
- Pentagram：86px 大标题 + 线框编辑器模型 + 网格特性列
|
||||
- Build：漂浮编辑器卡片 + 暖金 CTA + 奢华写作体验
|
||||
- Takram：诗意衬线标题 + 有机编辑器 + 流程图
|
||||
|
||||
### SaaS落地页（website-saas/）
|
||||
- 内容：Meridian — 商业智能分析平台
|
||||
- Pentagram：黑白分栏 + 结构化仪表盘 + 140px「3x」锚点
|
||||
- Build：悬浮仪表盘卡片 + SVG 面积图 + 暖金渐变
|
||||
- Takram：圆角柱状图 + 流程节点 + 柔和地球色
|
||||
|
||||
### 开发者文档（website-devdocs/）
|
||||
- 内容：Nexus API — 统一 AI 模型网关
|
||||
- Pentagram：左侧导航栏 + 方角代码块 + 红色字符串高亮
|
||||
- Build：居中漂浮代码卡片 + 柔影 + 暖金图标
|
||||
- Takram：米色代码块 + 流程图连接 + 虚线特性卡片
|
||||
|
||||
## 文件统计
|
||||
|
||||
- HTML 源文件：24 个
|
||||
- PNG 截图：24 个
|
||||
- 总资产：48 个文件
|
||||
|
||||
---
|
||||
|
||||
**版本**：v1.0
|
||||
**创建日期**：2026-02-13
|
||||
**适用于**：design-philosophy skill Phase 3 推荐环节
|
||||
@@ -0,0 +1,235 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=1200">
|
||||
<title>Claude Code Agent - Build Studio Style</title>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@200;300;400;500;600&display=swap" rel="stylesheet">
|
||||
<style>
|
||||
* { margin: 0; padding: 0; box-sizing: border-box; }
|
||||
body {
|
||||
width: 1200px;
|
||||
height: 510px;
|
||||
overflow: hidden;
|
||||
margin: 0;
|
||||
background: #FAFAF8;
|
||||
font-family: 'Inter', sans-serif;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
/* Subtle top gradient wash */
|
||||
.wash {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 1200px;
|
||||
height: 510px;
|
||||
background: radial-gradient(ellipse 800px 400px at 30% 40%, rgba(212, 165, 116, 0.06) 0%, transparent 70%);
|
||||
z-index: 0;
|
||||
}
|
||||
|
||||
/* Main layout */
|
||||
.layout {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 1200px;
|
||||
height: 510px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.center-block {
|
||||
text-align: center;
|
||||
max-width: 700px;
|
||||
margin-top: -24px; /* slight upward shift for golden ratio vertical center */
|
||||
}
|
||||
|
||||
/* Floating "Agent" */
|
||||
.floating-agent {
|
||||
font-family: 'Inter', sans-serif;
|
||||
font-weight: 200;
|
||||
font-size: 128px;
|
||||
letter-spacing: -4px;
|
||||
color: #1A1A18;
|
||||
line-height: 1;
|
||||
margin-bottom: 16px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.floating-agent span {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
/* Slight weight shift on first letter for visual interest */
|
||||
.floating-agent .accent-letter {
|
||||
font-weight: 300;
|
||||
color: #2A2A28;
|
||||
}
|
||||
|
||||
/* Gold underline accent */
|
||||
.gold-line {
|
||||
width: 48px;
|
||||
height: 1px;
|
||||
background: #D4A574;
|
||||
margin: 0 auto 32px;
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
/* Subtitle — label tier: smallest text, widest spacing */
|
||||
.subtitle {
|
||||
font-family: 'Inter', sans-serif;
|
||||
font-weight: 400;
|
||||
font-size: 10px;
|
||||
letter-spacing: 6px;
|
||||
text-transform: uppercase;
|
||||
color: #B0ACA4;
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
|
||||
/* Description line — body tier */
|
||||
.desc {
|
||||
font-family: 'Inter', sans-serif;
|
||||
font-weight: 300;
|
||||
font-size: 13px;
|
||||
color: #A8A4A0;
|
||||
letter-spacing: 0.3px;
|
||||
line-height: 2;
|
||||
max-width: 400px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
/* Minimal agent indicators — 8 thin vertical lines */
|
||||
.agent-indicators {
|
||||
position: absolute;
|
||||
bottom: 48px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
display: flex;
|
||||
gap: 16px;
|
||||
align-items: flex-end;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.indicator {
|
||||
width: 1px;
|
||||
background: #D8D4CE;
|
||||
border-radius: 0.5px;
|
||||
}
|
||||
|
||||
.indicator.gold {
|
||||
background: #D4A574;
|
||||
width: 1.5px;
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
/* Corner marks */
|
||||
.corner-mark {
|
||||
position: absolute;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.corner-mark svg {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.corner-tl { top: 48px; left: 48px; }
|
||||
.corner-br { bottom: 48px; right: 48px; transform: rotate(180deg); }
|
||||
|
||||
/* Side text */
|
||||
.side-label {
|
||||
position: absolute;
|
||||
font-family: 'Inter', sans-serif;
|
||||
font-weight: 400;
|
||||
font-size: 8px;
|
||||
letter-spacing: 4px;
|
||||
text-transform: uppercase;
|
||||
color: #CBC7C0;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.side-left {
|
||||
left: 48px;
|
||||
top: 50%;
|
||||
transform: translateY(-50%) rotate(-90deg);
|
||||
transform-origin: center center;
|
||||
}
|
||||
|
||||
.side-right {
|
||||
right: 48px;
|
||||
top: 50%;
|
||||
transform: translateY(-50%) rotate(90deg);
|
||||
transform-origin: center center;
|
||||
}
|
||||
|
||||
/* Removed shadow-card — Build purity demands uninterrupted whitespace */
|
||||
|
||||
/* Number 8 whisper */
|
||||
.number-whisper {
|
||||
position: absolute;
|
||||
top: 48px;
|
||||
right: 96px;
|
||||
font-family: 'Inter', sans-serif;
|
||||
font-weight: 200;
|
||||
font-size: 24px;
|
||||
color: #D4A574;
|
||||
opacity: 0.35;
|
||||
z-index: 2;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="wash"></div>
|
||||
|
||||
<!-- Corner marks -->
|
||||
<div class="corner-mark corner-tl">
|
||||
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M0 0L0 20" stroke="#D4A574" stroke-width="0.5" opacity="0.4"/>
|
||||
<path d="M0 0L20 0" stroke="#D4A574" stroke-width="0.5" opacity="0.4"/>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="corner-mark corner-br">
|
||||
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M0 0L0 20" stroke="#D4A574" stroke-width="0.5" opacity="0.4"/>
|
||||
<path d="M0 0L20 0" stroke="#D4A574" stroke-width="0.5" opacity="0.4"/>
|
||||
</svg>
|
||||
</div>
|
||||
|
||||
<!-- Side labels -->
|
||||
<div class="side-label side-left">Claude Code</div>
|
||||
<div class="side-label side-right">Parallel Workflow</div>
|
||||
|
||||
<!-- Number whisper -->
|
||||
<div class="number-whisper">8</div>
|
||||
|
||||
<!-- Main content -->
|
||||
<div class="layout">
|
||||
<div class="center-block">
|
||||
<div class="subtitle">Parallel Architecture</div>
|
||||
<div class="floating-agent"><span><span class="accent-letter">A</span>gent</span></div>
|
||||
<div class="gold-line"></div>
|
||||
<div class="desc">
|
||||
Eight autonomous agents orchestrated in parallel,<br>
|
||||
each solving a distinct piece of the whole.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Agent indicators -->
|
||||
<div class="agent-indicators">
|
||||
<div class="indicator" style="height: 20px;"></div>
|
||||
<div class="indicator" style="height: 28px;"></div>
|
||||
<div class="indicator gold" style="height: 36px;"></div>
|
||||
<div class="indicator" style="height: 22px;"></div>
|
||||
<div class="indicator" style="height: 32px;"></div>
|
||||
<div class="indicator gold" style="height: 40px;"></div>
|
||||
<div class="indicator" style="height: 24px;"></div>
|
||||
<div class="indicator" style="height: 30px;"></div>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 114 KiB |
@@ -0,0 +1,229 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=1200">
|
||||
<title>Agent Parallel — Pentagram Style Cover</title>
|
||||
<style>
|
||||
* { margin: 0; padding: 0; box-sizing: border-box; }
|
||||
body {
|
||||
width: 1200px;
|
||||
height: 510px;
|
||||
overflow: hidden;
|
||||
margin: 0;
|
||||
background: #FFFFFF;
|
||||
font-family: 'Helvetica Neue', 'Arial', sans-serif;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
/* Grid rules — Swiss grid visible structure */
|
||||
.rule-h {
|
||||
position: absolute;
|
||||
left: 64px;
|
||||
right: 64px;
|
||||
height: 1px;
|
||||
background: #000;
|
||||
opacity: 0.06;
|
||||
}
|
||||
|
||||
.rule-v {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
width: 1px;
|
||||
background: #000;
|
||||
opacity: 0.04;
|
||||
}
|
||||
|
||||
/* Giant typographic element — the "8" bleeds off right edge */
|
||||
.type-anchor {
|
||||
position: absolute;
|
||||
right: -60px;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
font-family: 'Helvetica Neue', Arial, sans-serif;
|
||||
font-weight: 900;
|
||||
font-size: 640px;
|
||||
line-height: 0.82;
|
||||
color: #000;
|
||||
opacity: 0.07;
|
||||
z-index: 0;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
/* Red geometric dot grid — 8 dots representing 8 agents */
|
||||
.dot-grid {
|
||||
position: absolute;
|
||||
right: 340px;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, 24px);
|
||||
grid-template-rows: repeat(2, 24px);
|
||||
gap: 16px;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.dot {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
border-radius: 50%;
|
||||
background: #000;
|
||||
opacity: 0.12;
|
||||
align-self: center;
|
||||
justify-self: center;
|
||||
}
|
||||
|
||||
.dot.active {
|
||||
background: #E63946;
|
||||
opacity: 0.8;
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
}
|
||||
|
||||
/* Primary content zone — left-aligned on Swiss grid */
|
||||
.content {
|
||||
position: absolute;
|
||||
left: 64px;
|
||||
top: 56px;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.label {
|
||||
font-family: 'Helvetica Neue', Arial, sans-serif;
|
||||
font-size: 11px;
|
||||
font-weight: 700;
|
||||
letter-spacing: 4px;
|
||||
text-transform: uppercase;
|
||||
color: #E63946;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.title {
|
||||
font-family: 'Helvetica Neue', Arial, sans-serif;
|
||||
font-weight: 900;
|
||||
font-size: 120px;
|
||||
line-height: 0.9;
|
||||
color: #000;
|
||||
letter-spacing: -5px;
|
||||
}
|
||||
|
||||
.title .accent {
|
||||
color: #E63946;
|
||||
}
|
||||
|
||||
/* Bottom information bar */
|
||||
.bottom-bar {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: 48px;
|
||||
background: #000;
|
||||
z-index: 2;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 0 64px;
|
||||
}
|
||||
|
||||
.bottom-left {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 24px;
|
||||
}
|
||||
|
||||
.bottom-stat {
|
||||
font-family: 'Helvetica Neue', Arial, sans-serif;
|
||||
font-size: 11px;
|
||||
font-weight: 700;
|
||||
letter-spacing: 2px;
|
||||
text-transform: uppercase;
|
||||
color: #fff;
|
||||
opacity: 0.6;
|
||||
}
|
||||
|
||||
.bottom-stat strong {
|
||||
color: #E63946;
|
||||
opacity: 1;
|
||||
font-size: 16px;
|
||||
margin-right: 6px;
|
||||
}
|
||||
|
||||
.bottom-right {
|
||||
font-family: 'Helvetica Neue', Arial, sans-serif;
|
||||
font-size: 10px;
|
||||
font-weight: 700;
|
||||
letter-spacing: 3px;
|
||||
text-transform: uppercase;
|
||||
color: #fff;
|
||||
opacity: 0.4;
|
||||
}
|
||||
|
||||
/* Subtitle */
|
||||
.subtitle {
|
||||
font-family: 'Helvetica Neue', Arial, sans-serif;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
color: #999;
|
||||
letter-spacing: 0.5px;
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
/* Horizontal red rule through center */
|
||||
.center-rule {
|
||||
position: absolute;
|
||||
left: 64px;
|
||||
width: 240px;
|
||||
height: 3px;
|
||||
background: #E63946;
|
||||
top: 306px;
|
||||
z-index: 2;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<!-- Grid structure -->
|
||||
<div class="rule-h" style="top: 56px;"></div>
|
||||
<div class="rule-v" style="left: 64px;"></div>
|
||||
<div class="rule-v" style="left: 600px;"></div>
|
||||
<div class="rule-v" style="right: 64px;"></div>
|
||||
|
||||
<!-- Typographic anchor — bleeds right -->
|
||||
<div class="type-anchor">8</div>
|
||||
|
||||
<!-- 8-dot grid representing agents -->
|
||||
<div class="dot-grid">
|
||||
<div class="dot active"></div>
|
||||
<div class="dot"></div>
|
||||
<div class="dot active"></div>
|
||||
<div class="dot"></div>
|
||||
<div class="dot"></div>
|
||||
<div class="dot active"></div>
|
||||
<div class="dot"></div>
|
||||
<div class="dot active"></div>
|
||||
</div>
|
||||
|
||||
<!-- Content -->
|
||||
<div class="content">
|
||||
<div class="label">Claude Code Architecture</div>
|
||||
<div class="title">Agent<br><span class="accent">Parallel</span></div>
|
||||
<div class="subtitle">8 autonomous agents running in unified workflow</div>
|
||||
</div>
|
||||
|
||||
<!-- Red horizontal rule -->
|
||||
<div class="center-rule"></div>
|
||||
|
||||
<!-- Black bottom bar with data -->
|
||||
<div class="bottom-bar">
|
||||
<div class="bottom-left">
|
||||
<div class="bottom-stat"><strong>8</strong>Agents</div>
|
||||
<div class="bottom-stat"><strong>3.2x</strong>Faster</div>
|
||||
<div class="bottom-stat"><strong>1</strong>Workflow</div>
|
||||
</div>
|
||||
<div class="bottom-right">Pentagram Design System</div>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 35 KiB |
@@ -0,0 +1,288 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=1200">
|
||||
<title>Claude Code Agent - Takram Style</title>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500&family=Noto+Serif+SC:wght@300;400;500;600&display=swap" rel="stylesheet">
|
||||
<style>
|
||||
* { margin: 0; padding: 0; box-sizing: border-box; }
|
||||
body {
|
||||
width: 1200px;
|
||||
height: 510px;
|
||||
overflow: hidden;
|
||||
margin: 0;
|
||||
background: #F5F0EB;
|
||||
font-family: 'Inter', sans-serif;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
/* Subtle paper texture overlay */
|
||||
.texture {
|
||||
position: absolute;
|
||||
top: 0; left: 0;
|
||||
width: 1200px;
|
||||
height: 510px;
|
||||
background:
|
||||
radial-gradient(ellipse 500px 400px at 72% 50%, rgba(168, 181, 160, 0.06) 0%, transparent 70%),
|
||||
radial-gradient(ellipse 300px 250px at 15% 40%, rgba(232, 228, 220, 0.2) 0%, transparent 60%);
|
||||
z-index: 0;
|
||||
}
|
||||
|
||||
/* Flow diagram — the art piece */
|
||||
.diagram {
|
||||
position: absolute;
|
||||
top: 0; left: 0;
|
||||
width: 1200px;
|
||||
height: 510px;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
/* Left text panel */
|
||||
.text-panel {
|
||||
position: absolute;
|
||||
left: 72px;
|
||||
top: 56px;
|
||||
z-index: 2;
|
||||
max-width: 360px;
|
||||
}
|
||||
|
||||
.text-panel .label {
|
||||
font-family: 'Inter', sans-serif;
|
||||
font-weight: 500;
|
||||
font-size: 9px;
|
||||
letter-spacing: 3px;
|
||||
text-transform: uppercase;
|
||||
color: #6B8F71;
|
||||
margin-bottom: 20px;
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
.text-panel .title-main {
|
||||
font-family: 'Noto Serif SC', serif;
|
||||
font-weight: 500;
|
||||
font-size: 52px;
|
||||
color: #2D3436;
|
||||
line-height: 1.15;
|
||||
letter-spacing: -0.5px;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.text-panel .title-sub {
|
||||
font-family: 'Noto Serif SC', serif;
|
||||
font-weight: 300;
|
||||
font-size: 20px;
|
||||
color: #6D685F;
|
||||
line-height: 1.4;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.text-panel .title-en {
|
||||
font-family: 'Inter', sans-serif;
|
||||
font-weight: 300;
|
||||
font-size: 13px;
|
||||
color: #9A958D;
|
||||
letter-spacing: 0.3px;
|
||||
line-height: 1.8;
|
||||
}
|
||||
|
||||
/* Bottom annotation */
|
||||
.annotation {
|
||||
position: absolute;
|
||||
left: 72px;
|
||||
bottom: 40px;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.annotation .note {
|
||||
font-family: 'Inter', sans-serif;
|
||||
font-weight: 400;
|
||||
font-size: 10px;
|
||||
color: #B0AAA0;
|
||||
letter-spacing: 0.3px;
|
||||
}
|
||||
|
||||
.annotation .note-serif {
|
||||
font-family: 'Noto Serif SC', serif;
|
||||
font-weight: 300;
|
||||
font-size: 11px;
|
||||
color: #9A958D;
|
||||
margin-top: 4px;
|
||||
}
|
||||
|
||||
/* Right side number */
|
||||
.spec-number {
|
||||
position: absolute;
|
||||
right: 72px;
|
||||
bottom: 40px;
|
||||
font-family: 'Inter', sans-serif;
|
||||
font-weight: 300;
|
||||
font-size: 10px;
|
||||
color: #B0AAA0;
|
||||
letter-spacing: 1px;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
/* Agent node styling */
|
||||
.node-label {
|
||||
font-family: 'Inter', sans-serif;
|
||||
font-size: 9px;
|
||||
font-weight: 400;
|
||||
fill: #8A857D;
|
||||
letter-spacing: 0.5px;
|
||||
}
|
||||
|
||||
.node-label-serif {
|
||||
font-family: 'Noto Serif SC', serif;
|
||||
font-size: 11px;
|
||||
font-weight: 400;
|
||||
fill: #6D685F;
|
||||
}
|
||||
|
||||
.node-index {
|
||||
font-family: 'Inter', sans-serif;
|
||||
font-size: 7px;
|
||||
font-weight: 400;
|
||||
fill: #B0AAA0;
|
||||
letter-spacing: 0.5px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="texture"></div>
|
||||
|
||||
<!-- Text panel -->
|
||||
<div class="text-panel">
|
||||
<div class="label">Speculative Architecture</div>
|
||||
<div class="title-main">协作智能体</div>
|
||||
<div class="title-sub">Parallel Workflow</div>
|
||||
<div class="title-en">
|
||||
Eight agents, each autonomous,<br>
|
||||
converging toward a shared intent.
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- The diagram as art -->
|
||||
<svg class="diagram" viewBox="0 0 1200 510" xmlns="http://www.w3.org/2000/svg">
|
||||
|
||||
<!-- Subtle background grid hints (Takram spec-drawing aesthetic) -->
|
||||
<line x1="440" y1="0" x2="440" y2="510" stroke="#E8E4DC" stroke-width="0.3" opacity="0.4"/>
|
||||
<line x1="760" y1="0" x2="760" y2="510" stroke="#E8E4DC" stroke-width="0.3" opacity="0.3"/>
|
||||
|
||||
<!-- Subtle outer orbital paths — layered ellipses for depth -->
|
||||
<ellipse cx="760" cy="255" rx="260" ry="195" fill="none" stroke="#E0DCD5" stroke-width="0.5" stroke-dasharray="1,8" opacity="0.5"/>
|
||||
<ellipse cx="760" cy="255" rx="180" ry="135" fill="none" stroke="#D8D3CB" stroke-width="0.4" stroke-dasharray="2,6" opacity="0.35"/>
|
||||
|
||||
<!-- Central orchestrator node — refined with layered depth -->
|
||||
<circle cx="760" cy="255" r="48" fill="none" stroke="#6B8F71" stroke-width="0.5" opacity="0.12" stroke-dasharray="2,4"/>
|
||||
<circle cx="760" cy="255" r="36" fill="none" stroke="#6B8F71" stroke-width="0.8" opacity="0.18"/>
|
||||
<circle cx="760" cy="255" r="24" fill="none" stroke="#6B8F71" stroke-width="1.2" opacity="0.3"/>
|
||||
<circle cx="760" cy="255" r="14" fill="rgba(107,143,113,0.05)"/>
|
||||
<circle cx="760" cy="255" r="5.5" fill="#6B8F71" opacity="0.55"/>
|
||||
<circle cx="760" cy="255" r="2" fill="#6B8F71" opacity="0.9"/>
|
||||
<text x="760" y="312" text-anchor="middle" class="node-label-serif">Orchestrator</text>
|
||||
<!-- Subtle cross-hair on center -->
|
||||
<line x1="748" y1="255" x2="730" y2="255" stroke="#6B8F71" stroke-width="0.3" opacity="0.15"/>
|
||||
<line x1="772" y1="255" x2="790" y2="255" stroke="#6B8F71" stroke-width="0.3" opacity="0.15"/>
|
||||
<line x1="760" y1="243" x2="760" y2="225" stroke="#6B8F71" stroke-width="0.3" opacity="0.15"/>
|
||||
<line x1="760" y1="267" x2="760" y2="285" stroke="#6B8F71" stroke-width="0.3" opacity="0.15"/>
|
||||
|
||||
<!-- Agent 1 — top-left (Research) -->
|
||||
<line x1="738" y1="232" x2="598" y2="118" stroke="#C8C2B8" stroke-width="0.7" stroke-dasharray="3,5"/>
|
||||
<rect x="560" y="92" width="76" height="38" rx="14" fill="rgba(245,240,235,0.7)" stroke="#B8B2A8" stroke-width="0.8"/>
|
||||
<circle cx="598" cy="111" r="3.5" fill="#6B8F71" opacity="0.5"/>
|
||||
<text x="598" y="144" text-anchor="middle" class="node-label">Research</text>
|
||||
<text x="560" y="88" class="node-index">01</text>
|
||||
|
||||
<!-- Agent 2 — top (Analysis) -->
|
||||
<line x1="760" y1="217" x2="760" y2="145" stroke="#C8C2B8" stroke-width="0.7" stroke-dasharray="3,5"/>
|
||||
<rect x="722" y="100" width="76" height="38" rx="14" fill="rgba(245,240,235,0.7)" stroke="#B8B2A8" stroke-width="0.8"/>
|
||||
<circle cx="760" cy="119" r="3.5" fill="#6B8F71" opacity="0.5"/>
|
||||
<text x="760" y="152" text-anchor="middle" class="node-label">Analysis</text>
|
||||
<text x="722" y="96" class="node-index">02</text>
|
||||
|
||||
<!-- Agent 3 — top-right (Code) -->
|
||||
<line x1="782" y1="232" x2="918" y2="118" stroke="#C8C2B8" stroke-width="0.7" stroke-dasharray="3,5"/>
|
||||
<rect x="884" y="92" width="76" height="38" rx="14" fill="rgba(245,240,235,0.7)" stroke="#B8B2A8" stroke-width="0.8"/>
|
||||
<circle cx="922" cy="111" r="3.5" fill="#6B8F71" opacity="0.5"/>
|
||||
<text x="922" y="144" text-anchor="middle" class="node-label">Code</text>
|
||||
<text x="884" y="88" class="node-index">03</text>
|
||||
|
||||
<!-- Agent 4 — right (Test) -->
|
||||
<line x1="786" y1="252" x2="940" y2="215" stroke="#C8C2B8" stroke-width="0.7" stroke-dasharray="3,5"/>
|
||||
<rect x="940" y="196" width="76" height="38" rx="14" fill="rgba(245,240,235,0.7)" stroke="#B8B2A8" stroke-width="0.8"/>
|
||||
<circle cx="978" cy="215" r="3.5" fill="#6B8F71" opacity="0.5"/>
|
||||
<text x="978" y="248" text-anchor="middle" class="node-label">Test</text>
|
||||
<text x="940" y="192" class="node-index">04</text>
|
||||
|
||||
<!-- Agent 5 — bottom-right (Review) -->
|
||||
<line x1="782" y1="278" x2="918" y2="385" stroke="#C8C2B8" stroke-width="0.7" stroke-dasharray="3,5"/>
|
||||
<rect x="884" y="368" width="76" height="38" rx="14" fill="rgba(245,240,235,0.7)" stroke="#B8B2A8" stroke-width="0.8"/>
|
||||
<circle cx="922" cy="387" r="3.5" fill="#6B8F71" opacity="0.5"/>
|
||||
<text x="922" y="420" text-anchor="middle" class="node-label">Review</text>
|
||||
<text x="884" y="364" class="node-index">05</text>
|
||||
|
||||
<!-- Agent 6 — bottom (Deploy) -->
|
||||
<line x1="760" y1="293" x2="760" y2="365" stroke="#C8C2B8" stroke-width="0.7" stroke-dasharray="3,5"/>
|
||||
<rect x="722" y="370" width="76" height="38" rx="14" fill="rgba(245,240,235,0.7)" stroke="#B8B2A8" stroke-width="0.8"/>
|
||||
<circle cx="760" cy="389" r="3.5" fill="#6B8F71" opacity="0.5"/>
|
||||
<text x="760" y="422" text-anchor="middle" class="node-label">Deploy</text>
|
||||
<text x="722" y="366" class="node-index">06</text>
|
||||
|
||||
<!-- Agent 7 — bottom-left (Monitor) -->
|
||||
<line x1="738" y1="278" x2="600" y2="375" stroke="#C8C2B8" stroke-width="0.7" stroke-dasharray="3,5"/>
|
||||
<rect x="562" y="358" width="76" height="38" rx="14" fill="rgba(245,240,235,0.7)" stroke="#B8B2A8" stroke-width="0.8"/>
|
||||
<circle cx="600" cy="377" r="3.5" fill="#6B8F71" opacity="0.5"/>
|
||||
<text x="600" y="410" text-anchor="middle" class="node-label">Monitor</text>
|
||||
<text x="562" y="354" class="node-index">07</text>
|
||||
|
||||
<!-- Agent 8 — left (Design) -->
|
||||
<line x1="734" y1="252" x2="578" y2="245" stroke="#C8C2B8" stroke-width="0.7" stroke-dasharray="3,5"/>
|
||||
<rect x="502" y="226" width="76" height="38" rx="14" fill="rgba(245,240,235,0.7)" stroke="#B8B2A8" stroke-width="0.8"/>
|
||||
<circle cx="540" cy="245" r="3.5" fill="#6B8F71" opacity="0.5"/>
|
||||
<text x="540" y="278" text-anchor="middle" class="node-label">Design</text>
|
||||
<text x="502" y="222" class="node-index">08</text>
|
||||
|
||||
<!-- Small annotation marks — Takram spec-drawing details -->
|
||||
<circle cx="490" cy="120" r="1.2" fill="#B0AAA0" opacity="0.35"/>
|
||||
<line x1="492" y1="120" x2="535" y2="120" stroke="#B0AAA0" stroke-width="0.4" opacity="0.25"/>
|
||||
|
||||
<circle cx="1040" cy="390" r="1.2" fill="#B0AAA0" opacity="0.35"/>
|
||||
<line x1="1038" y1="390" x2="995" y2="390" stroke="#B0AAA0" stroke-width="0.4" opacity="0.25"/>
|
||||
|
||||
<!-- Dimension annotation line (top) -->
|
||||
<line x1="540" y1="60" x2="980" y2="60" stroke="#D4CFC6" stroke-width="0.4" opacity="0.3"/>
|
||||
<line x1="540" y1="55" x2="540" y2="65" stroke="#D4CFC6" stroke-width="0.4" opacity="0.3"/>
|
||||
<line x1="980" y1="55" x2="980" y2="65" stroke="#D4CFC6" stroke-width="0.4" opacity="0.3"/>
|
||||
<text x="760" y="54" text-anchor="middle" font-family="Inter" font-size="7" font-weight="300" fill="#C8C2B8" letter-spacing="1.5">AGENT FIELD</text>
|
||||
|
||||
<!-- Right-side vertical annotation -->
|
||||
<line x1="1060" y1="130" x2="1060" y2="380" stroke="#D4CFC6" stroke-width="0.3" opacity="0.25"/>
|
||||
<line x1="1056" y1="130" x2="1064" y2="130" stroke="#D4CFC6" stroke-width="0.3" opacity="0.25"/>
|
||||
<line x1="1056" y1="380" x2="1064" y2="380" stroke="#D4CFC6" stroke-width="0.3" opacity="0.25"/>
|
||||
<text x="1068" y="260" font-family="Inter" font-size="7" font-weight="300" fill="#D4CFC6" letter-spacing="0.5" transform="rotate(90, 1068, 260)">NETWORK DEPTH</text>
|
||||
|
||||
<!-- Subtle data pulse lines emanating from center (organic feel) -->
|
||||
<path d="M 760 217 Q 755 200 758 185" fill="none" stroke="#6B8F71" stroke-width="0.3" opacity="0.12"/>
|
||||
<path d="M 786 248 Q 810 230 835 225" fill="none" stroke="#6B8F71" stroke-width="0.3" opacity="0.12"/>
|
||||
<path d="M 786 262 Q 815 275 840 290" fill="none" stroke="#6B8F71" stroke-width="0.3" opacity="0.12"/>
|
||||
|
||||
<!-- Top-right spec box -->
|
||||
<rect x="1040" y="48" width="104" height="56" rx="3" fill="rgba(245,240,235,0.5)" stroke="#E0DCD5" stroke-width="0.6"/>
|
||||
<text x="1052" y="66" font-family="Inter" font-size="8" font-weight="500" fill="#B0AAA0" letter-spacing="1.5">AGENTS</text>
|
||||
<text x="1052" y="92" font-family="Inter" font-size="28" font-weight="300" fill="#6B8F71">8</text>
|
||||
<text x="1082" y="92" font-family="Inter" font-size="9" font-weight="300" fill="#B0AAA0"> parallel</text>
|
||||
</svg>
|
||||
|
||||
<!-- Bottom annotation -->
|
||||
<div class="annotation">
|
||||
<div class="note">Fig. 01 — Parallel Agent Architecture</div>
|
||||
<div class="note-serif">Claude Code 协作编排模型</div>
|
||||
</div>
|
||||
|
||||
<!-- Spec number -->
|
||||
<div class="spec-number">v1.0 / 2026</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 152 KiB |
@@ -0,0 +1,503 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=1080">
|
||||
<title>AI Memory System Optimization — Build Studio Style</title>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@200;300;400;500;600&display=swap" rel="stylesheet">
|
||||
<style>
|
||||
* { margin: 0; padding: 0; box-sizing: border-box; }
|
||||
body {
|
||||
width: 1080px;
|
||||
height: 1920px;
|
||||
overflow: hidden;
|
||||
margin: 0;
|
||||
background: #FAFAF8;
|
||||
font-family: 'Inter', sans-serif;
|
||||
color: #2A2A2A;
|
||||
}
|
||||
|
||||
.container {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
padding: 80px 80px 64px 80px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
/* Header */
|
||||
.label {
|
||||
font-size: 10px;
|
||||
font-weight: 400;
|
||||
letter-spacing: 5px;
|
||||
text-transform: uppercase;
|
||||
color: #B0ACA4;
|
||||
margin-bottom: 32px;
|
||||
}
|
||||
.title {
|
||||
font-size: 36px;
|
||||
font-weight: 200;
|
||||
line-height: 1.35;
|
||||
color: #1A1A1A;
|
||||
letter-spacing: -0.5px;
|
||||
max-width: 680px;
|
||||
}
|
||||
.title strong {
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
/* Hero Numbers */
|
||||
.hero {
|
||||
margin-top: 56px;
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
gap: 48px;
|
||||
}
|
||||
.hero-block {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
.hero-label {
|
||||
font-size: 10px;
|
||||
font-weight: 400;
|
||||
letter-spacing: 4px;
|
||||
text-transform: uppercase;
|
||||
color: #B0ACA4;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
.hero-number {
|
||||
font-size: 112px;
|
||||
font-weight: 200;
|
||||
line-height: 0.9;
|
||||
color: #1A1A1A;
|
||||
letter-spacing: -4px;
|
||||
}
|
||||
.hero-number .unit {
|
||||
font-size: 28px;
|
||||
font-weight: 300;
|
||||
letter-spacing: 0;
|
||||
color: #B0ACA4;
|
||||
margin-left: 4px;
|
||||
}
|
||||
.hero-number.gold {
|
||||
color: #1A1A1A;
|
||||
}
|
||||
.hero-number.gold .unit {
|
||||
color: #D4A574;
|
||||
opacity: 0.7;
|
||||
}
|
||||
.hero-number.gold .dot-accent {
|
||||
color: #D4A574;
|
||||
}
|
||||
.hero-connector {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
.hero-connector svg {
|
||||
opacity: 0.25;
|
||||
}
|
||||
.hero-reduction {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
.reduction-badge {
|
||||
font-size: 13px;
|
||||
font-weight: 400;
|
||||
color: #D4A574;
|
||||
letter-spacing: 2px;
|
||||
}
|
||||
|
||||
/* Subtle line */
|
||||
.divider {
|
||||
width: 48px;
|
||||
height: 1px;
|
||||
background: #D4A574;
|
||||
margin: 48px 0;
|
||||
opacity: 0.4;
|
||||
}
|
||||
|
||||
/* Stats Row */
|
||||
.stats-row {
|
||||
display: flex;
|
||||
gap: 0;
|
||||
}
|
||||
.stat-item {
|
||||
flex: 1;
|
||||
padding: 24px 0;
|
||||
position: relative;
|
||||
}
|
||||
.stat-item::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
width: 1px;
|
||||
height: 40px;
|
||||
background: #E0DCDA;
|
||||
}
|
||||
.stat-item:last-child::after {
|
||||
display: none;
|
||||
}
|
||||
.stat-value {
|
||||
font-size: 40px;
|
||||
font-weight: 200;
|
||||
color: #1A1A1A;
|
||||
line-height: 1;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
.stat-desc {
|
||||
font-size: 11px;
|
||||
font-weight: 300;
|
||||
color: #B0ACA4;
|
||||
line-height: 1.5;
|
||||
letter-spacing: 0.5px;
|
||||
}
|
||||
|
||||
/* Memory Cards */
|
||||
.cards-section {
|
||||
margin-top: 40px;
|
||||
}
|
||||
.cards-label {
|
||||
font-size: 10px;
|
||||
font-weight: 400;
|
||||
letter-spacing: 5px;
|
||||
text-transform: uppercase;
|
||||
color: #B0ACA4;
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
.cards-grid {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 16px;
|
||||
}
|
||||
.card {
|
||||
background: #FFFFFF;
|
||||
padding: 32px;
|
||||
box-shadow: 0 1px 2px rgba(0,0,0,0.03), 0 4px 16px rgba(0,0,0,0.02);
|
||||
border-radius: 2px;
|
||||
position: relative;
|
||||
}
|
||||
.card-index {
|
||||
font-size: 40px;
|
||||
font-weight: 200;
|
||||
color: #E8E4E0;
|
||||
line-height: 1;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
.card-title-zh {
|
||||
font-size: 18px;
|
||||
font-weight: 500;
|
||||
color: #1A1A1A;
|
||||
margin-bottom: 4px;
|
||||
line-height: 1.3;
|
||||
}
|
||||
.card-title-en {
|
||||
font-size: 10px;
|
||||
font-weight: 400;
|
||||
color: #C0BCB6;
|
||||
letter-spacing: 2px;
|
||||
text-transform: uppercase;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
.card-desc {
|
||||
font-size: 12px;
|
||||
font-weight: 300;
|
||||
color: #999;
|
||||
line-height: 1.7;
|
||||
}
|
||||
.card.featured {
|
||||
border-left: 1.5px solid #D4A574;
|
||||
}
|
||||
.card.featured .card-index {
|
||||
color: #D4A574;
|
||||
opacity: 0.35;
|
||||
}
|
||||
|
||||
/* Flow */
|
||||
.flow-section {
|
||||
margin-top: 40px;
|
||||
}
|
||||
.flow-label {
|
||||
font-size: 10px;
|
||||
font-weight: 400;
|
||||
letter-spacing: 5px;
|
||||
text-transform: uppercase;
|
||||
color: #B0ACA4;
|
||||
margin-bottom: 32px;
|
||||
}
|
||||
.flow-timeline {
|
||||
position: relative;
|
||||
padding-left: 0;
|
||||
}
|
||||
.flow-steps {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
position: relative;
|
||||
}
|
||||
.flow-steps::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 8px;
|
||||
left: 36px;
|
||||
right: 36px;
|
||||
height: 1px;
|
||||
background: linear-gradient(to right, #E0DCDA, #D4A574 50%, #E0DCDA);
|
||||
}
|
||||
.flow-step {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 16px;
|
||||
flex: 1;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
.flow-dot {
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
border-radius: 50%;
|
||||
background: #FAFAF8;
|
||||
border: 1px solid #D0CCC6;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.flow-dot.active {
|
||||
border-color: #D4A574;
|
||||
background: #D4A574;
|
||||
}
|
||||
.flow-step-label {
|
||||
font-size: 9px;
|
||||
font-weight: 400;
|
||||
letter-spacing: 2px;
|
||||
text-transform: uppercase;
|
||||
color: #C0BCB6;
|
||||
}
|
||||
.flow-step-text {
|
||||
font-size: 13px;
|
||||
font-weight: 400;
|
||||
color: #2A2A2A;
|
||||
text-align: center;
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
/* Quote */
|
||||
.quote-section {
|
||||
margin-top: 0;
|
||||
padding-top: 32px;
|
||||
border-top: 1px solid #EEECE8;
|
||||
}
|
||||
.quote-line {
|
||||
width: 32px;
|
||||
height: 1px;
|
||||
background: #D4A574;
|
||||
margin-bottom: 24px;
|
||||
opacity: 0.5;
|
||||
}
|
||||
.quote-text {
|
||||
font-size: 22px;
|
||||
font-weight: 200;
|
||||
color: #1A1A1A;
|
||||
line-height: 1.6;
|
||||
letter-spacing: -0.3px;
|
||||
max-width: 680px;
|
||||
}
|
||||
.quote-text em {
|
||||
font-style: normal;
|
||||
color: #D4A574;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
/* Results */
|
||||
.results-row {
|
||||
display: flex;
|
||||
gap: 48px;
|
||||
margin-top: 32px;
|
||||
}
|
||||
.result-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
}
|
||||
.result-icon {
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
border-radius: 50%;
|
||||
background: #D4A574;
|
||||
flex-shrink: 0;
|
||||
opacity: 0.6;
|
||||
}
|
||||
.result-text {
|
||||
font-size: 13px;
|
||||
font-weight: 400;
|
||||
color: #999999;
|
||||
letter-spacing: 0.3px;
|
||||
}
|
||||
|
||||
/* Footer */
|
||||
.footer {
|
||||
margin-top: 32px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
.footer-text {
|
||||
font-size: 9px;
|
||||
font-weight: 300;
|
||||
color: #D0CCC6;
|
||||
letter-spacing: 3px;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="container">
|
||||
|
||||
<!-- Label -->
|
||||
<div class="label">System Architecture</div>
|
||||
|
||||
<!-- Title -->
|
||||
<div class="title">
|
||||
AI记忆系统<br>
|
||||
CLAUDE.md <strong>从 93KB<br>优化到 22KB</strong>
|
||||
</div>
|
||||
|
||||
<!-- Hero Numbers -->
|
||||
<div class="hero">
|
||||
<div class="hero-block">
|
||||
<span class="hero-label">Before</span>
|
||||
<span class="hero-number">93<span class="unit">KB</span></span>
|
||||
</div>
|
||||
<div class="hero-connector">
|
||||
<svg width="48" height="8" viewBox="0 0 48 8">
|
||||
<line x1="0" y1="4" x2="40" y2="4" stroke="#D4A574" stroke-width="0.75" opacity="0.5"/>
|
||||
<line x1="36" y1="1" x2="42" y2="4" stroke="#D4A574" stroke-width="0.75" opacity="0.5"/>
|
||||
<line x1="36" y1="7" x2="42" y2="4" stroke="#D4A574" stroke-width="0.75" opacity="0.5"/>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="hero-block">
|
||||
<span class="hero-label">After</span>
|
||||
<span class="hero-number gold">22<span class="unit">KB</span></span>
|
||||
</div>
|
||||
<div class="hero-reduction">
|
||||
<span class="reduction-badge">-76%</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Stats -->
|
||||
<div class="divider"></div>
|
||||
<div class="stats-row">
|
||||
<div class="stat-item">
|
||||
<div class="stat-value">2400<span style="font-size:18px;color:#AAAAAA">+</span></div>
|
||||
<div class="stat-desc">lines before<br>in single file</div>
|
||||
</div>
|
||||
<div class="stat-item" style="padding-left: 24px;">
|
||||
<div class="stat-value">4</div>
|
||||
<div class="stat-desc">structured<br>memory categories</div>
|
||||
</div>
|
||||
<div class="stat-item" style="padding-left: 24px;">
|
||||
<div class="stat-value">0</div>
|
||||
<div class="stat-desc">information<br>loss</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Memory Cards -->
|
||||
<div class="cards-section">
|
||||
<div class="cards-label">Memory Categories</div>
|
||||
<div class="cards-grid">
|
||||
<div class="card featured">
|
||||
<div class="card-index">01</div>
|
||||
<div class="card-title-zh">核心身份</div>
|
||||
<div class="card-title-en">Core Identity</div>
|
||||
<div class="card-desc">Immutable traits, facts, fundamental identity markers</div>
|
||||
</div>
|
||||
<div class="card">
|
||||
<div class="card-index">02</div>
|
||||
<div class="card-title-zh">偏好设置</div>
|
||||
<div class="card-title-en">Preferences</div>
|
||||
<div class="card-desc">Style choices, tool habits, accumulated over sessions</div>
|
||||
</div>
|
||||
<div class="card">
|
||||
<div class="card-index">03</div>
|
||||
<div class="card-title-zh">项目状态</div>
|
||||
<div class="card-title-en">Project State</div>
|
||||
<div class="card-desc">Active tasks, deadlines, priorities, evolving context</div>
|
||||
</div>
|
||||
<div class="card">
|
||||
<div class="card-index">04</div>
|
||||
<div class="card-title-zh">日志流水</div>
|
||||
<div class="card-title-en">Daily Logs</div>
|
||||
<div class="card-desc">Session records, never auto-loaded, search on demand</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Flow -->
|
||||
<div class="flow-section">
|
||||
<div class="flow-label">Processing Flow</div>
|
||||
<div class="flow-timeline">
|
||||
<div class="flow-steps">
|
||||
<div class="flow-step">
|
||||
<div class="flow-dot"></div>
|
||||
<div class="flow-step-label">Input</div>
|
||||
<div class="flow-step-text">User<br>Input</div>
|
||||
</div>
|
||||
<div class="flow-step">
|
||||
<div class="flow-dot"></div>
|
||||
<div class="flow-step-label">Route</div>
|
||||
<div class="flow-step-text">Workspace<br>Detection</div>
|
||||
</div>
|
||||
<div class="flow-step">
|
||||
<div class="flow-dot active"></div>
|
||||
<div class="flow-step-label">Load</div>
|
||||
<div class="flow-step-text">Relevant<br>Memory</div>
|
||||
</div>
|
||||
<div class="flow-step">
|
||||
<div class="flow-dot"></div>
|
||||
<div class="flow-step-label">Execute</div>
|
||||
<div class="flow-step-text">Task<br>Processing</div>
|
||||
</div>
|
||||
<div class="flow-step">
|
||||
<div class="flow-dot"></div>
|
||||
<div class="flow-step-label">Update</div>
|
||||
<div class="flow-step-text">Memory<br>Write-back</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Quote -->
|
||||
<div class="quote-section">
|
||||
<div class="quote-line"></div>
|
||||
<div class="quote-text">
|
||||
Like <em>Marie Kondo</em> for AI memory<br>
|
||||
— keep only what sparks joy.
|
||||
</div>
|
||||
<div class="results-row">
|
||||
<div class="result-item">
|
||||
<div class="result-icon"></div>
|
||||
<span class="result-text">Faster context loading</span>
|
||||
</div>
|
||||
<div class="result-item">
|
||||
<div class="result-icon"></div>
|
||||
<span class="result-text">More relevant responses</span>
|
||||
</div>
|
||||
<div class="result-item">
|
||||
<div class="result-icon"></div>
|
||||
<span class="result-text">Zero information loss</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Footer -->
|
||||
<div class="footer">
|
||||
<span class="footer-text">Build Studio Style</span>
|
||||
<span class="footer-text">2026</span>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 106 KiB |
@@ -0,0 +1,600 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=1080">
|
||||
<title>AI Memory System Optimization — Pentagram Style</title>
|
||||
<style>
|
||||
* { margin: 0; padding: 0; box-sizing: border-box; }
|
||||
body {
|
||||
width: 1080px;
|
||||
height: 1920px;
|
||||
overflow: hidden;
|
||||
margin: 0;
|
||||
background: #FFFFFF;
|
||||
font-family: 'Helvetica Neue', Arial, sans-serif;
|
||||
color: #111;
|
||||
}
|
||||
|
||||
.container {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
padding: 64px 72px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
/* Header */
|
||||
.header {
|
||||
border-bottom: 6px solid #111;
|
||||
padding-bottom: 24px;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.header-label {
|
||||
font-size: 11px;
|
||||
font-weight: 700;
|
||||
letter-spacing: 4px;
|
||||
text-transform: uppercase;
|
||||
color: #E63946;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.header-title {
|
||||
font-size: 44px;
|
||||
font-weight: 900;
|
||||
line-height: 1.1;
|
||||
letter-spacing: -1px;
|
||||
color: #111;
|
||||
}
|
||||
|
||||
.header-subtitle {
|
||||
font-size: 15px;
|
||||
font-weight: 400;
|
||||
color: #999;
|
||||
margin-top: 8px;
|
||||
}
|
||||
|
||||
/* Hero Numbers Section */
|
||||
.hero-section {
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
justify-content: center;
|
||||
padding: 48px 0 20px 0;
|
||||
border-bottom: 2px solid #111;
|
||||
gap: 0;
|
||||
}
|
||||
|
||||
.hero-num {
|
||||
font-weight: 900;
|
||||
font-size: 200px;
|
||||
line-height: 0.85;
|
||||
letter-spacing: -8px;
|
||||
color: #111;
|
||||
}
|
||||
|
||||
.hero-unit {
|
||||
font-size: 36px;
|
||||
font-weight: 500;
|
||||
color: #111;
|
||||
margin-left: 4px;
|
||||
align-self: flex-end;
|
||||
margin-bottom: 18px;
|
||||
}
|
||||
|
||||
.hero-arrow-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
margin: 0 28px;
|
||||
align-self: center;
|
||||
}
|
||||
|
||||
.hero-arrow-label {
|
||||
font-size: 12px;
|
||||
font-weight: 700;
|
||||
letter-spacing: 3px;
|
||||
text-transform: uppercase;
|
||||
color: #E63946;
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
|
||||
.hero-num-accent {
|
||||
font-weight: 900;
|
||||
font-size: 200px;
|
||||
line-height: 0.85;
|
||||
letter-spacing: -8px;
|
||||
color: #E63946;
|
||||
}
|
||||
|
||||
.hero-meta {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
padding: 14px 0;
|
||||
border-bottom: 6px solid #111;
|
||||
}
|
||||
|
||||
.hero-meta-item {
|
||||
font-size: 12px;
|
||||
font-weight: 500;
|
||||
color: #999;
|
||||
letter-spacing: 1px;
|
||||
}
|
||||
|
||||
.hero-meta-item strong {
|
||||
color: #111;
|
||||
font-weight: 900;
|
||||
}
|
||||
|
||||
/* Sections */
|
||||
.section {
|
||||
padding: 32px 0 0 0;
|
||||
}
|
||||
|
||||
.section-header {
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
gap: 16px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.section-num {
|
||||
font-size: 48px;
|
||||
font-weight: 900;
|
||||
color: #E63946;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.section-title {
|
||||
font-size: 22px;
|
||||
font-weight: 700;
|
||||
letter-spacing: -0.5px;
|
||||
color: #111;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.section-divider {
|
||||
width: 100%;
|
||||
height: 2px;
|
||||
background: #111;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
/* Data Bars */
|
||||
.data-bars {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 14px;
|
||||
}
|
||||
|
||||
.data-bar-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.data-bar-label {
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
color: #666;
|
||||
width: 100px;
|
||||
text-align: right;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.data-bar-track {
|
||||
flex: 1;
|
||||
height: 32px;
|
||||
background: #F0F0F0;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.data-bar-fill {
|
||||
height: 100%;
|
||||
background: #111;
|
||||
}
|
||||
|
||||
.data-bar-fill.accent {
|
||||
background: #E63946;
|
||||
}
|
||||
|
||||
.data-bar-value {
|
||||
font-size: 14px;
|
||||
font-weight: 900;
|
||||
color: #111;
|
||||
width: 60px;
|
||||
text-align: left;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
/* Category Grid */
|
||||
.category-grid {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 2px;
|
||||
background: #111;
|
||||
border: 2px solid #111;
|
||||
}
|
||||
|
||||
.category-cell {
|
||||
background: #fff;
|
||||
padding: 24px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
.category-num {
|
||||
font-size: 11px;
|
||||
font-weight: 700;
|
||||
color: #999;
|
||||
letter-spacing: 2px;
|
||||
}
|
||||
|
||||
.category-name-zh {
|
||||
font-size: 22px;
|
||||
font-weight: 900;
|
||||
color: #111;
|
||||
line-height: 1.2;
|
||||
}
|
||||
|
||||
.category-name-en {
|
||||
font-size: 11px;
|
||||
font-weight: 500;
|
||||
color: #999;
|
||||
letter-spacing: 1px;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.category-desc {
|
||||
font-size: 12px;
|
||||
font-weight: 400;
|
||||
color: #666;
|
||||
line-height: 1.5;
|
||||
margin-top: 4px;
|
||||
}
|
||||
|
||||
.category-cell.accent {
|
||||
background: #E63946;
|
||||
}
|
||||
|
||||
.category-cell.accent .category-num,
|
||||
.category-cell.accent .category-name-zh,
|
||||
.category-cell.accent .category-name-en,
|
||||
.category-cell.accent .category-desc {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
/* Section 03: Design Principles */
|
||||
.principles {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0;
|
||||
}
|
||||
|
||||
.principle-row {
|
||||
display: flex;
|
||||
align-items: stretch;
|
||||
border-bottom: 1px solid #E8E8E8;
|
||||
}
|
||||
|
||||
.principle-row:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.principle-num {
|
||||
font-size: 32px;
|
||||
font-weight: 900;
|
||||
color: #E63946;
|
||||
width: 64px;
|
||||
flex-shrink: 0;
|
||||
padding: 16px 0;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.principle-content {
|
||||
padding: 16px 0 16px 16px;
|
||||
border-left: 1px solid #E8E8E8;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.principle-name {
|
||||
font-size: 16px;
|
||||
font-weight: 900;
|
||||
color: #111;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.principle-desc {
|
||||
font-size: 13px;
|
||||
font-weight: 400;
|
||||
color: #888;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
/* Section 04: Results */
|
||||
.results-grid {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr 1fr;
|
||||
gap: 0;
|
||||
}
|
||||
|
||||
.result-card {
|
||||
padding: 32px 24px;
|
||||
border-right: 1px solid #E8E8E8;
|
||||
}
|
||||
|
||||
.result-card:last-child {
|
||||
border-right: none;
|
||||
}
|
||||
|
||||
.result-number {
|
||||
font-size: 64px;
|
||||
font-weight: 900;
|
||||
color: #E63946;
|
||||
line-height: 1;
|
||||
letter-spacing: -3px;
|
||||
}
|
||||
|
||||
.result-label {
|
||||
font-size: 11px;
|
||||
font-weight: 700;
|
||||
letter-spacing: 2px;
|
||||
text-transform: uppercase;
|
||||
color: #999;
|
||||
margin-top: 8px;
|
||||
}
|
||||
|
||||
/* Insight Quote */
|
||||
.insight-section {
|
||||
margin-top: auto;
|
||||
border-top: 6px solid #111;
|
||||
padding-top: 24px;
|
||||
}
|
||||
|
||||
.insight-quote {
|
||||
font-size: 24px;
|
||||
font-weight: 500;
|
||||
color: #111;
|
||||
line-height: 1.4;
|
||||
letter-spacing: -0.5px;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.insight-quote .highlight {
|
||||
color: #E63946;
|
||||
font-weight: 900;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
.insight-result {
|
||||
display: flex;
|
||||
gap: 40px;
|
||||
margin-top: 18px;
|
||||
padding-top: 14px;
|
||||
border-top: 1px solid #DDD;
|
||||
}
|
||||
|
||||
.insight-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.insight-dot {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
background: #E63946;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.insight-text {
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
/* Footer */
|
||||
.footer {
|
||||
margin-top: 20px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding-top: 12px;
|
||||
border-top: 1px solid #DDD;
|
||||
}
|
||||
|
||||
.footer-text {
|
||||
font-size: 10px;
|
||||
font-weight: 500;
|
||||
color: #CCC;
|
||||
letter-spacing: 2px;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="container">
|
||||
|
||||
<!-- Header -->
|
||||
<div class="header">
|
||||
<div class="header-label">Case Study / System Design</div>
|
||||
<div class="header-title">AI记忆系统：CLAUDE.md<br>从臃肿到优雅的重构之路</div>
|
||||
<div class="header-subtitle">A systematic approach to AI memory architecture optimization</div>
|
||||
</div>
|
||||
|
||||
<!-- Hero Numbers -->
|
||||
<div class="hero-section">
|
||||
<span class="hero-num">93</span>
|
||||
<span class="hero-unit">KB</span>
|
||||
<div class="hero-arrow-container">
|
||||
<span class="hero-arrow-label">reduced to</span>
|
||||
<svg width="64" height="24" viewBox="0 0 64 24">
|
||||
<line x1="0" y1="12" x2="52" y2="12" stroke="#E63946" stroke-width="3"/>
|
||||
<polygon points="52,4 64,12 52,20" fill="#E63946"/>
|
||||
</svg>
|
||||
</div>
|
||||
<span class="hero-num-accent">22</span>
|
||||
<span class="hero-unit" style="color:#E63946">KB</span>
|
||||
</div>
|
||||
<div class="hero-meta">
|
||||
<div class="hero-meta-item"><strong>76%</strong> reduction</div>
|
||||
<div class="hero-meta-item"><strong>2400+</strong> lines before</div>
|
||||
<div class="hero-meta-item"><strong>1</strong> file to <strong>structured</strong> system</div>
|
||||
<div class="hero-meta-item"><strong>0</strong> information loss</div>
|
||||
</div>
|
||||
|
||||
<!-- Section 01: Before vs After -->
|
||||
<div class="section">
|
||||
<div class="section-header">
|
||||
<span class="section-num">01</span>
|
||||
<span class="section-title">Before vs After</span>
|
||||
</div>
|
||||
<div class="section-divider"></div>
|
||||
<div class="data-bars">
|
||||
<div class="data-bar-row">
|
||||
<span class="data-bar-label">Before</span>
|
||||
<div class="data-bar-track">
|
||||
<div class="data-bar-fill" style="width: 100%;"></div>
|
||||
</div>
|
||||
<span class="data-bar-value">93 KB</span>
|
||||
</div>
|
||||
<div class="data-bar-row">
|
||||
<span class="data-bar-label">After</span>
|
||||
<div class="data-bar-track">
|
||||
<div class="data-bar-fill accent" style="width: 23.7%;"></div>
|
||||
</div>
|
||||
<span class="data-bar-value">22 KB</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Section 02: Memory Architecture -->
|
||||
<div class="section">
|
||||
<div class="section-header">
|
||||
<span class="section-num">02</span>
|
||||
<span class="section-title">Memory Architecture</span>
|
||||
</div>
|
||||
<div class="section-divider"></div>
|
||||
<div class="category-grid">
|
||||
<div class="category-cell accent">
|
||||
<span class="category-num">I</span>
|
||||
<span class="category-name-zh">核心身份</span>
|
||||
<span class="category-name-en">Core Identity</span>
|
||||
<span class="category-desc">Who you are, fundamental traits, immutable facts</span>
|
||||
</div>
|
||||
<div class="category-cell">
|
||||
<span class="category-num">II</span>
|
||||
<span class="category-name-zh">偏好设置</span>
|
||||
<span class="category-name-en">Preferences</span>
|
||||
<span class="category-desc">Style, tools, workflow habits, accumulated over time</span>
|
||||
</div>
|
||||
<div class="category-cell">
|
||||
<span class="category-num">III</span>
|
||||
<span class="category-name-zh">项目状态</span>
|
||||
<span class="category-name-en">Project State</span>
|
||||
<span class="category-desc">Current tasks, deadlines, priorities, progress tracking</span>
|
||||
</div>
|
||||
<div class="category-cell">
|
||||
<span class="category-num">IV</span>
|
||||
<span class="category-name-zh">日志流水</span>
|
||||
<span class="category-name-en">Daily Logs</span>
|
||||
<span class="category-desc">Session-level records, searchable history, never auto-loaded</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Section 03: Design Principles -->
|
||||
<div class="section">
|
||||
<div class="section-header">
|
||||
<span class="section-num">03</span>
|
||||
<span class="section-title">Design Principles</span>
|
||||
</div>
|
||||
<div class="section-divider"></div>
|
||||
<div class="principles">
|
||||
<div class="principle-row">
|
||||
<div class="principle-num">A</div>
|
||||
<div class="principle-content">
|
||||
<div class="principle-name">Route, Don't Dump</div>
|
||||
<div class="principle-desc">Router file dispatches to workspace-specific rules. Never load everything at once.</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="principle-row">
|
||||
<div class="principle-num">B</div>
|
||||
<div class="principle-content">
|
||||
<div class="principle-name">Structured Hierarchy</div>
|
||||
<div class="principle-desc">Identity > Preferences > Projects > Logs. Each layer loads on demand.</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="principle-row">
|
||||
<div class="principle-num">C</div>
|
||||
<div class="principle-content">
|
||||
<div class="principle-name">Write Rules, Not Records</div>
|
||||
<div class="principle-desc">Store reusable patterns, not one-time instructions. Keep memory under 100 lines.</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="principle-row">
|
||||
<div class="principle-num">D</div>
|
||||
<div class="principle-content">
|
||||
<div class="principle-name">Silent Operations</div>
|
||||
<div class="principle-desc">Memory read/write happens silently. Never interrupt the user's task flow.</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Section 04: Results -->
|
||||
<div class="section">
|
||||
<div class="section-header">
|
||||
<span class="section-num">04</span>
|
||||
<span class="section-title">Results</span>
|
||||
</div>
|
||||
<div class="section-divider"></div>
|
||||
<div class="results-grid">
|
||||
<div class="result-card">
|
||||
<div class="result-number">76%</div>
|
||||
<div class="result-label">Size Reduction</div>
|
||||
</div>
|
||||
<div class="result-card">
|
||||
<div class="result-number">2.3x</div>
|
||||
<div class="result-label">Faster Loading</div>
|
||||
</div>
|
||||
<div class="result-card">
|
||||
<div class="result-number">0</div>
|
||||
<div class="result-label">Data Loss</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Insight -->
|
||||
<div class="insight-section">
|
||||
<div class="insight-quote">
|
||||
"Like <span class="highlight">Marie Kondo</span> for AI memory
|
||||
— keep only what sparks joy."
|
||||
</div>
|
||||
<div class="insight-result">
|
||||
<div class="insight-item">
|
||||
<div class="insight-dot"></div>
|
||||
<span class="insight-text">Faster context loading</span>
|
||||
</div>
|
||||
<div class="insight-item">
|
||||
<div class="insight-dot"></div>
|
||||
<span class="insight-text">More relevant responses</span>
|
||||
</div>
|
||||
<div class="insight-item">
|
||||
<div class="insight-dot"></div>
|
||||
<span class="insight-text">Zero information loss</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Footer -->
|
||||
<div class="footer">
|
||||
<span class="footer-text">Pentagram Style</span>
|
||||
<span class="footer-text">CLAUDE.md Optimization</span>
|
||||
<span class="footer-text">2026</span>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 155 KiB |
@@ -0,0 +1,670 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=1080">
|
||||
<title>AI Memory System Optimization — Takram Style</title>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600&family=Noto+Serif+SC:wght@300;400;500;600;700&display=swap" rel="stylesheet">
|
||||
<style>
|
||||
* { margin: 0; padding: 0; box-sizing: border-box; }
|
||||
body {
|
||||
width: 1080px;
|
||||
height: 1920px;
|
||||
overflow: hidden;
|
||||
margin: 0;
|
||||
background: #F5F0EB;
|
||||
font-family: 'Inter', sans-serif;
|
||||
color: #3D3730;
|
||||
}
|
||||
|
||||
.container {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
padding: 72px 80px 60px 80px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
/* Background texture */
|
||||
.bg-circle {
|
||||
position: absolute;
|
||||
border-radius: 50%;
|
||||
border: 1px solid rgba(168, 181, 160, 0.2);
|
||||
pointer-events: none;
|
||||
}
|
||||
.bg-circle-1 {
|
||||
width: 600px;
|
||||
height: 600px;
|
||||
top: -180px;
|
||||
right: -200px;
|
||||
}
|
||||
.bg-circle-2 {
|
||||
width: 400px;
|
||||
height: 400px;
|
||||
bottom: 200px;
|
||||
left: -160px;
|
||||
}
|
||||
|
||||
/* Header */
|
||||
.header {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
margin-bottom: 40px;
|
||||
}
|
||||
.header-label {
|
||||
font-family: 'Inter', sans-serif;
|
||||
font-size: 10px;
|
||||
font-weight: 500;
|
||||
letter-spacing: 3.5px;
|
||||
text-transform: uppercase;
|
||||
color: #6B8F71;
|
||||
margin-bottom: 20px;
|
||||
opacity: 0.8;
|
||||
}
|
||||
.header-title {
|
||||
font-family: 'Noto Serif SC', serif;
|
||||
font-size: 44px;
|
||||
font-weight: 500;
|
||||
line-height: 1.35;
|
||||
color: #2D3436;
|
||||
letter-spacing: 1px;
|
||||
}
|
||||
.header-subtitle {
|
||||
font-family: 'Inter', sans-serif;
|
||||
font-size: 15px;
|
||||
font-weight: 300;
|
||||
color: #8B7355;
|
||||
margin-top: 12px;
|
||||
line-height: 1.5;
|
||||
letter-spacing: 0.3px;
|
||||
}
|
||||
|
||||
/* Hero Data Circles */
|
||||
.hero-section {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 48px;
|
||||
padding: 36px 0;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
.data-circle {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
position: relative;
|
||||
}
|
||||
.data-circle-ring {
|
||||
position: relative;
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
.data-circle-ring svg {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
transform: rotate(-90deg);
|
||||
}
|
||||
.data-circle-inner {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
z-index: 1;
|
||||
}
|
||||
.data-num {
|
||||
font-family: 'Inter', sans-serif;
|
||||
font-size: 64px;
|
||||
font-weight: 300;
|
||||
color: #2E2A24;
|
||||
line-height: 1;
|
||||
}
|
||||
.data-unit {
|
||||
font-family: 'Inter', sans-serif;
|
||||
font-size: 16px;
|
||||
font-weight: 400;
|
||||
color: #8B7355;
|
||||
margin-top: 4px;
|
||||
}
|
||||
.data-label {
|
||||
font-family: 'Inter', sans-serif;
|
||||
font-size: 12px;
|
||||
font-weight: 400;
|
||||
color: #A8A098;
|
||||
margin-top: 12px;
|
||||
letter-spacing: 2px;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
.data-circle-small .data-circle-ring {
|
||||
width: 160px;
|
||||
height: 160px;
|
||||
}
|
||||
.data-circle-small .data-num {
|
||||
font-size: 52px;
|
||||
}
|
||||
|
||||
/* Organic connector */
|
||||
.hero-connector {
|
||||
position: relative;
|
||||
width: 120px;
|
||||
height: 60px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
/* Reduction badge — understated Takram style */
|
||||
.reduction-pill {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 8px 28px;
|
||||
background: transparent;
|
||||
border: 1px solid rgba(107, 143, 113, 0.3);
|
||||
border-radius: 20px;
|
||||
margin: 0 auto;
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
}
|
||||
.reduction-text {
|
||||
font-family: 'Inter', sans-serif;
|
||||
font-size: 13px;
|
||||
font-weight: 500;
|
||||
color: #6B8F71;
|
||||
letter-spacing: 2px;
|
||||
}
|
||||
|
||||
.hero-footer {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
margin-top: 16px;
|
||||
}
|
||||
|
||||
/* Categories Section */
|
||||
.categories-section {
|
||||
margin-top: 36px;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
.section-label {
|
||||
font-family: 'Noto Serif SC', serif;
|
||||
font-size: 20px;
|
||||
font-weight: 500;
|
||||
color: #2D3436;
|
||||
margin-bottom: 24px;
|
||||
letter-spacing: 1px;
|
||||
}
|
||||
.section-label .section-num {
|
||||
font-family: 'Inter', sans-serif;
|
||||
font-size: 9px;
|
||||
font-weight: 400;
|
||||
color: #B0AAA0;
|
||||
letter-spacing: 1px;
|
||||
margin-right: 12px;
|
||||
}
|
||||
.categories-grid {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 16px;
|
||||
}
|
||||
.cat-card {
|
||||
background: rgba(255, 255, 255, 0.6);
|
||||
backdrop-filter: blur(10px);
|
||||
border-radius: 16px;
|
||||
padding: 28px 24px;
|
||||
position: relative;
|
||||
box-shadow: 0 2px 12px rgba(0,0,0,0.03);
|
||||
border: 1px solid rgba(232, 228, 220, 0.8);
|
||||
}
|
||||
.cat-card-icon {
|
||||
margin-bottom: 14px;
|
||||
}
|
||||
.cat-card-title-zh {
|
||||
font-family: 'Noto Serif SC', serif;
|
||||
font-size: 20px;
|
||||
font-weight: 600;
|
||||
color: #2E2A24;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
.cat-card-title-en {
|
||||
font-family: 'Inter', sans-serif;
|
||||
font-size: 11px;
|
||||
font-weight: 400;
|
||||
color: #A8A098;
|
||||
letter-spacing: 2px;
|
||||
text-transform: uppercase;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.cat-card-desc {
|
||||
font-family: 'Inter', sans-serif;
|
||||
font-size: 12px;
|
||||
font-weight: 300;
|
||||
color: #8B7355;
|
||||
line-height: 1.7;
|
||||
}
|
||||
.cat-card.highlight {
|
||||
border-color: rgba(107, 143, 113, 0.35);
|
||||
background: rgba(107, 143, 113, 0.04);
|
||||
}
|
||||
|
||||
/* Proportion circles */
|
||||
.cat-prop {
|
||||
position: absolute;
|
||||
top: 20px;
|
||||
right: 20px;
|
||||
}
|
||||
|
||||
/* Flow Diagram */
|
||||
.flow-section {
|
||||
margin-top: 36px;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.flow-diagram {
|
||||
position: relative;
|
||||
height: 260px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.flow-node {
|
||||
position: absolute;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
.flow-node-circle {
|
||||
width: 72px;
|
||||
height: 72px;
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: rgba(255,255,255,0.5);
|
||||
border: 1px solid #DDD9D2;
|
||||
}
|
||||
.flow-node-circle.active {
|
||||
border-color: #6B8F71;
|
||||
border-width: 1.5px;
|
||||
background: rgba(107, 143, 113, 0.06);
|
||||
}
|
||||
.flow-node-label {
|
||||
font-family: 'Inter', sans-serif;
|
||||
font-size: 11px;
|
||||
font-weight: 400;
|
||||
color: #A8A098;
|
||||
letter-spacing: 2px;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
.flow-node-text {
|
||||
font-family: 'Noto Serif SC', serif;
|
||||
font-size: 13px;
|
||||
font-weight: 500;
|
||||
color: #2E2A24;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
/* Insight */
|
||||
.insight-section {
|
||||
margin-top: auto;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
.insight-card {
|
||||
background: rgba(255, 255, 255, 0.5);
|
||||
border-radius: 16px;
|
||||
padding: 32px 36px;
|
||||
border: 1px solid rgba(232, 228, 220, 0.6);
|
||||
box-shadow: 0 4px 20px rgba(0,0,0,0.03);
|
||||
}
|
||||
.insight-quote {
|
||||
font-family: 'Noto Serif SC', serif;
|
||||
font-size: 20px;
|
||||
font-weight: 400;
|
||||
color: #2E2A24;
|
||||
line-height: 1.7;
|
||||
letter-spacing: 0.5px;
|
||||
}
|
||||
.insight-quote .green {
|
||||
color: #6B8F71;
|
||||
font-weight: 500;
|
||||
}
|
||||
.insight-quote .brown {
|
||||
color: #8B7355;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.results-row {
|
||||
display: flex;
|
||||
gap: 32px;
|
||||
margin-top: 24px;
|
||||
padding-top: 20px;
|
||||
border-top: 1px solid rgba(232, 228, 220, 0.6);
|
||||
}
|
||||
.result-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
}
|
||||
.result-leaf {
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.result-text {
|
||||
font-family: 'Inter', sans-serif;
|
||||
font-size: 13px;
|
||||
font-weight: 400;
|
||||
color: #8B7355;
|
||||
}
|
||||
|
||||
/* Footer */
|
||||
.footer {
|
||||
margin-top: 28px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
.footer-text {
|
||||
font-family: 'Inter', sans-serif;
|
||||
font-size: 10px;
|
||||
font-weight: 300;
|
||||
color: #C4BDB4;
|
||||
letter-spacing: 3px;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="container">
|
||||
|
||||
<!-- Background decorations -->
|
||||
<div class="bg-circle bg-circle-1"></div>
|
||||
<div class="bg-circle bg-circle-2"></div>
|
||||
|
||||
<!-- Header -->
|
||||
<div class="header">
|
||||
<div class="header-label">Speculative Design / Memory Architecture</div>
|
||||
<div class="header-title">AI记忆系统<br>CLAUDE.md 的断舍离</div>
|
||||
<div class="header-subtitle">Restructuring artificial memory from monolith to modular elegance</div>
|
||||
</div>
|
||||
|
||||
<!-- Hero Data Circles -->
|
||||
<div class="hero-section">
|
||||
<div class="data-circle">
|
||||
<div class="data-circle-ring">
|
||||
<svg width="200" height="200" viewBox="0 0 200 200">
|
||||
<circle cx="100" cy="100" r="92" fill="none" stroke="#E8E4DC" stroke-width="1.5"/>
|
||||
<circle cx="100" cy="100" r="92" fill="none" stroke="#8B7355" stroke-width="2" stroke-dasharray="578" stroke-dashoffset="0" opacity="0.3"/>
|
||||
</svg>
|
||||
<div class="data-circle-inner">
|
||||
<span class="data-num">93</span>
|
||||
<span class="data-unit">KB</span>
|
||||
</div>
|
||||
</div>
|
||||
<span class="data-label">Before</span>
|
||||
</div>
|
||||
|
||||
<div class="hero-connector">
|
||||
<svg width="120" height="60" viewBox="0 0 120 60">
|
||||
<path d="M 0,30 C 30,30 40,10 60,10 C 80,10 90,50 110,30"
|
||||
fill="none" stroke="#6B8F71" stroke-width="1" stroke-dasharray="3,4" opacity="0.5"/>
|
||||
<circle cx="110" cy="30" r="3.5" fill="#6B8F71" opacity="0.5"/>
|
||||
<circle cx="110" cy="30" r="7" fill="none" stroke="#6B8F71" stroke-width="0.5" opacity="0.2"/>
|
||||
<!-- delta annotation -->
|
||||
<text x="60" y="50" text-anchor="middle" font-family="Inter" font-size="7" fill="#B0AAA0" letter-spacing="0.5">-71 KB</text>
|
||||
</svg>
|
||||
</div>
|
||||
|
||||
<div class="data-circle data-circle-small">
|
||||
<div class="data-circle-ring">
|
||||
<svg width="160" height="160" viewBox="0 0 160 160">
|
||||
<circle cx="80" cy="80" r="72" fill="none" stroke="#E8E4DC" stroke-width="1.5"/>
|
||||
<circle cx="80" cy="80" r="72" fill="none" stroke="#A8B5A0" stroke-width="2.5" stroke-dasharray="452" stroke-dashoffset="344" opacity="0.6"/>
|
||||
</svg>
|
||||
<div class="data-circle-inner">
|
||||
<span class="data-num" style="color: #A8B5A0;">22</span>
|
||||
<span class="data-unit">KB</span>
|
||||
</div>
|
||||
</div>
|
||||
<span class="data-label">After</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="hero-footer">
|
||||
<div class="reduction-pill">
|
||||
<svg width="14" height="14" viewBox="0 0 14 14"><path d="M7 2L7 12M3 8L7 12L11 8" fill="none" stroke="#6B8F71" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round"/></svg>
|
||||
<span class="reduction-text">76% REDUCTION</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Categories -->
|
||||
<div class="categories-section">
|
||||
<div class="section-label"><span class="section-num">01</span>Four Pillars of Memory</div>
|
||||
<div class="categories-grid">
|
||||
<div class="cat-card highlight">
|
||||
<div class="cat-card-icon">
|
||||
<svg width="32" height="32" viewBox="0 0 32 32">
|
||||
<circle cx="16" cy="12" r="6" fill="none" stroke="#A8B5A0" stroke-width="1.5"/>
|
||||
<path d="M6,28 C6,22 10,18 16,18 C22,18 26,22 26,28" fill="none" stroke="#A8B5A0" stroke-width="1.5" stroke-linecap="round"/>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="cat-prop">
|
||||
<svg width="28" height="28" viewBox="0 0 28 28">
|
||||
<circle cx="14" cy="14" r="12" fill="none" stroke="#E8E4DC" stroke-width="1"/>
|
||||
<circle cx="14" cy="14" r="12" fill="none" stroke="#A8B5A0" stroke-width="2" stroke-dasharray="75" stroke-dashoffset="56" transform="rotate(-90 14 14)"/>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="cat-card-title-zh">核心身份</div>
|
||||
<div class="cat-card-title-en">Core Identity</div>
|
||||
<div class="cat-card-desc">Immutable facts and fundamental traits that define who you are</div>
|
||||
</div>
|
||||
<div class="cat-card">
|
||||
<div class="cat-card-icon">
|
||||
<svg width="32" height="32" viewBox="0 0 32 32">
|
||||
<path d="M8,8 L24,8 L24,24 L8,24 Z" fill="none" stroke="#8B7355" stroke-width="1.5" rx="2"/>
|
||||
<line x1="12" y1="13" x2="20" y2="13" stroke="#8B7355" stroke-width="1.5" stroke-linecap="round"/>
|
||||
<line x1="12" y1="17" x2="18" y2="17" stroke="#8B7355" stroke-width="1.5" stroke-linecap="round"/>
|
||||
<line x1="12" y1="21" x2="16" y2="21" stroke="#8B7355" stroke-width="1.5" stroke-linecap="round"/>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="cat-prop">
|
||||
<svg width="28" height="28" viewBox="0 0 28 28">
|
||||
<circle cx="14" cy="14" r="12" fill="none" stroke="#E8E4DC" stroke-width="1"/>
|
||||
<circle cx="14" cy="14" r="12" fill="none" stroke="#8B7355" stroke-width="2" stroke-dasharray="75" stroke-dashoffset="45" transform="rotate(-90 14 14)"/>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="cat-card-title-zh">偏好设置</div>
|
||||
<div class="cat-card-title-en">Preferences</div>
|
||||
<div class="cat-card-desc">Style, tools, habits — accumulated over time through sessions</div>
|
||||
</div>
|
||||
<div class="cat-card">
|
||||
<div class="cat-card-icon">
|
||||
<svg width="32" height="32" viewBox="0 0 32 32">
|
||||
<rect x="6" y="10" width="8" height="14" rx="1" fill="none" stroke="#8B7355" stroke-width="1.5"/>
|
||||
<rect x="18" y="6" width="8" height="18" rx="1" fill="none" stroke="#8B7355" stroke-width="1.5"/>
|
||||
<line x1="8" y1="16" x2="12" y2="16" stroke="#8B7355" stroke-width="1" stroke-linecap="round"/>
|
||||
<line x1="20" y1="12" x2="24" y2="12" stroke="#8B7355" stroke-width="1" stroke-linecap="round"/>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="cat-prop">
|
||||
<svg width="28" height="28" viewBox="0 0 28 28">
|
||||
<circle cx="14" cy="14" r="12" fill="none" stroke="#E8E4DC" stroke-width="1"/>
|
||||
<circle cx="14" cy="14" r="12" fill="none" stroke="#8B7355" stroke-width="2" stroke-dasharray="75" stroke-dashoffset="37" transform="rotate(-90 14 14)"/>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="cat-card-title-zh">项目状态</div>
|
||||
<div class="cat-card-title-en">Project State</div>
|
||||
<div class="cat-card-desc">Current tasks, deadlines, priorities — always evolving context</div>
|
||||
</div>
|
||||
<div class="cat-card">
|
||||
<div class="cat-card-icon">
|
||||
<svg width="32" height="32" viewBox="0 0 32 32">
|
||||
<circle cx="16" cy="16" r="10" fill="none" stroke="#8B7355" stroke-width="1.5"/>
|
||||
<line x1="16" y1="10" x2="16" y2="16" stroke="#8B7355" stroke-width="1.5" stroke-linecap="round"/>
|
||||
<line x1="16" y1="16" x2="21" y2="19" stroke="#8B7355" stroke-width="1.5" stroke-linecap="round"/>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="cat-prop">
|
||||
<svg width="28" height="28" viewBox="0 0 28 28">
|
||||
<circle cx="14" cy="14" r="12" fill="none" stroke="#E8E4DC" stroke-width="1"/>
|
||||
<circle cx="14" cy="14" r="12" fill="none" stroke="#8B7355" stroke-width="2" stroke-dasharray="75" stroke-dashoffset="60" transform="rotate(-90 14 14)"/>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="cat-card-title-zh">日志流水</div>
|
||||
<div class="cat-card-title-en">Daily Logs</div>
|
||||
<div class="cat-card-desc">Session records — never auto-loaded, retrieved on demand only</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Flow Diagram -->
|
||||
<div class="flow-section">
|
||||
<div class="section-label"><span class="section-num">02</span>System Flow</div>
|
||||
<div class="flow-diagram">
|
||||
<!-- SVG organic curves connecting nodes — art-piece treatment -->
|
||||
<svg width="920" height="260" viewBox="0 0 920 260" style="position: absolute; top: 0; left: 0;">
|
||||
<!-- Background guide line (very subtle) -->
|
||||
<line x1="50" y1="130" x2="870" y2="130" stroke="#E8E4DC" stroke-width="0.3" stroke-dasharray="2,8" opacity="0.4"/>
|
||||
|
||||
<!-- Curve from Input to Route -->
|
||||
<path d="M 116,50 C 165,50 195,120 246,120" fill="none" stroke="#D4CFC6" stroke-width="1"/>
|
||||
<!-- Curve from Route to Load -->
|
||||
<path d="M 316,120 C 370,120 380,50 460,50" fill="none" stroke="#D4CFC6" stroke-width="1"/>
|
||||
<!-- Curve from Load to Execute (highlighted — key transition) -->
|
||||
<path d="M 530,50 C 585,50 600,160 660,160" fill="none" stroke="#6B8F71" stroke-width="1.5" stroke-dasharray="4,4" opacity="0.6"/>
|
||||
<!-- Curve from Execute to Update -->
|
||||
<path d="M 730,160 C 785,160 800,80 830,80" fill="none" stroke="#D4CFC6" stroke-width="1"/>
|
||||
|
||||
<!-- Connection dots — varying size for depth -->
|
||||
<circle cx="116" cy="50" r="2.5" fill="#D4CFC6"/>
|
||||
<circle cx="246" cy="120" r="2.5" fill="#D4CFC6"/>
|
||||
<circle cx="316" cy="120" r="2.5" fill="#D4CFC6"/>
|
||||
<circle cx="460" cy="50" r="3" fill="#6B8F71" opacity="0.5"/>
|
||||
<circle cx="530" cy="50" r="3" fill="#6B8F71" opacity="0.5"/>
|
||||
<circle cx="660" cy="160" r="2.5" fill="#D4CFC6"/>
|
||||
<circle cx="730" cy="160" r="2.5" fill="#D4CFC6"/>
|
||||
<circle cx="830" cy="80" r="2.5" fill="#D4CFC6"/>
|
||||
|
||||
<!-- Annotation: step numbers along curve -->
|
||||
<text x="170" y="75" font-family="Inter" font-size="7" fill="#C8C2B8" letter-spacing="0.5">step 1</text>
|
||||
<text x="350" y="100" font-family="Inter" font-size="7" fill="#C8C2B8" letter-spacing="0.5">step 2</text>
|
||||
<text x="565" y="95" font-family="Inter" font-size="7" fill="#6B8F71" opacity="0.5" letter-spacing="0.5">step 3</text>
|
||||
<text x="770" y="130" font-family="Inter" font-size="7" fill="#C8C2B8" letter-spacing="0.5">step 4</text>
|
||||
</svg>
|
||||
|
||||
<!-- Node 1: User Input -->
|
||||
<div class="flow-node" style="left: 44px; top: 8px;">
|
||||
<div class="flow-node-circle">
|
||||
<svg width="24" height="24" viewBox="0 0 24 24">
|
||||
<circle cx="12" cy="9" r="4" fill="none" stroke="#8B7355" stroke-width="1.2"/>
|
||||
<path d="M4,21 C4,16 7,14 12,14 C17,14 20,16 20,21" fill="none" stroke="#8B7355" stroke-width="1.2" stroke-linecap="round"/>
|
||||
</svg>
|
||||
</div>
|
||||
<span class="flow-node-label">Input</span>
|
||||
<span class="flow-node-text">User</span>
|
||||
</div>
|
||||
|
||||
<!-- Node 2: Route -->
|
||||
<div class="flow-node" style="left: 210px; top: 78px;">
|
||||
<div class="flow-node-circle">
|
||||
<svg width="24" height="24" viewBox="0 0 24 24">
|
||||
<path d="M4,12 L10,6 L10,10 L20,10 L20,14 L10,14 L10,18 Z" fill="none" stroke="#8B7355" stroke-width="1.2"/>
|
||||
</svg>
|
||||
</div>
|
||||
<span class="flow-node-label">Route</span>
|
||||
<span class="flow-node-text">Workspace</span>
|
||||
</div>
|
||||
|
||||
<!-- Node 3: Load Memory (active) -->
|
||||
<div class="flow-node" style="left: 420px; top: 8px;">
|
||||
<div class="flow-node-circle active">
|
||||
<svg width="24" height="24" viewBox="0 0 24 24">
|
||||
<rect x="4" y="4" width="16" height="16" rx="2" fill="none" stroke="#A8B5A0" stroke-width="1.2"/>
|
||||
<line x1="8" y1="9" x2="16" y2="9" stroke="#A8B5A0" stroke-width="1.2" stroke-linecap="round"/>
|
||||
<line x1="8" y1="13" x2="14" y2="13" stroke="#A8B5A0" stroke-width="1.2" stroke-linecap="round"/>
|
||||
<line x1="8" y1="17" x2="12" y2="17" stroke="#A8B5A0" stroke-width="1.2" stroke-linecap="round"/>
|
||||
</svg>
|
||||
</div>
|
||||
<span class="flow-node-label">Load</span>
|
||||
<span class="flow-node-text">Memory</span>
|
||||
</div>
|
||||
|
||||
<!-- Node 4: Execute -->
|
||||
<div class="flow-node" style="left: 624px; top: 118px;">
|
||||
<div class="flow-node-circle">
|
||||
<svg width="24" height="24" viewBox="0 0 24 24">
|
||||
<polygon points="8,4 20,12 8,20" fill="none" stroke="#8B7355" stroke-width="1.2" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
</div>
|
||||
<span class="flow-node-label">Execute</span>
|
||||
<span class="flow-node-text">Task</span>
|
||||
</div>
|
||||
|
||||
<!-- Node 5: Update -->
|
||||
<div class="flow-node" style="left: 800px; top: 40px;">
|
||||
<div class="flow-node-circle">
|
||||
<svg width="24" height="24" viewBox="0 0 24 24">
|
||||
<path d="M12,4 L12,16" stroke="#8B7355" stroke-width="1.2" stroke-linecap="round"/>
|
||||
<path d="M8,12 L12,16 L16,12" fill="none" stroke="#8B7355" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<line x1="6" y1="20" x2="18" y2="20" stroke="#8B7355" stroke-width="1.2" stroke-linecap="round"/>
|
||||
</svg>
|
||||
</div>
|
||||
<span class="flow-node-label">Update</span>
|
||||
<span class="flow-node-text">Write</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Insight -->
|
||||
<div class="insight-section">
|
||||
<div class="insight-card">
|
||||
<div class="insight-quote">
|
||||
Like <span class="green">Marie Kondo</span> for AI memory —<br>
|
||||
keep only what <span class="brown">sparks joy</span>.
|
||||
</div>
|
||||
<div class="results-row">
|
||||
<div class="result-item">
|
||||
<div class="result-leaf">
|
||||
<svg width="14" height="14" viewBox="0 0 14 14">
|
||||
<path d="M2,12 C2,6 6,2 12,2" fill="none" stroke="#A8B5A0" stroke-width="1.5" stroke-linecap="round"/>
|
||||
<circle cx="12" cy="2" r="2" fill="#A8B5A0" opacity="0.4"/>
|
||||
</svg>
|
||||
</div>
|
||||
<span class="result-text">Faster context loading</span>
|
||||
</div>
|
||||
<div class="result-item">
|
||||
<div class="result-leaf">
|
||||
<svg width="14" height="14" viewBox="0 0 14 14">
|
||||
<path d="M2,12 C2,6 6,2 12,2" fill="none" stroke="#A8B5A0" stroke-width="1.5" stroke-linecap="round"/>
|
||||
<circle cx="12" cy="2" r="2" fill="#A8B5A0" opacity="0.4"/>
|
||||
</svg>
|
||||
</div>
|
||||
<span class="result-text">More relevant responses</span>
|
||||
</div>
|
||||
<div class="result-item">
|
||||
<div class="result-leaf">
|
||||
<svg width="14" height="14" viewBox="0 0 14 14">
|
||||
<path d="M2,12 C2,6 6,2 12,2" fill="none" stroke="#A8B5A0" stroke-width="1.5" stroke-linecap="round"/>
|
||||
<circle cx="12" cy="2" r="2" fill="#A8B5A0" opacity="0.4"/>
|
||||
</svg>
|
||||
</div>
|
||||
<span class="result-text">Zero information loss</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Footer -->
|
||||
<div class="footer">
|
||||
<span class="footer-text">Takram Style</span>
|
||||
<span class="footer-text">CLAUDE.md Optimization</span>
|
||||
<span class="footer-text">2026</span>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 159 KiB |
382
.claude/skills/huashu-design/assets/showcases/ppt/ppt-build.html
Normal file
382
.claude/skills/huashu-design/assets/showcases/ppt/ppt-build.html
Normal file
@@ -0,0 +1,382 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=1920">
|
||||
<title>GLM-4.7 Coding Benchmark - Build Studio Style</title>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@200;300;400;500;600&display=swap" rel="stylesheet">
|
||||
<style>
|
||||
* { margin: 0; padding: 0; box-sizing: border-box; }
|
||||
body {
|
||||
width: 1920px;
|
||||
height: 1080px;
|
||||
overflow: hidden;
|
||||
margin: 0;
|
||||
background: #FAFAF8;
|
||||
font-family: 'Inter', sans-serif;
|
||||
color: #2A2A2A;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.container {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: 64px 96px 48px 96px;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
/* Top section */
|
||||
.top-row {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: flex-start;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.eyebrow {
|
||||
font-size: 10px;
|
||||
font-weight: 400;
|
||||
letter-spacing: 4px;
|
||||
text-transform: uppercase;
|
||||
color: #B0ACA4;
|
||||
}
|
||||
|
||||
.source-note {
|
||||
font-size: 10px;
|
||||
font-weight: 300;
|
||||
color: #C0BCB6;
|
||||
text-align: right;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
/* Title area */
|
||||
.title-area {
|
||||
margin-bottom: 0;
|
||||
padding-bottom: 24px;
|
||||
border-bottom: 1px solid #EEECE8;
|
||||
}
|
||||
|
||||
.main-title {
|
||||
font-size: 40px;
|
||||
font-weight: 200;
|
||||
color: #2A2A2A;
|
||||
letter-spacing: -0.5px;
|
||||
line-height: 1.2;
|
||||
}
|
||||
|
||||
.main-title .accent {
|
||||
font-weight: 400;
|
||||
color: #2A2A2A;
|
||||
}
|
||||
|
||||
.subtitle {
|
||||
font-size: 14px;
|
||||
font-weight: 300;
|
||||
color: #A0A09A;
|
||||
margin-top: 8px;
|
||||
letter-spacing: 0.3px;
|
||||
}
|
||||
|
||||
/* Center: Hero data section */
|
||||
.hero-data {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 0;
|
||||
position: relative;
|
||||
padding-bottom: 32px;
|
||||
border-bottom: 1px solid #EEECE8;
|
||||
}
|
||||
|
||||
/* Three metric cards */
|
||||
.metric-card {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
position: relative;
|
||||
padding: 32px 24px;
|
||||
}
|
||||
|
||||
.metric-card::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 25%;
|
||||
height: 50%;
|
||||
width: 1px;
|
||||
background: linear-gradient(to bottom, transparent, #E0DCD6 50%, transparent);
|
||||
}
|
||||
|
||||
.metric-card:last-child::after {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.metric-value {
|
||||
font-size: 112px;
|
||||
font-weight: 200;
|
||||
color: #2A2A2A;
|
||||
letter-spacing: -4px;
|
||||
line-height: 1;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.metric-value .dot {
|
||||
color: #D4A574;
|
||||
font-weight: 300;
|
||||
}
|
||||
|
||||
.metric-unit {
|
||||
font-size: 28px;
|
||||
font-weight: 200;
|
||||
color: #D4A574;
|
||||
vertical-align: super;
|
||||
margin-left: 2px;
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
.metric-name {
|
||||
font-size: 12px;
|
||||
font-weight: 500;
|
||||
letter-spacing: 2px;
|
||||
text-transform: uppercase;
|
||||
color: #888888;
|
||||
margin-top: 16px;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.metric-category {
|
||||
font-size: 11px;
|
||||
font-weight: 300;
|
||||
color: #B8B4AE;
|
||||
letter-spacing: 0.5px;
|
||||
}
|
||||
|
||||
/* Comparison bars below each metric */
|
||||
.comparison-group {
|
||||
margin-top: 24px;
|
||||
width: 280px;
|
||||
}
|
||||
|
||||
.comp-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 8px;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.comp-label {
|
||||
font-size: 11px;
|
||||
font-weight: 400;
|
||||
color: #A8A4A0;
|
||||
width: 72px;
|
||||
text-align: right;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.comp-track {
|
||||
flex: 1;
|
||||
height: 2px;
|
||||
background: #EEECEA;
|
||||
border-radius: 1px;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.comp-fill {
|
||||
height: 100%;
|
||||
border-radius: 1px;
|
||||
background: #D8D5D0;
|
||||
}
|
||||
|
||||
.comp-fill.gold {
|
||||
background: #D4A574;
|
||||
height: 3px;
|
||||
margin-top: -0.5px;
|
||||
}
|
||||
|
||||
.comp-val {
|
||||
font-size: 11px;
|
||||
font-weight: 500;
|
||||
color: #999999;
|
||||
width: 40px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.comp-val.gold {
|
||||
color: #D4A574;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
/* Bottom section */
|
||||
.bottom-section {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: flex-end;
|
||||
padding-top: 24px;
|
||||
}
|
||||
|
||||
.insight-text {
|
||||
font-size: 13px;
|
||||
font-weight: 300;
|
||||
color: #999;
|
||||
line-height: 1.8;
|
||||
max-width: 560px;
|
||||
}
|
||||
|
||||
.insight-text strong {
|
||||
font-weight: 500;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.brand-mark {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.brand-line {
|
||||
width: 32px;
|
||||
height: 1px;
|
||||
background: #D4A574;
|
||||
opacity: 0.6;
|
||||
}
|
||||
|
||||
.brand-text {
|
||||
font-size: 10px;
|
||||
font-weight: 400;
|
||||
letter-spacing: 3px;
|
||||
color: #C8C4BC;
|
||||
}
|
||||
|
||||
/* Slide indicator — functional PPT element */
|
||||
.slide-indicator {
|
||||
position: absolute;
|
||||
top: 64px;
|
||||
right: 96px;
|
||||
display: flex;
|
||||
gap: 6px;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.slide-dot {
|
||||
width: 4px;
|
||||
height: 4px;
|
||||
border-radius: 50%;
|
||||
background: #E0DCD6;
|
||||
}
|
||||
|
||||
.slide-dot.active {
|
||||
background: #D4A574;
|
||||
width: 16px;
|
||||
border-radius: 2px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="container">
|
||||
<!-- Top row -->
|
||||
<div class="top-row">
|
||||
<div class="eyebrow">GLM-4.7 Open-Source Model</div>
|
||||
<div class="source-note">Benchmark Evaluation 2025<br>Official Results</div>
|
||||
</div>
|
||||
|
||||
<!-- Title -->
|
||||
<div class="title-area">
|
||||
<div class="main-title">Coding Capability <span style="font-weight:400;">Breakthrough</span><span style="color:#D4A574; font-weight:300; font-size:48px;">.</span></div>
|
||||
<div class="subtitle">First open-source model to achieve state-of-the-art across all major coding benchmarks</div>
|
||||
</div>
|
||||
|
||||
<!-- Hero data -->
|
||||
<div class="hero-data">
|
||||
<!-- AIME 2025 -->
|
||||
<div class="metric-card">
|
||||
<div class="metric-value">95<span class="dot">.</span>7</div>
|
||||
<div class="metric-name">AIME 2025</div>
|
||||
<div class="metric-category">Mathematical Reasoning</div>
|
||||
<div class="comparison-group">
|
||||
<div class="comp-row">
|
||||
<span class="comp-label">GLM-4.7</span>
|
||||
<div class="comp-track"><div class="comp-fill gold" style="width: 100%;"></div></div>
|
||||
<span class="comp-val gold">95.7</span>
|
||||
</div>
|
||||
<div class="comp-row">
|
||||
<span class="comp-label">Claude 3.5</span>
|
||||
<div class="comp-track"><div class="comp-fill" style="width: 92.2%;"></div></div>
|
||||
<span class="comp-val">88.2</span>
|
||||
</div>
|
||||
<div class="comp-row">
|
||||
<span class="comp-label">GPT-4o</span>
|
||||
<div class="comp-track"><div class="comp-fill" style="width: 87.4%;"></div></div>
|
||||
<span class="comp-val">83.6</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- SWE-bench Verified -->
|
||||
<div class="metric-card">
|
||||
<div class="metric-value">73<span class="dot">.</span>8<span class="metric-unit">%</span></div>
|
||||
<div class="metric-name">SWE-bench Verified</div>
|
||||
<div class="metric-category">Software Engineering</div>
|
||||
<div class="comparison-group">
|
||||
<div class="comp-row">
|
||||
<span class="comp-label">GLM-4.7</span>
|
||||
<div class="comp-track"><div class="comp-fill gold" style="width: 100%;"></div></div>
|
||||
<span class="comp-val gold">73.8%</span>
|
||||
</div>
|
||||
<div class="comp-row">
|
||||
<span class="comp-label">Claude 3.5</span>
|
||||
<div class="comp-track"><div class="comp-fill" style="width: 72.2%;"></div></div>
|
||||
<span class="comp-val">53.3%</span>
|
||||
</div>
|
||||
<div class="comp-row">
|
||||
<span class="comp-label">GPT-4o</span>
|
||||
<div class="comp-track"><div class="comp-fill" style="width: 65.3%;"></div></div>
|
||||
<span class="comp-val">48.2%</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Tau-bench -->
|
||||
<div class="metric-card">
|
||||
<div class="metric-value">87<span class="dot">.</span>4</div>
|
||||
<div class="metric-name">τ²-Bench</div>
|
||||
<div class="metric-category">Agent Task Completion</div>
|
||||
<div class="comparison-group">
|
||||
<div class="comp-row">
|
||||
<span class="comp-label">GLM-4.7</span>
|
||||
<div class="comp-track"><div class="comp-fill gold" style="width: 100%;"></div></div>
|
||||
<span class="comp-val gold">87.4</span>
|
||||
</div>
|
||||
<div class="comp-row">
|
||||
<span class="comp-label">Claude 3.5</span>
|
||||
<div class="comp-track"><div class="comp-fill" style="width: 90.3%;"></div></div>
|
||||
<span class="comp-val">78.9</span>
|
||||
</div>
|
||||
<div class="comp-row">
|
||||
<span class="comp-label">GPT-4o</span>
|
||||
<div class="comp-track"><div class="comp-fill" style="width: 81.8%;"></div></div>
|
||||
<span class="comp-val">71.5</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Bottom -->
|
||||
<div class="bottom-section">
|
||||
<div class="insight-text">
|
||||
GLM-4.7 demonstrates that <strong>open-source models can compete at the frontier</strong> of coding intelligence,
|
||||
outperforming leading proprietary models with margins of <strong>+7.5 to +20.5 points</strong> across benchmarks.
|
||||
</div>
|
||||
<div class="brand-mark">
|
||||
<div class="brand-line"></div>
|
||||
<span class="brand-text">ZHIPU AI</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
BIN
.claude/skills/huashu-design/assets/showcases/ppt/ppt-build.png
Normal file
BIN
.claude/skills/huashu-design/assets/showcases/ppt/ppt-build.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 82 KiB |
@@ -0,0 +1,536 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=1920">
|
||||
<title>GLM-4.7 Coding Benchmark - Pentagram Style</title>
|
||||
<style>
|
||||
* { margin: 0; padding: 0; box-sizing: border-box; }
|
||||
body {
|
||||
width: 1920px;
|
||||
height: 1080px;
|
||||
overflow: hidden;
|
||||
margin: 0;
|
||||
background: #FFFFFF;
|
||||
font-family: 'Helvetica Neue', Arial, sans-serif;
|
||||
color: #111;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
/* Top black bar */
|
||||
.top-bar {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: 64px;
|
||||
background: #111;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 0 80px;
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
.top-label {
|
||||
font-size: 12px;
|
||||
font-weight: 700;
|
||||
letter-spacing: 3px;
|
||||
text-transform: uppercase;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.top-label .red { color: #E63946; }
|
||||
|
||||
.top-right {
|
||||
font-size: 11px;
|
||||
font-weight: 700;
|
||||
letter-spacing: 2px;
|
||||
text-transform: uppercase;
|
||||
color: #E63946;
|
||||
}
|
||||
|
||||
/* Grid lines */
|
||||
.grid-line-v {
|
||||
position: absolute;
|
||||
top: 64px;
|
||||
bottom: 64px;
|
||||
width: 1px;
|
||||
background: #000;
|
||||
opacity: 0.05;
|
||||
}
|
||||
|
||||
.grid-line-h {
|
||||
position: absolute;
|
||||
left: 80px;
|
||||
right: 80px;
|
||||
height: 1px;
|
||||
background: #000;
|
||||
opacity: 0.05;
|
||||
}
|
||||
|
||||
/* Left column — hero number + model info */
|
||||
.left-col {
|
||||
position: absolute;
|
||||
left: 80px;
|
||||
top: 104px;
|
||||
width: 480px;
|
||||
}
|
||||
|
||||
.model-tag {
|
||||
font-size: 11px;
|
||||
font-weight: 700;
|
||||
letter-spacing: 3px;
|
||||
text-transform: uppercase;
|
||||
color: #999;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.model-name {
|
||||
font-size: 48px;
|
||||
font-weight: 900;
|
||||
color: #111;
|
||||
line-height: 1;
|
||||
letter-spacing: -2px;
|
||||
}
|
||||
|
||||
.model-name .version { color: #E63946; }
|
||||
|
||||
.hero-number {
|
||||
font-size: 200px;
|
||||
font-weight: 900;
|
||||
line-height: 0.85;
|
||||
letter-spacing: -10px;
|
||||
color: #111;
|
||||
margin-top: 24px;
|
||||
}
|
||||
|
||||
.hero-number .decimal { color: #E63946; }
|
||||
|
||||
.hero-context {
|
||||
font-size: 13px;
|
||||
font-weight: 500;
|
||||
color: #999;
|
||||
letter-spacing: 1px;
|
||||
text-transform: uppercase;
|
||||
margin-top: 8px;
|
||||
}
|
||||
|
||||
.key-message {
|
||||
font-size: 16px;
|
||||
font-weight: 400;
|
||||
line-height: 1.6;
|
||||
color: #666;
|
||||
margin-top: 32px;
|
||||
max-width: 400px;
|
||||
}
|
||||
|
||||
.key-message strong {
|
||||
color: #111;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.open-badge {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
margin-top: 24px;
|
||||
padding: 8px 16px;
|
||||
border: 2px solid #E63946;
|
||||
font-size: 11px;
|
||||
font-weight: 700;
|
||||
letter-spacing: 2px;
|
||||
text-transform: uppercase;
|
||||
color: #E63946;
|
||||
}
|
||||
|
||||
/* Right area — 3 benchmark columns */
|
||||
.data-area {
|
||||
position: absolute;
|
||||
left: 620px;
|
||||
top: 104px;
|
||||
right: 80px;
|
||||
bottom: 64px;
|
||||
display: flex;
|
||||
gap: 0;
|
||||
}
|
||||
|
||||
.bench-col {
|
||||
flex: 1;
|
||||
padding: 0 32px;
|
||||
border-left: 1px solid #E8E8E8;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.bench-col:first-child {
|
||||
padding-left: 0;
|
||||
border-left: none;
|
||||
}
|
||||
|
||||
.bench-title {
|
||||
font-size: 13px;
|
||||
font-weight: 700;
|
||||
letter-spacing: 2px;
|
||||
text-transform: uppercase;
|
||||
color: #111;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.bench-type {
|
||||
font-size: 11px;
|
||||
font-weight: 400;
|
||||
color: #BBB;
|
||||
margin-bottom: 64px;
|
||||
}
|
||||
|
||||
/* Hero score per column */
|
||||
.bench-hero {
|
||||
font-size: 80px;
|
||||
font-weight: 900;
|
||||
color: #E63946;
|
||||
letter-spacing: -3px;
|
||||
line-height: 1;
|
||||
margin-bottom: 64px;
|
||||
}
|
||||
|
||||
/* Horizontal bar chart */
|
||||
.bar-group {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 24px;
|
||||
}
|
||||
|
||||
.bar-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.bar-label {
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
color: #888;
|
||||
width: 90px;
|
||||
flex-shrink: 0;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.bar-label.highlight {
|
||||
color: #111;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.bar-track {
|
||||
flex: 1;
|
||||
height: 56px;
|
||||
background: #F5F5F5;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.bar-fill {
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-end;
|
||||
padding-right: 14px;
|
||||
}
|
||||
|
||||
.bar-fill.base {
|
||||
background: #E0E0E0;
|
||||
}
|
||||
|
||||
.bar-fill.dark {
|
||||
background: #111;
|
||||
}
|
||||
|
||||
.bar-fill.winner {
|
||||
background: #E63946;
|
||||
}
|
||||
|
||||
.bar-value {
|
||||
font-size: 15px;
|
||||
font-weight: 700;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.bar-fill.base .bar-value {
|
||||
color: #888;
|
||||
}
|
||||
|
||||
/* Bottom bar */
|
||||
.bottom-bar {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: 64px;
|
||||
background: #111;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 0 80px;
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
.bottom-left {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 24px;
|
||||
}
|
||||
|
||||
.bottom-logo {
|
||||
font-size: 14px;
|
||||
font-weight: 900;
|
||||
color: #fff;
|
||||
letter-spacing: 1px;
|
||||
}
|
||||
|
||||
.bottom-divider {
|
||||
width: 1px;
|
||||
height: 20px;
|
||||
background: #444;
|
||||
}
|
||||
|
||||
.bottom-note {
|
||||
font-size: 11px;
|
||||
font-weight: 400;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.bottom-right-text {
|
||||
font-size: 11px;
|
||||
font-weight: 700;
|
||||
letter-spacing: 2px;
|
||||
text-transform: uppercase;
|
||||
color: #E63946;
|
||||
}
|
||||
|
||||
/* Delta label */
|
||||
.delta {
|
||||
font-size: 12px;
|
||||
font-weight: 700;
|
||||
color: #E63946;
|
||||
letter-spacing: 1px;
|
||||
text-transform: uppercase;
|
||||
margin-top: 24px;
|
||||
padding-left: 106px;
|
||||
}
|
||||
|
||||
/* Bottom summary row */
|
||||
.summary-row {
|
||||
position: absolute;
|
||||
bottom: 96px;
|
||||
left: 620px;
|
||||
right: 80px;
|
||||
display: flex;
|
||||
border-top: 1px solid #E8E8E8;
|
||||
padding-top: 24px;
|
||||
}
|
||||
|
||||
.summary-item {
|
||||
flex: 1;
|
||||
padding: 0 32px;
|
||||
}
|
||||
|
||||
.summary-item:first-child {
|
||||
padding-left: 0;
|
||||
}
|
||||
|
||||
.summary-num {
|
||||
font-size: 32px;
|
||||
font-weight: 900;
|
||||
color: #111;
|
||||
letter-spacing: -1px;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.summary-num .red { color: #E63946; }
|
||||
|
||||
.summary-desc {
|
||||
font-size: 11px;
|
||||
font-weight: 500;
|
||||
color: #999;
|
||||
letter-spacing: 1px;
|
||||
text-transform: uppercase;
|
||||
margin-top: 8px;
|
||||
}
|
||||
|
||||
/* Winner markers */
|
||||
.winner-dot {
|
||||
position: absolute;
|
||||
right: -8px;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
border-radius: 50%;
|
||||
background: #E63946;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<!-- Top bar -->
|
||||
<div class="top-bar">
|
||||
<span class="top-label">Benchmark Report <span class="red">/</span> 2025 Coding Performance</span>
|
||||
<span class="top-right">Open-Source SOTA</span>
|
||||
</div>
|
||||
|
||||
<!-- Grid lines -->
|
||||
<div class="grid-line-v" style="left: 80px;"></div>
|
||||
<div class="grid-line-v" style="left: 620px;"></div>
|
||||
<div class="grid-line-v" style="right: 80px;"></div>
|
||||
<div class="grid-line-h" style="top: 104px;"></div>
|
||||
|
||||
<!-- Left column -->
|
||||
<div class="left-col">
|
||||
<div class="model-tag">Open-Source Model</div>
|
||||
<div class="model-name">GLM-<span class="version">4.7</span></div>
|
||||
<div class="hero-number">95<span class="decimal">.</span>7</div>
|
||||
<div class="hero-context">AIME 2025 Score</div>
|
||||
<div class="key-message">
|
||||
<strong>First open-source model to achieve SOTA</strong> across all three major coding benchmarks, surpassing GPT-4o and Claude 3.5.
|
||||
</div>
|
||||
<div class="open-badge">
|
||||
<svg width="14" height="14" viewBox="0 0 14 14" fill="none">
|
||||
<circle cx="7" cy="7" r="6" stroke="#E63946" stroke-width="1.5"/>
|
||||
<circle cx="7" cy="7" r="2.5" fill="#E63946"/>
|
||||
</svg>
|
||||
Open Source
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Data columns -->
|
||||
<div class="data-area">
|
||||
<!-- AIME 2025 -->
|
||||
<div class="bench-col">
|
||||
<div class="bench-title">AIME 2025</div>
|
||||
<div class="bench-type">Mathematical Reasoning</div>
|
||||
<div class="bench-hero">95.7</div>
|
||||
<div class="bar-group">
|
||||
<div class="bar-row">
|
||||
<span class="bar-label highlight">GLM-4.7</span>
|
||||
<div class="bar-track">
|
||||
<div class="bar-fill winner" style="width: 95.7%;">
|
||||
<span class="bar-value">95.7</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bar-row">
|
||||
<span class="bar-label">Claude 3.5</span>
|
||||
<div class="bar-track">
|
||||
<div class="bar-fill dark" style="width: 88.2%;">
|
||||
<span class="bar-value">88.2</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bar-row">
|
||||
<span class="bar-label">GPT-4o</span>
|
||||
<div class="bar-track">
|
||||
<div class="bar-fill base" style="width: 83.6%;">
|
||||
<span class="bar-value">83.6</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="delta">+7.5 vs closed-source best</div>
|
||||
</div>
|
||||
|
||||
<!-- SWE-bench -->
|
||||
<div class="bench-col">
|
||||
<div class="bench-title">SWE-bench Verified</div>
|
||||
<div class="bench-type">Software Engineering</div>
|
||||
<div class="bench-hero">73.8</div>
|
||||
<div class="bar-group">
|
||||
<div class="bar-row">
|
||||
<span class="bar-label highlight">GLM-4.7</span>
|
||||
<div class="bar-track">
|
||||
<div class="bar-fill winner" style="width: 73.8%;">
|
||||
<span class="bar-value">73.8%</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bar-row">
|
||||
<span class="bar-label">Claude 3.5</span>
|
||||
<div class="bar-track">
|
||||
<div class="bar-fill dark" style="width: 53.3%;">
|
||||
<span class="bar-value">53.3%</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bar-row">
|
||||
<span class="bar-label">GPT-4o</span>
|
||||
<div class="bar-track">
|
||||
<div class="bar-fill base" style="width: 48.2%;">
|
||||
<span class="bar-value">48.2%</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="delta">+20.5 vs closed-source best</div>
|
||||
</div>
|
||||
|
||||
<!-- Tau-bench -->
|
||||
<div class="bench-col">
|
||||
<div class="bench-title">τ²-Bench</div>
|
||||
<div class="bench-type">Agent Task Completion</div>
|
||||
<div class="bench-hero">87.4</div>
|
||||
<div class="bar-group">
|
||||
<div class="bar-row">
|
||||
<span class="bar-label highlight">GLM-4.7</span>
|
||||
<div class="bar-track">
|
||||
<div class="bar-fill winner" style="width: 87.4%;">
|
||||
<span class="bar-value">87.4</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bar-row">
|
||||
<span class="bar-label">Claude 3.5</span>
|
||||
<div class="bar-track">
|
||||
<div class="bar-fill dark" style="width: 78.9%;">
|
||||
<span class="bar-value">78.9</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bar-row">
|
||||
<span class="bar-label">GPT-4o</span>
|
||||
<div class="bar-track">
|
||||
<div class="bar-fill base" style="width: 71.5%;">
|
||||
<span class="bar-value">71.5</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="delta">+8.5 vs closed-source best</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Summary row -->
|
||||
<div class="summary-row">
|
||||
<div class="summary-item">
|
||||
<div class="summary-num"><span class="red">3</span>/3</div>
|
||||
<div class="summary-desc">Benchmarks Won</div>
|
||||
</div>
|
||||
<div class="summary-item">
|
||||
<div class="summary-num"><span class="red">#1</span></div>
|
||||
<div class="summary-desc">Open-Source Ranking</div>
|
||||
</div>
|
||||
<div class="summary-item">
|
||||
<div class="summary-num">12<span class="red">.</span>2<span style="font-size:18px;color:#999;">avg</span></div>
|
||||
<div class="summary-desc">Points Above Runner-Up</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Bottom bar -->
|
||||
<div class="bottom-bar">
|
||||
<div class="bottom-left">
|
||||
<span class="bottom-logo">ZHIPU AI</span>
|
||||
<div class="bottom-divider"></div>
|
||||
<span class="bottom-note">Benchmark data sourced from official evaluation reports, 2025</span>
|
||||
</div>
|
||||
<span class="bottom-right-text">Open-Source SOTA</span>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 99 KiB |
@@ -0,0 +1,497 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=1920">
|
||||
<title>GLM-4.7 Coding Benchmark - Takram Style</title>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600&family=Noto+Serif+SC:wght@300;400;500;600&display=swap" rel="stylesheet">
|
||||
<style>
|
||||
* { margin: 0; padding: 0; box-sizing: border-box; }
|
||||
body {
|
||||
width: 1920px;
|
||||
height: 1080px;
|
||||
overflow: hidden;
|
||||
margin: 0;
|
||||
background: #F5F0EB;
|
||||
font-family: 'Inter', sans-serif;
|
||||
color: #3A3A3A;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
/* Subtle background texture */
|
||||
body::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0; left: 0; right: 0; bottom: 0;
|
||||
background:
|
||||
radial-gradient(ellipse at 20% 50%, rgba(168, 181, 160, 0.08) 0%, transparent 60%),
|
||||
radial-gradient(ellipse at 80% 30%, rgba(200, 190, 175, 0.06) 0%, transparent 50%);
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.layout {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: grid;
|
||||
grid-template-columns: 480px 1fr;
|
||||
grid-template-rows: 1fr;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
/* Left panel */
|
||||
.left-panel {
|
||||
padding: 72px 48px 60px 72px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
border-right: 1px solid rgba(107, 143, 113, 0.15);
|
||||
}
|
||||
|
||||
.left-top {}
|
||||
|
||||
.category-label {
|
||||
font-size: 10px;
|
||||
font-weight: 500;
|
||||
letter-spacing: 3px;
|
||||
text-transform: uppercase;
|
||||
color: #6B8F71;
|
||||
margin-bottom: 32px;
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
.title-jp {
|
||||
font-family: 'Noto Serif SC', serif;
|
||||
font-size: 42px;
|
||||
font-weight: 400;
|
||||
color: #2D3436;
|
||||
line-height: 1.4;
|
||||
margin-bottom: 16px;
|
||||
letter-spacing: 1px;
|
||||
}
|
||||
|
||||
.title-en {
|
||||
font-size: 15px;
|
||||
font-weight: 300;
|
||||
color: #999999;
|
||||
line-height: 1.7;
|
||||
max-width: 340px;
|
||||
}
|
||||
|
||||
.model-badge {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
margin-top: 36px;
|
||||
padding: 10px 18px;
|
||||
background: rgba(107, 143, 113, 0.08);
|
||||
border: 1px solid rgba(107, 143, 113, 0.15);
|
||||
border-radius: 24px;
|
||||
}
|
||||
|
||||
.model-badge-dot {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
border-radius: 50%;
|
||||
background: #6B8F71;
|
||||
}
|
||||
|
||||
.model-badge-text {
|
||||
font-size: 12px;
|
||||
font-weight: 500;
|
||||
color: #6B8F71;
|
||||
letter-spacing: 1px;
|
||||
}
|
||||
|
||||
/* Page indicator */
|
||||
.page-indicator {
|
||||
position: absolute;
|
||||
bottom: 40px;
|
||||
right: 72px;
|
||||
font-family: 'Inter', sans-serif;
|
||||
font-size: 10px;
|
||||
font-weight: 300;
|
||||
color: #C8C2B8;
|
||||
letter-spacing: 1px;
|
||||
}
|
||||
|
||||
/* Key insight */
|
||||
.key-insight {
|
||||
background: rgba(255, 255, 255, 0.5);
|
||||
border-radius: 16px;
|
||||
padding: 24px 28px;
|
||||
border: 1px solid rgba(168, 181, 160, 0.2);
|
||||
}
|
||||
|
||||
.key-insight-label {
|
||||
font-size: 10px;
|
||||
font-weight: 500;
|
||||
letter-spacing: 2px;
|
||||
text-transform: uppercase;
|
||||
color: #A8B5A0;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.key-insight-text {
|
||||
font-family: 'Noto Serif SC', serif;
|
||||
font-size: 15px;
|
||||
font-weight: 400;
|
||||
color: #555555;
|
||||
line-height: 1.8;
|
||||
}
|
||||
|
||||
.left-bottom {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.credit {
|
||||
font-size: 11px;
|
||||
font-weight: 400;
|
||||
color: #BBBBBB;
|
||||
letter-spacing: 0.5px;
|
||||
}
|
||||
|
||||
/* Right panel - visualization */
|
||||
.right-panel {
|
||||
padding: 60px 72px 60px 60px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.viz-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: flex-start;
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
|
||||
.viz-title {
|
||||
font-size: 13px;
|
||||
font-weight: 500;
|
||||
letter-spacing: 1.5px;
|
||||
text-transform: uppercase;
|
||||
color: #888888;
|
||||
}
|
||||
|
||||
.legend {
|
||||
display: flex;
|
||||
gap: 20px;
|
||||
}
|
||||
|
||||
.legend-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
.legend-dot {
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.legend-dot.glm { background: #6B8F71; }
|
||||
.legend-dot.claude { background: #D4A574; }
|
||||
.legend-dot.gpt { background: #C8C2B8; }
|
||||
|
||||
.legend-text {
|
||||
font-size: 11px;
|
||||
font-weight: 400;
|
||||
color: #999999;
|
||||
}
|
||||
|
||||
/* SVG radar chart area */
|
||||
.radar-area {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.radar-svg {
|
||||
filter: drop-shadow(0 4px 20px rgba(0,0,0,0.04));
|
||||
}
|
||||
|
||||
/* Metric cards row */
|
||||
.metric-cards {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr 1fr;
|
||||
gap: 20px;
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
.m-card {
|
||||
background: rgba(255, 255, 255, 0.6);
|
||||
border-radius: 16px;
|
||||
padding: 24px 28px;
|
||||
border: 1px solid rgba(168, 181, 160, 0.15);
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.m-card::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 28px;
|
||||
width: 32px;
|
||||
height: 2px;
|
||||
background: #6B8F71;
|
||||
opacity: 0.4;
|
||||
border-radius: 1px;
|
||||
}
|
||||
|
||||
.m-card-name {
|
||||
font-size: 11px;
|
||||
font-weight: 500;
|
||||
letter-spacing: 1.5px;
|
||||
text-transform: uppercase;
|
||||
color: #999999;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.m-card-type {
|
||||
font-size: 11px;
|
||||
font-weight: 300;
|
||||
color: #BBBBBB;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.m-card-value {
|
||||
font-size: 40px;
|
||||
font-weight: 300;
|
||||
color: #2D3436;
|
||||
letter-spacing: -1px;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.m-card-value .unit {
|
||||
font-size: 18px;
|
||||
color: #6B8F71;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
.m-card-delta {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
margin-top: 10px;
|
||||
font-size: 12px;
|
||||
font-weight: 500;
|
||||
color: #7D9B72;
|
||||
background: rgba(168, 181, 160, 0.12);
|
||||
padding: 3px 10px;
|
||||
border-radius: 12px;
|
||||
}
|
||||
|
||||
.m-card-delta svg {
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
}
|
||||
|
||||
.m-card-competitors {
|
||||
margin-top: 14px;
|
||||
display: flex;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.comp-mini {
|
||||
font-size: 11px;
|
||||
font-weight: 400;
|
||||
color: #AAAAAA;
|
||||
}
|
||||
|
||||
.comp-mini span {
|
||||
font-weight: 500;
|
||||
color: #888888;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="layout">
|
||||
<!-- Left panel -->
|
||||
<div class="left-panel">
|
||||
<div class="left-top">
|
||||
<div class="category-label">Benchmark Analysis</div>
|
||||
<div class="title-jp">GLM-4.7<br>Coding 能力突破</div>
|
||||
<div class="title-en">
|
||||
Open-source model achieves state-of-the-art performance across all major coding benchmarks for the first time.
|
||||
</div>
|
||||
<div class="model-badge">
|
||||
<div class="model-badge-dot"></div>
|
||||
<span class="model-badge-text">GLM-4.7 Open Source</span>
|
||||
</div>
|
||||
|
||||
<div class="key-insight" style="margin-top: 40px;">
|
||||
<div class="key-insight-label">Key Finding</div>
|
||||
<div class="key-insight-text">
|
||||
在三项核心编程基准测试中，GLM-4.7 均超越 GPT-4o 和 Claude 3.5，成为首个达到 SOTA 水平的开源模型。
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="left-bottom">
|
||||
<svg width="16" height="16" viewBox="0 0 16 16" fill="none">
|
||||
<rect x="1" y="1" width="14" height="14" rx="3" stroke="#BBBBBB" stroke-width="1"/>
|
||||
<path d="M5 8L7 10L11 6" stroke="#A8B5A0" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
<span class="credit">Data: Official benchmark evaluations, 2026</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Right panel -->
|
||||
<div class="right-panel">
|
||||
<div class="viz-header">
|
||||
<div class="viz-title">Performance Comparison <span style="font-weight:300;color:#B0AAA0;font-size:10px;margin-left:8px;">— 03 benchmarks</span></div>
|
||||
<div class="legend">
|
||||
<div class="legend-item"><div class="legend-dot glm"></div><span class="legend-text">GLM-4.7</span></div>
|
||||
<div class="legend-item"><div class="legend-dot claude"></div><span class="legend-text">Claude 3.5</span></div>
|
||||
<div class="legend-item"><div class="legend-dot gpt"></div><span class="legend-text">GPT-4o</span></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Radar chart SVG — art-piece treatment -->
|
||||
<div class="radar-area">
|
||||
<svg class="radar-svg" width="560" height="560" viewBox="0 0 560 560">
|
||||
|
||||
<!-- Subtle background circle (like a lens/scope) -->
|
||||
<circle cx="280" cy="280" r="250" fill="none" stroke="#E8E4DC" stroke-width="0.3" opacity="0.5"/>
|
||||
|
||||
<!-- Grid circles — hand-drawn feel with varied dash -->
|
||||
<circle cx="280" cy="280" r="220" fill="none" stroke="#DDD9D2" stroke-width="0.6" stroke-dasharray="2,6"/>
|
||||
<circle cx="280" cy="280" r="176" fill="none" stroke="#DDD9D2" stroke-width="0.5" stroke-dasharray="2,6"/>
|
||||
<circle cx="280" cy="280" r="132" fill="none" stroke="#DDD9D2" stroke-width="0.4" stroke-dasharray="2,6"/>
|
||||
<circle cx="280" cy="280" r="88" fill="none" stroke="#DDD9D2" stroke-width="0.4" stroke-dasharray="2,6"/>
|
||||
<circle cx="280" cy="280" r="44" fill="none" stroke="#DDD9D2" stroke-width="0.3" stroke-dasharray="2,6"/>
|
||||
|
||||
<!-- Center point -->
|
||||
<circle cx="280" cy="280" r="2.5" fill="#6B8F71" opacity="0.4"/>
|
||||
|
||||
<!-- Grid scale labels — positioned along axis -->
|
||||
<text x="288" y="62" font-family="Inter" font-size="9" fill="#C8C2B8" font-weight="300">100</text>
|
||||
<text x="288" y="106" font-family="Inter" font-size="9" fill="#C8C2B8" font-weight="300">80</text>
|
||||
<text x="288" y="150" font-family="Inter" font-size="9" fill="#C8C2B8" font-weight="300">60</text>
|
||||
<text x="288" y="194" font-family="Inter" font-size="9" fill="#C8C2B8" font-weight="300">40</text>
|
||||
|
||||
<!-- Axis lines — delicate -->
|
||||
<line x1="280" y1="280" x2="280" y2="55" stroke="#D4CFC6" stroke-width="0.5"/>
|
||||
<line x1="280" y1="280" x2="475" y2="392" stroke="#D4CFC6" stroke-width="0.5"/>
|
||||
<line x1="280" y1="280" x2="85" y2="392" stroke="#D4CFC6" stroke-width="0.5"/>
|
||||
|
||||
<!-- Axis endpoint markers -->
|
||||
<circle cx="280" cy="55" r="2" fill="none" stroke="#D4CFC6" stroke-width="0.6"/>
|
||||
<circle cx="475" cy="392" r="2" fill="none" stroke="#D4CFC6" stroke-width="0.6"/>
|
||||
<circle cx="85" cy="392" r="2" fill="none" stroke="#D4CFC6" stroke-width="0.6"/>
|
||||
|
||||
<!-- Axis labels with index -->
|
||||
<text x="280" y="38" font-family="Inter" font-size="12" fill="#8A857D" font-weight="500" text-anchor="middle" letter-spacing="1.5">AIME 2025</text>
|
||||
<text x="280" y="28" font-family="Inter" font-size="7" fill="#B0AAA0" text-anchor="middle" letter-spacing="0.5">Mathematical Reasoning</text>
|
||||
<text x="492" y="408" font-family="Inter" font-size="12" fill="#8A857D" font-weight="500" text-anchor="start" letter-spacing="1.5">SWE-bench</text>
|
||||
<text x="492" y="422" font-family="Inter" font-size="7" fill="#B0AAA0" text-anchor="start" letter-spacing="0.5">Software Engineering</text>
|
||||
<text x="68" y="408" font-family="Inter" font-size="12" fill="#8A857D" font-weight="500" text-anchor="end" letter-spacing="1.5">τ²-Bench</text>
|
||||
<text x="68" y="422" font-family="Inter" font-size="7" fill="#B0AAA0" text-anchor="end" letter-spacing="0.5">Agent Tasks</text>
|
||||
|
||||
<!-- GPT-4o polygon (lightest) -->
|
||||
<polygon
|
||||
points="280,96.1 371.8,333 143.8,358.7"
|
||||
fill="rgba(219,219,219,0.12)" stroke="#D4CFC6" stroke-width="1" stroke-dasharray="4,3"
|
||||
/>
|
||||
|
||||
<!-- Claude 3.5 polygon -->
|
||||
<polygon
|
||||
points="280,86 381.6,338.6 129.7,366.8"
|
||||
fill="rgba(212,165,116,0.08)" stroke="#D4A574" stroke-width="1.2"
|
||||
/>
|
||||
|
||||
<!-- GLM-4.7 polygon (prominent, sage green) -->
|
||||
<polygon
|
||||
points="280,69.5 420.6,361.2 113.5,376.2"
|
||||
fill="rgba(107,143,113,0.1)" stroke="#6B8F71" stroke-width="2"
|
||||
/>
|
||||
|
||||
<!-- Data points - GLM-4.7 (larger, prominent) -->
|
||||
<circle cx="280" cy="69.5" r="6" fill="#6B8F71" opacity="0.8"/>
|
||||
<circle cx="280" cy="69.5" r="10" fill="none" stroke="#6B8F71" stroke-width="0.6" opacity="0.3"/>
|
||||
<circle cx="420.6" cy="361.2" r="6" fill="#6B8F71" opacity="0.8"/>
|
||||
<circle cx="420.6" cy="361.2" r="10" fill="none" stroke="#6B8F71" stroke-width="0.6" opacity="0.3"/>
|
||||
<circle cx="113.5" cy="376.2" r="6" fill="#6B8F71" opacity="0.8"/>
|
||||
<circle cx="113.5" cy="376.2" r="10" fill="none" stroke="#6B8F71" stroke-width="0.6" opacity="0.3"/>
|
||||
|
||||
<!-- Data points - Claude 3.5 -->
|
||||
<circle cx="280" cy="86" r="3.5" fill="#D4A574" opacity="0.7"/>
|
||||
<circle cx="381.6" cy="338.6" r="3.5" fill="#D4A574" opacity="0.7"/>
|
||||
<circle cx="129.7" cy="366.8" r="3.5" fill="#D4A574" opacity="0.7"/>
|
||||
|
||||
<!-- Data points - GPT-4o -->
|
||||
<circle cx="280" cy="96.1" r="2.5" fill="#C8C2B8" opacity="0.6"/>
|
||||
<circle cx="371.8" cy="333" r="2.5" fill="#C8C2B8" opacity="0.6"/>
|
||||
<circle cx="143.8" cy="358.7" r="2.5" fill="#C8C2B8" opacity="0.6"/>
|
||||
|
||||
<!-- Value labels for GLM-4.7 — annotation style -->
|
||||
<line x1="280" y1="69.5" x2="316" y2="52" stroke="#6B8F71" stroke-width="0.5" opacity="0.4"/>
|
||||
<text x="320" y="50" font-family="Inter" font-size="14" fill="#6B8F71" font-weight="600">95.7</text>
|
||||
|
||||
<line x1="420.6" y1="361.2" x2="448" y2="348" stroke="#6B8F71" stroke-width="0.5" opacity="0.4"/>
|
||||
<text x="452" y="352" font-family="Inter" font-size="14" fill="#6B8F71" font-weight="600">73.8%</text>
|
||||
|
||||
<line x1="113.5" y1="376.2" x2="82" y2="392" stroke="#6B8F71" stroke-width="0.5" opacity="0.4"/>
|
||||
<text x="78" y="390" font-family="Inter" font-size="14" fill="#6B8F71" font-weight="600" text-anchor="end">87.4</text>
|
||||
|
||||
<!-- Spec annotation — bottom-right -->
|
||||
<text x="505" y="530" font-family="Inter" font-size="8" fill="#C8C2B8" font-weight="300" letter-spacing="1" text-anchor="end">Fig. 01 — Tri-axis Performance Map</text>
|
||||
</svg>
|
||||
</div>
|
||||
|
||||
<!-- Metric cards -->
|
||||
<div class="metric-cards">
|
||||
<div class="m-card">
|
||||
<div class="m-card-name">AIME 2025</div>
|
||||
<div class="m-card-type">Mathematical Reasoning</div>
|
||||
<div class="m-card-value">95.7</div>
|
||||
<div class="m-card-delta">
|
||||
<svg viewBox="0 0 10 10" fill="none"><path d="M5 2L8 7H2L5 2Z" fill="#7D9B72"/></svg>
|
||||
+7.5 vs Claude 3.5
|
||||
</div>
|
||||
<div class="m-card-competitors">
|
||||
<span class="comp-mini">Claude 3.5: <span>88.2</span></span>
|
||||
<span class="comp-mini">GPT-4o: <span>83.6</span></span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="m-card">
|
||||
<div class="m-card-name">SWE-bench Verified</div>
|
||||
<div class="m-card-type">Software Engineering</div>
|
||||
<div class="m-card-value">73.8<span class="unit">%</span></div>
|
||||
<div class="m-card-delta">
|
||||
<svg viewBox="0 0 10 10" fill="none"><path d="M5 2L8 7H2L5 2Z" fill="#7D9B72"/></svg>
|
||||
+20.5 vs Claude 3.5
|
||||
</div>
|
||||
<div class="m-card-competitors">
|
||||
<span class="comp-mini">Claude 3.5: <span>53.3%</span></span>
|
||||
<span class="comp-mini">GPT-4o: <span>48.2%</span></span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="m-card">
|
||||
<div class="m-card-name">τ²-Bench</div>
|
||||
<div class="m-card-type">Agent Task Completion</div>
|
||||
<div class="m-card-value">87.4</div>
|
||||
<div class="m-card-delta">
|
||||
<svg viewBox="0 0 10 10" fill="none"><path d="M5 2L8 7H2L5 2Z" fill="#7D9B72"/></svg>
|
||||
+8.5 vs Claude 3.5
|
||||
</div>
|
||||
<div class="m-card-competitors">
|
||||
<span class="comp-mini">Claude 3.5: <span>78.9</span></span>
|
||||
<span class="comp-mini">GPT-4o: <span>71.5</span></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="page-indicator">07 / 24</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
BIN
.claude/skills/huashu-design/assets/showcases/ppt/ppt-takram.png
Normal file
BIN
.claude/skills/huashu-design/assets/showcases/ppt/ppt-takram.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 456 KiB |
@@ -0,0 +1,385 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=1440">
|
||||
<title>AI Compass — Build Studio Style</title>
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@200;300;400;500;600&display=swap" rel="stylesheet">
|
||||
<script src="https://unpkg.com/lucide@latest"></script>
|
||||
<style>
|
||||
* { margin: 0; padding: 0; box-sizing: border-box; }
|
||||
body {
|
||||
width: 1440px;
|
||||
height: 900px;
|
||||
overflow: hidden;
|
||||
margin: 0;
|
||||
font-family: 'Inter', sans-serif;
|
||||
background: #FAFAF8;
|
||||
color: #1A1A1A;
|
||||
}
|
||||
|
||||
/* NAV */
|
||||
nav {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 28px 80px;
|
||||
}
|
||||
.nav-logo {
|
||||
font-weight: 500;
|
||||
font-size: 18px;
|
||||
letter-spacing: 2px;
|
||||
text-transform: uppercase;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
color: #1A1A1A;
|
||||
}
|
||||
.nav-logo svg {
|
||||
color: #D4A574;
|
||||
}
|
||||
.nav-links {
|
||||
display: flex;
|
||||
gap: 40px;
|
||||
list-style: none;
|
||||
}
|
||||
.nav-links a {
|
||||
text-decoration: none;
|
||||
color: #999;
|
||||
font-size: 13px;
|
||||
font-weight: 400;
|
||||
letter-spacing: 1px;
|
||||
transition: color 0.3s;
|
||||
}
|
||||
.nav-links a:hover { color: #1A1A1A; }
|
||||
.nav-cta {
|
||||
font-size: 12px;
|
||||
font-weight: 400;
|
||||
letter-spacing: 1px;
|
||||
background: transparent;
|
||||
color: #888;
|
||||
border: 1px solid rgba(0,0,0,0.08);
|
||||
padding: 8px 24px;
|
||||
border-radius: 2px;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s;
|
||||
}
|
||||
.nav-cta:hover {
|
||||
border-color: #D4A574;
|
||||
color: #D4A574;
|
||||
}
|
||||
|
||||
/* HERO */
|
||||
.hero {
|
||||
text-align: center;
|
||||
padding: 64px 80px 0;
|
||||
}
|
||||
.hero-eyebrow {
|
||||
font-size: 10px;
|
||||
font-weight: 400;
|
||||
letter-spacing: 4px;
|
||||
text-transform: uppercase;
|
||||
color: #B0ACA4;
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
.hero h1 {
|
||||
font-size: 52px;
|
||||
font-weight: 200;
|
||||
line-height: 1.15;
|
||||
letter-spacing: -1px;
|
||||
max-width: 700px;
|
||||
margin: 0 auto;
|
||||
color: #1A1A1A;
|
||||
}
|
||||
.hero h1 em {
|
||||
font-style: italic;
|
||||
font-weight: 300;
|
||||
color: #D4A574;
|
||||
}
|
||||
.hero-sub {
|
||||
font-size: 16px;
|
||||
font-weight: 300;
|
||||
color: #888;
|
||||
margin-top: 16px;
|
||||
letter-spacing: 0.3px;
|
||||
}
|
||||
|
||||
/* SEARCH */
|
||||
.search-wrapper {
|
||||
max-width: 600px;
|
||||
margin: 32px auto 0;
|
||||
position: relative;
|
||||
}
|
||||
.search-bar {
|
||||
width: 100%;
|
||||
padding: 18px 56px 18px 24px;
|
||||
font-family: 'Inter', sans-serif;
|
||||
font-size: 15px;
|
||||
font-weight: 300;
|
||||
color: #1A1A1A;
|
||||
background: #FFFFFF;
|
||||
border: 1px solid #E8E4DF;
|
||||
border-radius: 2px;
|
||||
outline: none;
|
||||
box-shadow: 0 2px 20px rgba(0,0,0,0.04);
|
||||
transition: box-shadow 0.3s, border-color 0.3s;
|
||||
}
|
||||
.search-bar::placeholder { color: #BBB; }
|
||||
.search-bar:focus {
|
||||
box-shadow: 0 4px 30px rgba(212,165,116,0.12);
|
||||
border-color: #D4A574;
|
||||
}
|
||||
.search-icon {
|
||||
position: absolute;
|
||||
right: 20px;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
color: #D4A574;
|
||||
}
|
||||
|
||||
/* CATEGORIES */
|
||||
.categories {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
gap: 8px;
|
||||
margin-top: 32px;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
.cat-pill {
|
||||
font-size: 12px;
|
||||
font-weight: 400;
|
||||
color: #999;
|
||||
padding: 8px 16px;
|
||||
background: transparent;
|
||||
border: 1px solid #E8E4DF;
|
||||
border-radius: 2px;
|
||||
cursor: pointer;
|
||||
transition: all 0.25s;
|
||||
letter-spacing: 0.3px;
|
||||
}
|
||||
.cat-pill:hover {
|
||||
border-color: #D4A574;
|
||||
color: #1A1A1A;
|
||||
}
|
||||
.cat-pill.active {
|
||||
border-color: #D4A574;
|
||||
color: #D4A574;
|
||||
background: rgba(212,165,116,0.06);
|
||||
}
|
||||
|
||||
/* TOOL CARDS */
|
||||
.tools-section {
|
||||
padding: 48px 80px 0;
|
||||
}
|
||||
.tools-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
.tools-header h2 {
|
||||
font-size: 13px;
|
||||
font-weight: 500;
|
||||
letter-spacing: 2px;
|
||||
text-transform: uppercase;
|
||||
color: #999;
|
||||
}
|
||||
.tools-header a {
|
||||
font-size: 13px;
|
||||
font-weight: 400;
|
||||
color: #D4A574;
|
||||
text-decoration: none;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
transition: opacity 0.3s;
|
||||
}
|
||||
.tools-header a:hover { opacity: 0.7; }
|
||||
|
||||
.tools-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, 1fr);
|
||||
gap: 16px;
|
||||
}
|
||||
.tool-card {
|
||||
background: #FFFFFF;
|
||||
border: 1px solid #EEEBE7;
|
||||
border-radius: 2px;
|
||||
padding: 24px;
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
}
|
||||
.tool-card-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 16px;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
.tool-icon-box {
|
||||
width: 44px;
|
||||
height: 44px;
|
||||
border-radius: 2px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.tool-icon-box.claude { background: #F0EBE3; color: #D4A574; }
|
||||
.tool-icon-box.cursor { background: #EEECEA; color: #999; }
|
||||
.tool-icon-box.midjourney { background: #EEECEA; color: #999; }
|
||||
.tool-icon-box.perplexity { background: #EEECEA; color: #999; }
|
||||
|
||||
.tool-card-name {
|
||||
font-size: 17px;
|
||||
font-weight: 500;
|
||||
letter-spacing: -0.3px;
|
||||
}
|
||||
.tool-card-cat {
|
||||
font-size: 11px;
|
||||
font-weight: 400;
|
||||
color: #BBB;
|
||||
letter-spacing: 0.5px;
|
||||
margin-top: 2px;
|
||||
}
|
||||
.tool-card-desc {
|
||||
font-size: 14px;
|
||||
font-weight: 300;
|
||||
color: #888;
|
||||
line-height: 1.55;
|
||||
}
|
||||
.tool-card-tag {
|
||||
display: inline-block;
|
||||
margin-top: 16px;
|
||||
font-size: 11px;
|
||||
font-weight: 500;
|
||||
color: #D4A574;
|
||||
letter-spacing: 0.5px;
|
||||
padding: 4px 10px;
|
||||
background: rgba(212,165,116,0.1);
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
/* DIVIDER */
|
||||
.divider {
|
||||
width: 40px;
|
||||
height: 1px;
|
||||
background: #D4A574;
|
||||
margin: 0 auto;
|
||||
opacity: 0.5;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<nav>
|
||||
<div class="nav-logo">
|
||||
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
|
||||
<circle cx="12" cy="12" r="10"/>
|
||||
<polygon points="16.24 7.76 14.12 14.12 7.76 16.24 9.88 9.88" fill="currentColor" stroke="currentColor"/>
|
||||
</svg>
|
||||
AI Compass
|
||||
</div>
|
||||
<ul class="nav-links">
|
||||
<li><a href="#">Browse</a></li>
|
||||
<li><a href="#">Categories</a></li>
|
||||
<li><a href="#">New This Week</a></li>
|
||||
<li><a href="#">Newsletter</a></li>
|
||||
</ul>
|
||||
<button class="nav-cta">Submit Tool</button>
|
||||
</nav>
|
||||
|
||||
<section class="hero">
|
||||
<p class="hero-eyebrow">A Curated Directory</p>
|
||||
<h1>Find the right AI tool <em>in seconds</em></h1>
|
||||
<p class="hero-sub">500+ tools, 24 categories, updated weekly</p>
|
||||
|
||||
<div class="search-wrapper">
|
||||
<input class="search-bar" type="text" placeholder="Search by tool name, category, or use case...">
|
||||
<i data-lucide="search" class="search-icon" style="width:18px;height:18px;"></i>
|
||||
</div>
|
||||
|
||||
<div class="categories">
|
||||
<span class="cat-pill active">Writing</span>
|
||||
<span class="cat-pill">Coding</span>
|
||||
<span class="cat-pill">Image</span>
|
||||
<span class="cat-pill">Video</span>
|
||||
<span class="cat-pill">Audio</span>
|
||||
<span class="cat-pill">Productivity</span>
|
||||
<span class="cat-pill">Research</span>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="tools-section">
|
||||
<div class="tools-header">
|
||||
<h2>Featured Selections</h2>
|
||||
<a href="#">
|
||||
View all 500+ tools
|
||||
<i data-lucide="arrow-right" style="width:14px;height:14px;"></i>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="tools-grid">
|
||||
<div class="tool-card">
|
||||
<div class="tool-card-header">
|
||||
<div class="tool-icon-box claude">
|
||||
<i data-lucide="sparkles" style="width:20px;height:20px;"></i>
|
||||
</div>
|
||||
<div>
|
||||
<div class="tool-card-name">Claude</div>
|
||||
<div class="tool-card-cat">Writing & Analysis</div>
|
||||
</div>
|
||||
</div>
|
||||
<p class="tool-card-desc">Advanced AI assistant for writing, analysis, and coding with nuanced reasoning and extended context.</p>
|
||||
<span class="tool-card-tag">Editor's Pick</span>
|
||||
</div>
|
||||
|
||||
<div class="tool-card">
|
||||
<div class="tool-card-header">
|
||||
<div class="tool-icon-box cursor">
|
||||
<i data-lucide="code-2" style="width:20px;height:20px;"></i>
|
||||
</div>
|
||||
<div>
|
||||
<div class="tool-card-name">Cursor</div>
|
||||
<div class="tool-card-cat">Development</div>
|
||||
</div>
|
||||
</div>
|
||||
<p class="tool-card-desc">AI-native code editor that understands your entire codebase and accelerates your development workflow.</p>
|
||||
<span class="tool-card-tag">Trending</span>
|
||||
</div>
|
||||
|
||||
<div class="tool-card">
|
||||
<div class="tool-card-header">
|
||||
<div class="tool-icon-box midjourney">
|
||||
<i data-lucide="image" style="width:20px;height:20px;"></i>
|
||||
</div>
|
||||
<div>
|
||||
<div class="tool-card-name">Midjourney</div>
|
||||
<div class="tool-card-cat">Image Generation</div>
|
||||
</div>
|
||||
</div>
|
||||
<p class="tool-card-desc">Leading AI image generation platform producing stunning, highly detailed visuals from text prompts.</p>
|
||||
<span class="tool-card-tag">Popular</span>
|
||||
</div>
|
||||
|
||||
<div class="tool-card">
|
||||
<div class="tool-card-header">
|
||||
<div class="tool-icon-box perplexity">
|
||||
<i data-lucide="globe" style="width:20px;height:20px;"></i>
|
||||
</div>
|
||||
<div>
|
||||
<div class="tool-card-name">Perplexity</div>
|
||||
<div class="tool-card-cat">Research & Search</div>
|
||||
</div>
|
||||
</div>
|
||||
<p class="tool-card-desc">AI-powered search engine delivering real-time, cited answers in a natural conversational format.</p>
|
||||
<span class="tool-card-tag">Staff Pick</span>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<script>
|
||||
lucide.createIcons();
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 83 KiB |
@@ -0,0 +1,422 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=1440">
|
||||
<title>AI Compass — Pentagram Style</title>
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;900&family=Space+Grotesk:wght@400;500;600;700&display=swap" rel="stylesheet">
|
||||
<script src="https://unpkg.com/lucide@latest"></script>
|
||||
<style>
|
||||
* { margin: 0; padding: 0; box-sizing: border-box; }
|
||||
body {
|
||||
width: 1440px;
|
||||
height: 900px;
|
||||
overflow: hidden;
|
||||
margin: 0;
|
||||
font-family: 'Helvetica Neue', Arial, sans-serif;
|
||||
background: #FFFFFF;
|
||||
color: #000000;
|
||||
}
|
||||
|
||||
/* NAV */
|
||||
nav {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 24px 64px;
|
||||
border-bottom: 2px solid #000;
|
||||
}
|
||||
.nav-logo {
|
||||
font-family: 'Helvetica Neue', Arial, sans-serif;
|
||||
font-weight: 700;
|
||||
font-size: 20px;
|
||||
letter-spacing: -0.5px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
.nav-logo .compass-icon {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
}
|
||||
.nav-links {
|
||||
display: flex;
|
||||
gap: 32px;
|
||||
list-style: none;
|
||||
font-size: 13px;
|
||||
font-weight: 500;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 1.5px;
|
||||
}
|
||||
.nav-links a {
|
||||
text-decoration: none;
|
||||
color: #000;
|
||||
transition: color 0.2s;
|
||||
}
|
||||
.nav-links a:hover { color: #E63946; }
|
||||
.nav-submit {
|
||||
font-family: 'Helvetica Neue', Arial, sans-serif;
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 1.5px;
|
||||
background: #000;
|
||||
color: #fff;
|
||||
border: none;
|
||||
padding: 10px 24px;
|
||||
cursor: pointer;
|
||||
transition: background 0.2s;
|
||||
}
|
||||
.nav-submit:hover { background: #E63946; }
|
||||
|
||||
/* HERO GRID */
|
||||
.hero {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
min-height: calc(900px - 72px);
|
||||
}
|
||||
|
||||
/* LEFT PANEL */
|
||||
.hero-left {
|
||||
padding: 56px 64px 48px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
border-right: 2px solid #000;
|
||||
}
|
||||
.hero-stat {
|
||||
font-family: 'Helvetica Neue', Arial, sans-serif;
|
||||
font-size: 180px;
|
||||
font-weight: 900;
|
||||
line-height: 0.85;
|
||||
letter-spacing: -8px;
|
||||
color: #E63946;
|
||||
position: relative;
|
||||
}
|
||||
.hero-stat span {
|
||||
font-size: 48px;
|
||||
letter-spacing: -2px;
|
||||
vertical-align: top;
|
||||
margin-left: 4px;
|
||||
}
|
||||
.hero-headline {
|
||||
font-family: 'Helvetica Neue', Arial, sans-serif;
|
||||
font-size: 42px;
|
||||
font-weight: 900;
|
||||
line-height: 1.08;
|
||||
letter-spacing: -1.5px;
|
||||
margin-top: 24px;
|
||||
max-width: 520px;
|
||||
}
|
||||
.hero-sub {
|
||||
font-size: 15px;
|
||||
color: #555;
|
||||
margin-top: 16px;
|
||||
letter-spacing: 0.2px;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
/* SEARCH */
|
||||
.search-box {
|
||||
display: flex;
|
||||
border: 3px solid #000;
|
||||
margin-top: 32px;
|
||||
max-width: 560px;
|
||||
}
|
||||
.search-box input {
|
||||
flex: 1;
|
||||
padding: 16px 20px;
|
||||
font-family: 'Helvetica Neue', Arial, sans-serif;
|
||||
font-size: 15px;
|
||||
border: none;
|
||||
outline: none;
|
||||
background: #fff;
|
||||
}
|
||||
.search-box button {
|
||||
padding: 16px 28px;
|
||||
background: #000;
|
||||
color: #fff;
|
||||
border: none;
|
||||
font-family: 'Helvetica Neue', Arial, sans-serif;
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 1.5px;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
transition: background 0.2s;
|
||||
}
|
||||
.search-box button:hover { background: #E63946; }
|
||||
|
||||
/* CATEGORY TAGS */
|
||||
.categories {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 8px;
|
||||
margin-top: 28px;
|
||||
}
|
||||
.cat-tag {
|
||||
font-size: 11px;
|
||||
font-weight: 600;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 2px;
|
||||
padding: 6px 14px;
|
||||
border: 2px solid #000;
|
||||
background: transparent;
|
||||
cursor: pointer;
|
||||
transition: all 0.15s;
|
||||
font-family: 'Helvetica Neue', Arial, sans-serif;
|
||||
}
|
||||
.cat-tag:hover {
|
||||
background: #000;
|
||||
color: #fff;
|
||||
}
|
||||
.cat-tag.active {
|
||||
background: #E63946;
|
||||
border-color: #E63946;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
/* RIGHT PANEL — TOOL LIST */
|
||||
.hero-right {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
.list-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 16px 48px;
|
||||
border-bottom: 2px solid #000;
|
||||
font-size: 11px;
|
||||
font-weight: 600;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 2px;
|
||||
color: #888;
|
||||
}
|
||||
|
||||
.tool-item {
|
||||
display: grid;
|
||||
grid-template-columns: 48px 1fr auto;
|
||||
align-items: center;
|
||||
padding: 24px 48px;
|
||||
border-bottom: 1px solid #E0E0E0;
|
||||
transition: background 0.15s;
|
||||
cursor: pointer;
|
||||
}
|
||||
.tool-item:hover {
|
||||
background: #F7F7F7;
|
||||
}
|
||||
.tool-index {
|
||||
font-family: 'Helvetica Neue', Arial, sans-serif;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
color: #BBB;
|
||||
}
|
||||
.tool-info {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 4px;
|
||||
}
|
||||
.tool-name-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
}
|
||||
.tool-name {
|
||||
font-family: 'Helvetica Neue', Arial, sans-serif;
|
||||
font-size: 22px;
|
||||
font-weight: 600;
|
||||
letter-spacing: -0.5px;
|
||||
}
|
||||
.tool-badge {
|
||||
font-size: 10px;
|
||||
font-weight: 600;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 1.5px;
|
||||
color: #E63946;
|
||||
background: rgba(230, 57, 70, 0.08);
|
||||
padding: 3px 8px;
|
||||
}
|
||||
.tool-desc {
|
||||
font-size: 13px;
|
||||
color: #777;
|
||||
line-height: 1.4;
|
||||
max-width: 400px;
|
||||
}
|
||||
.tool-category {
|
||||
font-size: 11px;
|
||||
font-weight: 600;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 2px;
|
||||
color: #999;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.tool-item:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
/* FEATURED TAG */
|
||||
.tool-item.featured {
|
||||
border-left: 4px solid #E63946;
|
||||
padding-left: 44px;
|
||||
}
|
||||
|
||||
.bottom-bar {
|
||||
margin-top: auto;
|
||||
padding: 16px 48px;
|
||||
border-top: 2px solid #000;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
font-size: 12px;
|
||||
color: #888;
|
||||
font-weight: 500;
|
||||
letter-spacing: 0.5px;
|
||||
}
|
||||
.bottom-bar a {
|
||||
color: #000;
|
||||
text-decoration: none;
|
||||
font-weight: 600;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 1.5px;
|
||||
font-size: 11px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
transition: color 0.2s;
|
||||
}
|
||||
.bottom-bar a:hover { color: #E63946; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<nav>
|
||||
<div class="nav-logo">
|
||||
<svg class="compass-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||||
<circle cx="12" cy="12" r="10"/>
|
||||
<polygon points="16.24 7.76 14.12 14.12 7.76 16.24 9.88 9.88" fill="#E63946" stroke="#E63946"/>
|
||||
</svg>
|
||||
AI Compass
|
||||
</div>
|
||||
<ul class="nav-links">
|
||||
<li><a href="#">Browse</a></li>
|
||||
<li><a href="#">Categories</a></li>
|
||||
<li><a href="#">New Tools</a></li>
|
||||
<li><a href="#">About</a></li>
|
||||
</ul>
|
||||
<button class="nav-submit">Submit a Tool</button>
|
||||
</nav>
|
||||
|
||||
<div class="hero">
|
||||
<!-- LEFT -->
|
||||
<div class="hero-left">
|
||||
<div>
|
||||
<div class="hero-stat">500<span>+</span></div>
|
||||
<h1 class="hero-headline">Find the right AI tool in seconds</h1>
|
||||
<p class="hero-sub">500+ tools, 24 categories, updated weekly. The most comprehensive curated directory for AI practitioners.</p>
|
||||
|
||||
<div class="search-box">
|
||||
<input type="text" placeholder="Search tools by name, category, or use case...">
|
||||
<button>
|
||||
<i data-lucide="search" style="width:16px;height:16px;"></i>
|
||||
Search
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="categories">
|
||||
<span class="cat-tag active">Writing</span>
|
||||
<span class="cat-tag">Coding</span>
|
||||
<span class="cat-tag">Image</span>
|
||||
<span class="cat-tag">Video</span>
|
||||
<span class="cat-tag">Audio</span>
|
||||
<span class="cat-tag">Productivity</span>
|
||||
<span class="cat-tag">Research</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- RIGHT -->
|
||||
<div class="hero-right">
|
||||
<div class="list-header">
|
||||
<span>Featured Tools</span>
|
||||
<span>Category</span>
|
||||
</div>
|
||||
|
||||
<div class="tool-item featured">
|
||||
<span class="tool-index">01</span>
|
||||
<div class="tool-info">
|
||||
<div class="tool-name-row">
|
||||
<span class="tool-name">Claude</span>
|
||||
<span class="tool-badge">Editor's Pick</span>
|
||||
</div>
|
||||
<span class="tool-desc">Advanced AI assistant for writing, analysis, and coding with extended context and nuanced reasoning.</span>
|
||||
</div>
|
||||
<span class="tool-category">Writing</span>
|
||||
</div>
|
||||
|
||||
<div class="tool-item">
|
||||
<span class="tool-index">02</span>
|
||||
<div class="tool-info">
|
||||
<div class="tool-name-row">
|
||||
<span class="tool-name">Cursor</span>
|
||||
<span class="tool-badge">Trending</span>
|
||||
</div>
|
||||
<span class="tool-desc">AI-native code editor that understands your entire codebase and accelerates development workflows.</span>
|
||||
</div>
|
||||
<span class="tool-category">Coding</span>
|
||||
</div>
|
||||
|
||||
<div class="tool-item">
|
||||
<span class="tool-index">03</span>
|
||||
<div class="tool-info">
|
||||
<div class="tool-name-row">
|
||||
<span class="tool-name">Midjourney</span>
|
||||
</div>
|
||||
<span class="tool-desc">Leading AI image generation platform producing stunning visuals from text descriptions.</span>
|
||||
</div>
|
||||
<span class="tool-category">Image</span>
|
||||
</div>
|
||||
|
||||
<div class="tool-item">
|
||||
<span class="tool-index">04</span>
|
||||
<div class="tool-info">
|
||||
<div class="tool-name-row">
|
||||
<span class="tool-name">Perplexity</span>
|
||||
</div>
|
||||
<span class="tool-desc">AI-powered search engine with real-time citations and conversational answers.</span>
|
||||
</div>
|
||||
<span class="tool-category">Research</span>
|
||||
</div>
|
||||
|
||||
<div class="tool-item">
|
||||
<span class="tool-index">05</span>
|
||||
<div class="tool-info">
|
||||
<div class="tool-name-row">
|
||||
<span class="tool-name">Runway</span>
|
||||
<span class="tool-badge">New</span>
|
||||
</div>
|
||||
<span class="tool-desc">Gen-3 video generation and editing suite for creators and filmmakers.</span>
|
||||
</div>
|
||||
<span class="tool-category">Video</span>
|
||||
</div>
|
||||
|
||||
<div class="bottom-bar">
|
||||
<span>Showing 5 of 500+ tools</span>
|
||||
<a href="#">
|
||||
View All Tools
|
||||
<i data-lucide="arrow-right" style="width:14px;height:14px;"></i>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
lucide.createIcons();
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 103 KiB |
@@ -0,0 +1,499 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=1440">
|
||||
<title>AI Compass — Takram Style</title>
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600&family=Noto+Serif+SC:wght@300;400;500;600&display=swap" rel="stylesheet">
|
||||
<script src="https://unpkg.com/lucide@latest"></script>
|
||||
<style>
|
||||
* { margin: 0; padding: 0; box-sizing: border-box; }
|
||||
body {
|
||||
width: 1440px;
|
||||
height: 900px;
|
||||
overflow: hidden;
|
||||
margin: 0;
|
||||
font-family: 'Inter', sans-serif;
|
||||
background: #F5F0EB;
|
||||
color: #3A3A35;
|
||||
}
|
||||
|
||||
/* NAV */
|
||||
nav {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 24px 72px;
|
||||
}
|
||||
.nav-logo {
|
||||
font-family: 'Noto Serif SC', serif;
|
||||
font-weight: 500;
|
||||
font-size: 18px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
color: #3A3A35;
|
||||
}
|
||||
.nav-logo svg { color: #A8B5A0; }
|
||||
.nav-right {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 36px;
|
||||
}
|
||||
.nav-links {
|
||||
display: flex;
|
||||
gap: 28px;
|
||||
list-style: none;
|
||||
}
|
||||
.nav-links a {
|
||||
text-decoration: none;
|
||||
color: #8A8A80;
|
||||
font-size: 14px;
|
||||
font-weight: 400;
|
||||
transition: color 0.3s;
|
||||
}
|
||||
.nav-links a:hover { color: #3A3A35; }
|
||||
.nav-cta {
|
||||
font-size: 13px;
|
||||
font-weight: 500;
|
||||
background: transparent;
|
||||
color: #6B8F71;
|
||||
border: 1px solid rgba(107, 143, 113, 0.35);
|
||||
padding: 10px 24px;
|
||||
border-radius: 100px;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s;
|
||||
}
|
||||
.nav-cta:hover { background: rgba(107, 143, 113, 0.06); border-color: #6B8F71; }
|
||||
|
||||
/* MAIN LAYOUT */
|
||||
.main {
|
||||
display: grid;
|
||||
grid-template-columns: 520px 1fr;
|
||||
gap: 0;
|
||||
padding: 20px 72px 0;
|
||||
height: calc(900px - 68px);
|
||||
}
|
||||
|
||||
/* LEFT: HERO TEXT */
|
||||
.hero-text {
|
||||
padding: 40px 48px 40px 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
}
|
||||
.hero-eyebrow {
|
||||
font-size: 11px;
|
||||
font-weight: 500;
|
||||
color: #6B8F71;
|
||||
letter-spacing: 2.5px;
|
||||
text-transform: uppercase;
|
||||
margin-bottom: 16px;
|
||||
opacity: 0.8;
|
||||
}
|
||||
.hero-headline {
|
||||
font-family: 'Noto Serif SC', serif;
|
||||
font-size: 42px;
|
||||
font-weight: 400;
|
||||
line-height: 1.3;
|
||||
letter-spacing: -0.5px;
|
||||
color: #2D3436;
|
||||
}
|
||||
.hero-headline em {
|
||||
font-style: normal;
|
||||
color: #6B8F71;
|
||||
font-weight: 500;
|
||||
}
|
||||
.hero-sub {
|
||||
font-size: 15px;
|
||||
font-weight: 300;
|
||||
color: #8A8A80;
|
||||
margin-top: 16px;
|
||||
line-height: 1.6;
|
||||
max-width: 400px;
|
||||
}
|
||||
|
||||
/* SEARCH */
|
||||
.search-wrapper {
|
||||
margin-top: 32px;
|
||||
position: relative;
|
||||
max-width: 420px;
|
||||
}
|
||||
.search-bar {
|
||||
width: 100%;
|
||||
padding: 16px 50px 16px 20px;
|
||||
font-family: 'Inter', sans-serif;
|
||||
font-size: 14px;
|
||||
font-weight: 300;
|
||||
color: #3A3A35;
|
||||
background: #EDE8DE;
|
||||
border: 1px solid #DDD7CC;
|
||||
border-radius: 14px;
|
||||
outline: none;
|
||||
transition: all 0.3s;
|
||||
}
|
||||
.search-bar::placeholder { color: #B0AEA4; }
|
||||
.search-bar:focus {
|
||||
background: #FFFFFF;
|
||||
border-color: #6B8F71;
|
||||
box-shadow: 0 4px 24px rgba(168,181,160,0.15);
|
||||
}
|
||||
.search-icon {
|
||||
position: absolute;
|
||||
right: 16px;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
color: #6B8F71;
|
||||
}
|
||||
|
||||
/* CATEGORY CHIPS */
|
||||
.categories {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 8px;
|
||||
margin-top: 24px;
|
||||
max-width: 420px;
|
||||
}
|
||||
.cat-chip {
|
||||
font-size: 12px;
|
||||
font-weight: 400;
|
||||
color: #7A7A72;
|
||||
padding: 7px 16px;
|
||||
background: #EDE8DE;
|
||||
border: none;
|
||||
border-radius: 100px;
|
||||
cursor: pointer;
|
||||
transition: all 0.25s;
|
||||
}
|
||||
.cat-chip:hover {
|
||||
background: #E0DBCF;
|
||||
color: #3A3A35;
|
||||
}
|
||||
.cat-chip.active {
|
||||
background: rgba(107, 143, 113, 0.15);
|
||||
color: #6B8F71;
|
||||
border: 1px solid rgba(107, 143, 113, 0.25);
|
||||
}
|
||||
|
||||
/* DIAGRAM LINES (decorative connections) */
|
||||
.diagram-canvas {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
pointer-events: none;
|
||||
z-index: 0;
|
||||
}
|
||||
|
||||
/* RIGHT: TOOL CARDS */
|
||||
.tools-area {
|
||||
position: relative;
|
||||
padding: 20px 0 0 20px;
|
||||
}
|
||||
|
||||
.tools-label {
|
||||
font-size: 10px;
|
||||
font-weight: 500;
|
||||
color: #6B8F71;
|
||||
letter-spacing: 2.5px;
|
||||
text-transform: uppercase;
|
||||
margin-bottom: 20px;
|
||||
padding-left: 4px;
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
.tools-organic {
|
||||
position: relative;
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.tool-card {
|
||||
background: rgba(255,255,255,0.5);
|
||||
border: 1px solid #E8E4DC;
|
||||
border-radius: 14px;
|
||||
padding: 24px;
|
||||
transition: all 0.3s;
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
}
|
||||
.tool-card:hover {
|
||||
box-shadow: 0 8px 32px rgba(0,0,0,0.06);
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
|
||||
/* Organic offset: stagger cards */
|
||||
.tool-card:nth-child(2) {
|
||||
margin-top: 24px;
|
||||
}
|
||||
.tool-card:nth-child(3) {
|
||||
margin-top: -12px;
|
||||
}
|
||||
|
||||
.tool-card-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
.tool-icon {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
border-radius: 12px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.tool-icon.claude { background: rgba(212, 165, 116, 0.15); color: #D4A574; }
|
||||
.tool-icon.cursor { background: rgba(139, 157, 195, 0.12); color: #8B9DC3; }
|
||||
.tool-icon.midjourney { background: rgba(212, 165, 116, 0.12); color: #C4A882; }
|
||||
.tool-icon.perplexity { background: rgba(107, 143, 113, 0.1); color: #6B8F71; }
|
||||
|
||||
.tool-name {
|
||||
font-size: 16px;
|
||||
font-weight: 500;
|
||||
color: #2C2C28;
|
||||
}
|
||||
.tool-cat {
|
||||
font-size: 11px;
|
||||
color: #AAA89E;
|
||||
margin-top: 1px;
|
||||
}
|
||||
.tool-desc {
|
||||
font-size: 13px;
|
||||
font-weight: 300;
|
||||
color: #8A8A80;
|
||||
line-height: 1.55;
|
||||
}
|
||||
.tool-tag {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
margin-top: 14px;
|
||||
font-size: 11px;
|
||||
font-weight: 500;
|
||||
color: #6B8F71;
|
||||
padding: 4px 10px;
|
||||
background: rgba(107,143,113,0.08);
|
||||
border-radius: 100px;
|
||||
}
|
||||
|
||||
/* Connection dots */
|
||||
.conn-dot {
|
||||
position: absolute;
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
border-radius: 50%;
|
||||
background: #6B8F71;
|
||||
opacity: 0.4;
|
||||
}
|
||||
.conn-dot.d1 { top: 80px; left: -10px; }
|
||||
.conn-dot.d2 { top: 200px; left: -14px; }
|
||||
.conn-dot.d3 { bottom: 160px; left: -10px; }
|
||||
|
||||
.conn-line {
|
||||
position: absolute;
|
||||
left: -10px;
|
||||
width: 2px;
|
||||
background: linear-gradient(to bottom, transparent, #A8B5A0, transparent);
|
||||
opacity: 0.2;
|
||||
}
|
||||
.conn-line.l1 { top: 88px; height: 108px; }
|
||||
.conn-line.l2 { top: 208px; height: 100px; }
|
||||
|
||||
/* VIEW MORE */
|
||||
.view-more {
|
||||
text-align: center;
|
||||
margin-top: 16px;
|
||||
}
|
||||
.view-more a {
|
||||
font-size: 13px;
|
||||
font-weight: 400;
|
||||
color: #6B8F71;
|
||||
text-decoration: none;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
transition: color 0.3s;
|
||||
}
|
||||
.view-more a:hover { color: #7A9470; }
|
||||
|
||||
/* FLOATING NOTE */
|
||||
.floating-note {
|
||||
position: absolute;
|
||||
bottom: 40px;
|
||||
left: 72px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
font-size: 12px;
|
||||
color: #B0AEA4;
|
||||
font-weight: 300;
|
||||
}
|
||||
.floating-note .dot {
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
border-radius: 50%;
|
||||
background: #6B8F71;
|
||||
animation: pulse 2s infinite;
|
||||
}
|
||||
@keyframes pulse {
|
||||
0%, 100% { opacity: 0.4; }
|
||||
50% { opacity: 1; }
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<nav>
|
||||
<div class="nav-logo">
|
||||
<svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
|
||||
<circle cx="12" cy="12" r="10"/>
|
||||
<polygon points="16.24 7.76 14.12 14.12 7.76 16.24 9.88 9.88" fill="currentColor" stroke="currentColor"/>
|
||||
</svg>
|
||||
AI Compass
|
||||
</div>
|
||||
<div class="nav-right">
|
||||
<ul class="nav-links">
|
||||
<li><a href="#">Explore</a></li>
|
||||
<li><a href="#">Categories</a></li>
|
||||
<li><a href="#">Weekly Picks</a></li>
|
||||
<li><a href="#">About</a></li>
|
||||
</ul>
|
||||
<button class="nav-cta">Submit Tool</button>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<div class="main">
|
||||
<!-- LEFT -->
|
||||
<div class="hero-text">
|
||||
<p class="hero-eyebrow">Curated Directory</p>
|
||||
<h1 class="hero-headline">Find the right<br>AI tool <em>in seconds</em></h1>
|
||||
<p class="hero-sub">500+ carefully selected tools across 24 categories, updated weekly. Discover, compare, and find the perfect tool for your workflow.</p>
|
||||
|
||||
<div class="search-wrapper">
|
||||
<input class="search-bar" type="text" placeholder="Search tools, categories, or use cases...">
|
||||
<i data-lucide="search" class="search-icon" style="width:16px;height:16px;"></i>
|
||||
</div>
|
||||
|
||||
<div class="categories">
|
||||
<span class="cat-chip active">Writing</span>
|
||||
<span class="cat-chip">Coding</span>
|
||||
<span class="cat-chip">Image</span>
|
||||
<span class="cat-chip">Video</span>
|
||||
<span class="cat-chip">Audio</span>
|
||||
<span class="cat-chip">Productivity</span>
|
||||
<span class="cat-chip">Research</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- RIGHT -->
|
||||
<div class="tools-area">
|
||||
<div class="conn-dot d1"></div>
|
||||
<div class="conn-line l1"></div>
|
||||
<div class="conn-dot d2"></div>
|
||||
<div class="conn-line l2"></div>
|
||||
<div class="conn-dot d3"></div>
|
||||
|
||||
<p class="tools-label">Featured Discoveries</p>
|
||||
|
||||
<div class="tools-organic">
|
||||
<div class="tool-card">
|
||||
<div class="tool-card-header">
|
||||
<div class="tool-icon claude">
|
||||
<i data-lucide="sparkles" style="width:18px;height:18px;"></i>
|
||||
</div>
|
||||
<div>
|
||||
<div class="tool-name">Claude</div>
|
||||
<div class="tool-cat">Writing & Analysis</div>
|
||||
</div>
|
||||
</div>
|
||||
<p class="tool-desc">Advanced AI assistant for writing, analysis, and coding with nuanced reasoning and extended context window.</p>
|
||||
<span class="tool-tag">
|
||||
<i data-lucide="star" style="width:10px;height:10px;"></i>
|
||||
Editor's Pick
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div class="tool-card">
|
||||
<div class="tool-card-header">
|
||||
<div class="tool-icon cursor">
|
||||
<i data-lucide="code-2" style="width:18px;height:18px;"></i>
|
||||
</div>
|
||||
<div>
|
||||
<div class="tool-name">Cursor</div>
|
||||
<div class="tool-cat">Development</div>
|
||||
</div>
|
||||
</div>
|
||||
<p class="tool-desc">AI-native code editor that deeply understands your codebase and accelerates every development task.</p>
|
||||
<span class="tool-tag">
|
||||
<i data-lucide="trending-up" style="width:10px;height:10px;"></i>
|
||||
Trending
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div class="tool-card">
|
||||
<div class="tool-card-header">
|
||||
<div class="tool-icon midjourney">
|
||||
<i data-lucide="image" style="width:18px;height:18px;"></i>
|
||||
</div>
|
||||
<div>
|
||||
<div class="tool-name">Midjourney</div>
|
||||
<div class="tool-cat">Image Generation</div>
|
||||
</div>
|
||||
</div>
|
||||
<p class="tool-desc">Create stunning, detailed visuals from text descriptions with the leading AI image generation platform.</p>
|
||||
<span class="tool-tag">
|
||||
<i data-lucide="heart" style="width:10px;height:10px;"></i>
|
||||
Popular
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div class="tool-card">
|
||||
<div class="tool-card-header">
|
||||
<div class="tool-icon perplexity">
|
||||
<i data-lucide="globe" style="width:18px;height:18px;"></i>
|
||||
</div>
|
||||
<div>
|
||||
<div class="tool-name">Perplexity</div>
|
||||
<div class="tool-cat">Research & Search</div>
|
||||
</div>
|
||||
</div>
|
||||
<p class="tool-desc">AI-powered search delivering real-time answers with citations in a natural conversational format.</p>
|
||||
<span class="tool-tag">
|
||||
<i data-lucide="compass" style="width:10px;height:10px;"></i>
|
||||
Staff Pick
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="view-more">
|
||||
<a href="#">
|
||||
Explore all 500+ tools
|
||||
<i data-lucide="arrow-right" style="width:14px;height:14px;"></i>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="floating-note">
|
||||
<span class="dot"></span>
|
||||
Updated weekly with new discoveries
|
||||
</div>
|
||||
|
||||
<!-- Spec annotation -->
|
||||
<svg style="position:absolute;bottom:60px;right:72px;opacity:0.15;" width="100" height="40" viewBox="0 0 100 40" fill="none">
|
||||
<line x1="0" y1="20" x2="60" y2="20" stroke="#6B8F71" stroke-width="0.5"/>
|
||||
<circle cx="60" cy="20" r="2" fill="none" stroke="#6B8F71" stroke-width="0.5"/>
|
||||
<text x="68" y="23" font-family="Inter" font-size="8" fill="#6B8F71" letter-spacing="0.5">500+ tools</text>
|
||||
</svg>
|
||||
|
||||
<script>
|
||||
lucide.createIcons();
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 119 KiB |
@@ -0,0 +1,562 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=1440">
|
||||
<title>Inkwell — AI Writing Assistant</title>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@200;300;400;500;600&display=swap" rel="stylesheet">
|
||||
<script src="https://unpkg.com/lucide@latest"></script>
|
||||
<style>
|
||||
* { margin: 0; padding: 0; box-sizing: border-box; }
|
||||
body {
|
||||
width: 1440px;
|
||||
height: 900px;
|
||||
overflow: hidden;
|
||||
margin: 0;
|
||||
background: #FAFAF8;
|
||||
font-family: 'Inter', sans-serif;
|
||||
color: #2C2C2C;
|
||||
}
|
||||
|
||||
.page {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: 40px 80px 40px 80px;
|
||||
}
|
||||
|
||||
/* NAV */
|
||||
.nav-bar {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 60px;
|
||||
}
|
||||
|
||||
.logo {
|
||||
font-size: 18px;
|
||||
font-weight: 500;
|
||||
letter-spacing: 3px;
|
||||
text-transform: uppercase;
|
||||
color: #2C2C2C;
|
||||
}
|
||||
|
||||
.nav-links {
|
||||
display: flex;
|
||||
gap: 40px;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.nav-links a {
|
||||
font-size: 13px;
|
||||
font-weight: 400;
|
||||
color: #999;
|
||||
text-decoration: none;
|
||||
letter-spacing: 0.5px;
|
||||
}
|
||||
|
||||
.nav-links a:hover {
|
||||
color: #2C2C2C;
|
||||
}
|
||||
|
||||
/* HERO AREA */
|
||||
.hero-section {
|
||||
flex: 1;
|
||||
display: grid;
|
||||
grid-template-columns: 440px 1fr;
|
||||
gap: 80px;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.hero-text {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 28px;
|
||||
}
|
||||
|
||||
.headline {
|
||||
font-size: 52px;
|
||||
font-weight: 200;
|
||||
line-height: 1.15;
|
||||
letter-spacing: -1.5px;
|
||||
color: #2C2C2C;
|
||||
}
|
||||
|
||||
.headline em {
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
color: #2C2C2C;
|
||||
position: relative;
|
||||
}
|
||||
.headline em::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
bottom: 4px;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 1px;
|
||||
background: #D4A574;
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
.subtitle {
|
||||
font-size: 16px;
|
||||
font-weight: 300;
|
||||
line-height: 1.7;
|
||||
color: #999;
|
||||
max-width: 380px;
|
||||
}
|
||||
|
||||
.cta-button {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
padding: 14px 32px;
|
||||
background: #2C2C2C;
|
||||
color: #FAFAF8;
|
||||
font-family: 'Inter', sans-serif;
|
||||
font-size: 13px;
|
||||
font-weight: 400;
|
||||
letter-spacing: 0.5px;
|
||||
text-decoration: none;
|
||||
border: none;
|
||||
border-radius: 2px;
|
||||
cursor: pointer;
|
||||
width: fit-content;
|
||||
transition: background 0.3s;
|
||||
}
|
||||
|
||||
.cta-button:hover {
|
||||
background: #3C3C3C;
|
||||
}
|
||||
|
||||
.social-proof {
|
||||
font-size: 12px;
|
||||
font-weight: 400;
|
||||
color: #bbb;
|
||||
letter-spacing: 0.5px;
|
||||
}
|
||||
|
||||
/* FEATURES — minimal */
|
||||
.features-row {
|
||||
display: flex;
|
||||
gap: 48px;
|
||||
margin-top: 8px;
|
||||
}
|
||||
|
||||
.feature-item {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.feature-icon {
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
border-radius: 50%;
|
||||
background: rgba(212, 165, 116, 0.12);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-shrink: 0;
|
||||
margin-top: 1px;
|
||||
}
|
||||
|
||||
.feature-icon svg {
|
||||
color: #D4A574;
|
||||
}
|
||||
|
||||
.feature-label {
|
||||
font-size: 13px;
|
||||
font-weight: 500;
|
||||
color: #2C2C2C;
|
||||
margin-bottom: 2px;
|
||||
}
|
||||
|
||||
.feature-desc {
|
||||
font-size: 12px;
|
||||
font-weight: 300;
|
||||
color: #aaa;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
/* EDITOR MOCKUP — floating card */
|
||||
.editor-wrapper {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.editor-card {
|
||||
width: 100%;
|
||||
max-width: 620px;
|
||||
height: 580px;
|
||||
background: #FFFFFF;
|
||||
border-radius: 2px;
|
||||
box-shadow:
|
||||
0 4px 6px rgba(0,0,0,0.02),
|
||||
0 12px 28px rgba(0,0,0,0.06),
|
||||
0 40px 80px rgba(0,0,0,0.04);
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 190px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.editor-main {
|
||||
padding: 32px 28px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.editor-toolbar {
|
||||
display: flex;
|
||||
gap: 4px;
|
||||
margin-bottom: 24px;
|
||||
padding-bottom: 16px;
|
||||
border-bottom: 1px solid #F0EDE8;
|
||||
}
|
||||
|
||||
.tb-btn {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
border-radius: 2px;
|
||||
border: none;
|
||||
background: transparent;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: #bbb;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.tb-btn.active {
|
||||
background: #F5F0E8;
|
||||
color: #D4A574;
|
||||
}
|
||||
|
||||
.doc-title {
|
||||
font-size: 24px;
|
||||
font-weight: 500;
|
||||
letter-spacing: -0.5px;
|
||||
color: #2C2C2C;
|
||||
margin-bottom: 18px;
|
||||
}
|
||||
|
||||
.doc-paragraph {
|
||||
font-size: 14px;
|
||||
font-weight: 300;
|
||||
line-height: 1.9;
|
||||
color: #666;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.doc-paragraph .ai-enhanced {
|
||||
background: linear-gradient(120deg, rgba(212,165,116,0.1) 0%, rgba(212,165,116,0.18) 100%);
|
||||
border-radius: 3px;
|
||||
padding: 1px 4px;
|
||||
}
|
||||
|
||||
.doc-h2 {
|
||||
font-size: 17px;
|
||||
font-weight: 500;
|
||||
color: #2C2C2C;
|
||||
margin-bottom: 12px;
|
||||
margin-top: 4px;
|
||||
}
|
||||
|
||||
.doc-list {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.doc-list li {
|
||||
font-size: 13px;
|
||||
font-weight: 300;
|
||||
color: #777;
|
||||
line-height: 1.8;
|
||||
padding-left: 16px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.doc-list li::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 10px;
|
||||
width: 5px;
|
||||
height: 5px;
|
||||
border-radius: 50%;
|
||||
background: #D4A574;
|
||||
}
|
||||
|
||||
.cursor-line {
|
||||
display: inline-block;
|
||||
width: 1.5px;
|
||||
height: 15px;
|
||||
background: #D4A574;
|
||||
animation: pulse 1.2s ease-in-out infinite;
|
||||
vertical-align: text-bottom;
|
||||
margin-left: 1px;
|
||||
}
|
||||
|
||||
@keyframes pulse {
|
||||
0%, 100% { opacity: 1; }
|
||||
50% { opacity: 0.2; }
|
||||
}
|
||||
|
||||
/* AI SIDEBAR */
|
||||
.ai-sidebar {
|
||||
background: #FDFCFA;
|
||||
border-left: 1px solid #F0EDE8;
|
||||
padding: 24px 18px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.sidebar-title {
|
||||
font-size: 11px;
|
||||
font-weight: 500;
|
||||
letter-spacing: 2px;
|
||||
text-transform: uppercase;
|
||||
color: #D4A574;
|
||||
padding-bottom: 12px;
|
||||
border-bottom: 1px solid #F0EDE8;
|
||||
}
|
||||
|
||||
.ai-card {
|
||||
background: #fff;
|
||||
border-radius: 2px;
|
||||
padding: 14px;
|
||||
border: 1px solid #F0EDE8;
|
||||
}
|
||||
|
||||
.ai-card-label {
|
||||
font-size: 10px;
|
||||
font-weight: 500;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 1px;
|
||||
color: #bbb;
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
|
||||
.ai-card-content {
|
||||
font-size: 13px;
|
||||
font-weight: 400;
|
||||
color: #2C2C2C;
|
||||
}
|
||||
|
||||
.voice-score {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
margin-top: 8px;
|
||||
}
|
||||
|
||||
.score-track {
|
||||
flex: 1;
|
||||
height: 3px;
|
||||
background: #F0EDE8;
|
||||
border-radius: 2px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.score-fill {
|
||||
width: 92%;
|
||||
height: 100%;
|
||||
background: #D4A574;
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
.score-num {
|
||||
font-size: 12px;
|
||||
font-weight: 500;
|
||||
color: #D4A574;
|
||||
}
|
||||
|
||||
.platform-tags {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 6px;
|
||||
margin-top: 8px;
|
||||
}
|
||||
|
||||
.p-tag {
|
||||
font-size: 10px;
|
||||
font-weight: 400;
|
||||
padding: 4px 10px;
|
||||
border-radius: 2px;
|
||||
background: #F5F0E8;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.p-tag.active {
|
||||
background: rgba(212,165,116,0.15);
|
||||
color: #D4A574;
|
||||
}
|
||||
|
||||
.ai-suggestion {
|
||||
font-size: 12px;
|
||||
font-weight: 300;
|
||||
color: #888;
|
||||
line-height: 1.6;
|
||||
padding: 12px 14px;
|
||||
background: #fff;
|
||||
border-radius: 2px;
|
||||
border: 1px solid #F0EDE8;
|
||||
}
|
||||
|
||||
.ai-suggestion .label {
|
||||
font-size: 10px;
|
||||
font-weight: 500;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.8px;
|
||||
color: #bbb;
|
||||
display: block;
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
|
||||
.refine-btn {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 8px;
|
||||
width: 100%;
|
||||
padding: 12px;
|
||||
background: #2C2C2C;
|
||||
color: #fff;
|
||||
border: none;
|
||||
border-radius: 2px;
|
||||
font-family: 'Inter', sans-serif;
|
||||
font-size: 12px;
|
||||
font-weight: 500;
|
||||
cursor: pointer;
|
||||
letter-spacing: 0.5px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="page">
|
||||
<!-- NAV -->
|
||||
<nav class="nav-bar">
|
||||
<div class="logo">Inkwell</div>
|
||||
<div class="nav-links">
|
||||
<a href="#">Features</a>
|
||||
<a href="#">Pricing</a>
|
||||
<a href="#">Stories</a>
|
||||
<a href="#" class="cta-button" style="padding: 10px 24px; font-size: 12px; margin: 0;">Start Writing</a>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<!-- HERO -->
|
||||
<div class="hero-section">
|
||||
<!-- LEFT: Text -->
|
||||
<div class="hero-text">
|
||||
<h1 class="headline">Write better,<br>faster, with<br><em>your own voice</em></h1>
|
||||
<p class="subtitle">AI that learns your style, not replaces it. Publish across WeChat, Xiaohongshu, and video scripts while sounding unmistakably you.</p>
|
||||
|
||||
<div class="features-row">
|
||||
<div class="feature-item">
|
||||
<div class="feature-icon">
|
||||
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M12 20h9"/><path d="M16.5 3.5a2.121 2.121 0 0 1 3 3L7 19l-4 1 1-4L16.5 3.5z"/></svg>
|
||||
</div>
|
||||
<div>
|
||||
<div class="feature-label">Style Learning</div>
|
||||
<div class="feature-desc">Adapts to your voice</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="feature-item">
|
||||
<div class="feature-icon">
|
||||
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><rect x="2" y="3" width="20" height="14" rx="2" ry="2"/><line x1="8" y1="21" x2="16" y2="21"/><line x1="12" y1="17" x2="12" y2="21"/></svg>
|
||||
</div>
|
||||
<div>
|
||||
<div class="feature-label">Multi-Platform</div>
|
||||
<div class="feature-desc">One tool, every format</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="feature-item">
|
||||
<div class="feature-icon">
|
||||
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"/></svg>
|
||||
</div>
|
||||
<div>
|
||||
<div class="feature-label">Human Touch</div>
|
||||
<div class="feature-desc">Warmth-preserving edit</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="display: flex; align-items: center; gap: 24px;">
|
||||
<a href="#" class="cta-button">
|
||||
Start Writing
|
||||
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><line x1="5" y1="12" x2="19" y2="12"/><polyline points="12 5 19 12 12 19"/></svg>
|
||||
</a>
|
||||
<span class="social-proof">Trusted by 10,000+ creators</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- RIGHT: Editor Card -->
|
||||
<div class="editor-wrapper">
|
||||
<div class="editor-card">
|
||||
<div class="editor-main">
|
||||
<div class="editor-toolbar">
|
||||
<button class="tb-btn active"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><path d="M6 4h8a4 4 0 0 1 4 4 4 4 0 0 1-4 4H6z"/><path d="M6 12h9a4 4 0 0 1 4 4 4 4 0 0 1-4 4H6z"/></svg></button>
|
||||
<button class="tb-btn"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="19" y1="4" x2="10" y2="4"/><line x1="14" y1="20" x2="5" y2="20"/><line x1="15" y1="4" x2="9" y2="20"/></svg></button>
|
||||
<button class="tb-btn"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="21" y1="6" x2="3" y2="6"/><line x1="15" y1="12" x2="3" y2="12"/><line x1="17" y1="18" x2="3" y2="18"/></svg></button>
|
||||
<button class="tb-btn"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"/><path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"/></svg></button>
|
||||
</div>
|
||||
|
||||
<div class="doc-title">Morning Routines for Creative Minds</div>
|
||||
<div class="doc-paragraph">
|
||||
The best ideas rarely arrive on schedule. They come in the quiet space between waking and doing — <span class="ai-enhanced">that liminal moment when the mind is loose enough to wander but awake enough to notice</span>.
|
||||
</div>
|
||||
<div class="doc-h2">Finding Your Rhythm</div>
|
||||
<div class="doc-paragraph">
|
||||
Productivity culture tells us to optimize every hour. But creation is not production. The most prolific writers I know guard their mornings like sacred ground.<span class="cursor-line"></span>
|
||||
</div>
|
||||
<ul class="doc-list">
|
||||
<li>Start before checking your phone</li>
|
||||
<li>Write the ugly first draft freely</li>
|
||||
<li>Let AI handle polish, not direction</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="ai-sidebar">
|
||||
<div class="sidebar-title">Inkwell AI</div>
|
||||
|
||||
<div class="ai-card">
|
||||
<div class="ai-card-label">Voice Match</div>
|
||||
<div class="ai-card-content">Your Style</div>
|
||||
<div class="voice-score">
|
||||
<div class="score-track"><div class="score-fill"></div></div>
|
||||
<div class="score-num">92%</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="ai-card">
|
||||
<div class="ai-card-label">Publishing To</div>
|
||||
<div class="ai-card-content">WeChat Article</div>
|
||||
<div class="platform-tags">
|
||||
<span class="p-tag active">WeChat</span>
|
||||
<span class="p-tag">XHS</span>
|
||||
<span class="p-tag">Script</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="ai-suggestion">
|
||||
<span class="label">Suggestion</span>
|
||||
The second paragraph is beautiful. Consider adding a concrete personal example to ground the abstract idea.
|
||||
</div>
|
||||
|
||||
<button class="refine-btn">
|
||||
<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 3v18"/><path d="M3 12h18"/></svg>
|
||||
Refine with AI
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 128 KiB |
@@ -0,0 +1,548 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=1440">
|
||||
<title>Inkwell — AI Writing Assistant</title>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Space+Grotesk:wght@400;500;600;700&display=swap" rel="stylesheet">
|
||||
<script src="https://unpkg.com/lucide@latest"></script>
|
||||
<style>
|
||||
* { margin: 0; padding: 0; box-sizing: border-box; }
|
||||
body {
|
||||
width: 1440px;
|
||||
height: 900px;
|
||||
overflow: hidden;
|
||||
margin: 0;
|
||||
background: #FFFFFF;
|
||||
font-family: 'Helvetica Neue', Arial, sans-serif;
|
||||
color: #111111;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
/* Grid overlay for Swiss design feel */
|
||||
body::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0; left: 0; right: 0; bottom: 0;
|
||||
background:
|
||||
repeating-linear-gradient(90deg, transparent, transparent 119px, rgba(0,0,0,0.03) 119px, rgba(0,0,0,0.03) 120px),
|
||||
repeating-linear-gradient(0deg, transparent, transparent 59px, rgba(0,0,0,0.02) 59px, rgba(0,0,0,0.02) 60px);
|
||||
pointer-events: none;
|
||||
z-index: 0;
|
||||
}
|
||||
|
||||
.container {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
height: 100%;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
/* LEFT PANEL */
|
||||
.left-panel {
|
||||
padding: 60px 60px 48px 80px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
border-right: 2px solid #111;
|
||||
}
|
||||
|
||||
.top-bar {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.logo {
|
||||
font-family: 'Helvetica Neue', Arial, sans-serif;
|
||||
font-size: 20px;
|
||||
font-weight: 700;
|
||||
letter-spacing: -0.5px;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.logo span {
|
||||
color: #E63946;
|
||||
}
|
||||
|
||||
.nav {
|
||||
display: flex;
|
||||
gap: 28px;
|
||||
font-size: 13px;
|
||||
font-weight: 500;
|
||||
letter-spacing: 0.5px;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.nav a {
|
||||
color: #111;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.hero-content {
|
||||
margin-top: -20px;
|
||||
}
|
||||
|
||||
.headline {
|
||||
font-family: 'Helvetica Neue', Arial, sans-serif;
|
||||
font-size: 86px;
|
||||
font-weight: 700;
|
||||
line-height: 0.95;
|
||||
letter-spacing: -4px;
|
||||
margin-bottom: 28px;
|
||||
}
|
||||
|
||||
.headline em {
|
||||
font-style: italic;
|
||||
color: #E63946;
|
||||
}
|
||||
|
||||
.subtitle {
|
||||
font-size: 18px;
|
||||
font-weight: 400;
|
||||
color: #555;
|
||||
line-height: 1.5;
|
||||
max-width: 420px;
|
||||
margin-bottom: 36px;
|
||||
}
|
||||
|
||||
.cta-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 24px;
|
||||
}
|
||||
|
||||
.cta-button {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
padding: 16px 36px;
|
||||
background: #E63946;
|
||||
color: #fff;
|
||||
font-family: 'Helvetica Neue', Arial, sans-serif;
|
||||
font-size: 15px;
|
||||
font-weight: 600;
|
||||
letter-spacing: 0.5px;
|
||||
text-transform: uppercase;
|
||||
text-decoration: none;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.social-proof {
|
||||
font-size: 13px;
|
||||
color: #888;
|
||||
letter-spacing: 0.3px;
|
||||
}
|
||||
|
||||
.social-proof strong {
|
||||
color: #111;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
/* FEATURES — strict 3 col */
|
||||
.features-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
gap: 0;
|
||||
border-top: 2px solid #111;
|
||||
}
|
||||
|
||||
.feature-item {
|
||||
padding: 20px 0;
|
||||
border-right: 1px solid #ddd;
|
||||
}
|
||||
|
||||
.feature-item:last-child {
|
||||
border-right: none;
|
||||
}
|
||||
|
||||
.feature-item:first-child {
|
||||
padding-right: 16px;
|
||||
}
|
||||
|
||||
.feature-item:nth-child(2) {
|
||||
padding: 20px 16px;
|
||||
}
|
||||
|
||||
.feature-item:last-child {
|
||||
padding-left: 16px;
|
||||
}
|
||||
|
||||
.feature-number {
|
||||
font-family: 'Helvetica Neue', Arial, sans-serif;
|
||||
font-size: 11px;
|
||||
font-weight: 700;
|
||||
color: #E63946;
|
||||
letter-spacing: 1px;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.feature-title {
|
||||
font-family: 'Helvetica Neue', Arial, sans-serif;
|
||||
font-size: 14px;
|
||||
font-weight: 700;
|
||||
letter-spacing: -0.3px;
|
||||
margin-bottom: 4px;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.feature-desc {
|
||||
font-size: 12px;
|
||||
color: #777;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
/* RIGHT PANEL — Editor mockup as wireframe */
|
||||
.right-panel {
|
||||
background: #F7F7F7;
|
||||
padding: 48px 60px 48px 48px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.editor-mockup {
|
||||
width: 100%;
|
||||
max-width: 580px;
|
||||
height: 680px;
|
||||
background: #fff;
|
||||
border: 2px solid #111;
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 200px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
/* Grid reference lines on mockup */
|
||||
.editor-mockup::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0; left: 0; right: 0; bottom: 0;
|
||||
background:
|
||||
repeating-linear-gradient(0deg, transparent, transparent 39px, rgba(0,0,0,0.03) 39px, rgba(0,0,0,0.03) 40px);
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.editor-main {
|
||||
padding: 28px 24px;
|
||||
border-right: 2px solid #111;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.editor-toolbar {
|
||||
display: flex;
|
||||
gap: 6px;
|
||||
padding-bottom: 16px;
|
||||
border-bottom: 1px solid #ddd;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.toolbar-btn {
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
border: 1px solid #ccc;
|
||||
background: #fff;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.toolbar-btn.active {
|
||||
background: #111;
|
||||
border-color: #111;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.editor-title-line {
|
||||
font-family: 'Helvetica Neue', Arial, sans-serif;
|
||||
font-size: 22px;
|
||||
font-weight: 700;
|
||||
letter-spacing: -0.5px;
|
||||
margin-bottom: 16px;
|
||||
color: #111;
|
||||
}
|
||||
|
||||
.editor-text-block {
|
||||
font-size: 13px;
|
||||
line-height: 1.8;
|
||||
color: #444;
|
||||
margin-bottom: 14px;
|
||||
}
|
||||
|
||||
.editor-text-block .highlight {
|
||||
background: rgba(230, 57, 70, 0.12);
|
||||
border-bottom: 2px solid #E63946;
|
||||
padding: 0 2px;
|
||||
}
|
||||
|
||||
.editor-h2 {
|
||||
font-family: 'Helvetica Neue', Arial, sans-serif;
|
||||
font-size: 16px;
|
||||
font-weight: 700;
|
||||
margin-bottom: 10px;
|
||||
margin-top: 6px;
|
||||
color: #111;
|
||||
}
|
||||
|
||||
.editor-list {
|
||||
font-size: 13px;
|
||||
line-height: 2;
|
||||
color: #555;
|
||||
padding-left: 18px;
|
||||
}
|
||||
|
||||
.editor-cursor {
|
||||
display: inline-block;
|
||||
width: 2px;
|
||||
height: 16px;
|
||||
background: #E63946;
|
||||
animation: blink 1s step-end infinite;
|
||||
vertical-align: text-bottom;
|
||||
margin-left: 2px;
|
||||
}
|
||||
|
||||
@keyframes blink {
|
||||
50% { opacity: 0; }
|
||||
}
|
||||
|
||||
/* AI SIDEBAR */
|
||||
.ai-sidebar {
|
||||
padding: 20px 16px;
|
||||
background: #FAFAFA;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 14px;
|
||||
}
|
||||
|
||||
.sidebar-header {
|
||||
font-family: 'Helvetica Neue', Arial, sans-serif;
|
||||
font-size: 11px;
|
||||
font-weight: 700;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 1.5px;
|
||||
color: #E63946;
|
||||
padding-bottom: 10px;
|
||||
border-bottom: 2px solid #111;
|
||||
}
|
||||
|
||||
.sidebar-card {
|
||||
padding: 12px;
|
||||
border: 1px solid #ddd;
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
.sidebar-card-label {
|
||||
font-size: 10px;
|
||||
font-weight: 700;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.8px;
|
||||
color: #999;
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
|
||||
.sidebar-card-value {
|
||||
font-size: 13px;
|
||||
font-weight: 500;
|
||||
color: #111;
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
.style-meter {
|
||||
display: flex;
|
||||
gap: 3px;
|
||||
margin-top: 8px;
|
||||
}
|
||||
|
||||
.meter-bar {
|
||||
height: 4px;
|
||||
flex: 1;
|
||||
background: #E0E0E0;
|
||||
}
|
||||
|
||||
.meter-bar.filled {
|
||||
background: #E63946;
|
||||
}
|
||||
|
||||
.sidebar-suggestion {
|
||||
padding: 10px 12px;
|
||||
background: #fff;
|
||||
border: 1px solid #ddd;
|
||||
font-size: 12px;
|
||||
color: #555;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.sidebar-suggestion strong {
|
||||
color: #111;
|
||||
display: block;
|
||||
font-size: 10px;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.8px;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.sidebar-action {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
padding: 10px 12px;
|
||||
background: #111;
|
||||
color: #fff;
|
||||
font-size: 11px;
|
||||
font-weight: 600;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.5px;
|
||||
cursor: pointer;
|
||||
border: none;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.tag-row {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 4px;
|
||||
margin-top: 6px;
|
||||
}
|
||||
|
||||
.tag {
|
||||
font-size: 10px;
|
||||
padding: 2px 8px;
|
||||
border: 1px solid #ccc;
|
||||
color: #666;
|
||||
letter-spacing: 0.3px;
|
||||
}
|
||||
|
||||
/* Corner mark */
|
||||
.right-panel::after {
|
||||
content: 'INKWELL V1.0';
|
||||
position: absolute;
|
||||
bottom: 20px;
|
||||
right: 24px;
|
||||
font-family: 'Helvetica Neue', Arial, sans-serif;
|
||||
font-size: 10px;
|
||||
letter-spacing: 2px;
|
||||
color: #bbb;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="container">
|
||||
<!-- LEFT PANEL -->
|
||||
<div class="left-panel">
|
||||
<div class="top-bar">
|
||||
<div class="logo">INK<span>WELL</span></div>
|
||||
<nav class="nav">
|
||||
<a href="#">Features</a>
|
||||
<a href="#">Pricing</a>
|
||||
<a href="#">Blog</a>
|
||||
</nav>
|
||||
</div>
|
||||
|
||||
<div class="hero-content">
|
||||
<h1 class="headline">Write<br>better,<br>faster,<br>with <em>your</em><br>own voice.</h1>
|
||||
<p class="subtitle">AI that learns your style, not replaces it. Craft content for WeChat, Xiaohongshu, and video scripts — all in your authentic tone.</p>
|
||||
<div class="cta-row">
|
||||
<a href="#" class="cta-button">
|
||||
Start Writing
|
||||
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><line x1="5" y1="12" x2="19" y2="12"/><polyline points="12 5 19 12 12 19"/></svg>
|
||||
</a>
|
||||
<span class="social-proof">Trusted by <strong>10,000+</strong> creators</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="features-grid">
|
||||
<div class="feature-item">
|
||||
<div class="feature-number">01</div>
|
||||
<div class="feature-title">Style Learning</div>
|
||||
<div class="feature-desc">Adapts to your unique voice through continuous analysis of your writing patterns.</div>
|
||||
</div>
|
||||
<div class="feature-item">
|
||||
<div class="feature-number">02</div>
|
||||
<div class="feature-title">Multi-Platform</div>
|
||||
<div class="feature-desc">WeChat articles, Xiaohongshu posts, video scripts. One tool, every format.</div>
|
||||
</div>
|
||||
<div class="feature-item">
|
||||
<div class="feature-number">03</div>
|
||||
<div class="feature-title">Human-Touch</div>
|
||||
<div class="feature-desc">Proofreading that preserves warmth and removes robotic phrasing.</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- RIGHT PANEL — Editor Mockup -->
|
||||
<div class="right-panel">
|
||||
<div class="editor-mockup">
|
||||
<div class="editor-main">
|
||||
<div class="editor-toolbar">
|
||||
<div class="toolbar-btn active"><svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3"><path d="M6 4h8a4 4 0 0 1 4 4 4 4 0 0 1-4 4H6z"/><path d="M6 12h9a4 4 0 0 1 4 4 4 4 0 0 1-4 4H6z"/></svg></div>
|
||||
<div class="toolbar-btn"><svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><line x1="19" y1="4" x2="10" y2="4"/><line x1="14" y1="20" x2="5" y2="20"/><line x1="15" y1="4" x2="9" y2="20"/></svg></div>
|
||||
<div class="toolbar-btn"><svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><line x1="21" y1="6" x2="3" y2="6"/><line x1="15" y1="12" x2="3" y2="12"/><line x1="17" y1="18" x2="3" y2="18"/></svg></div>
|
||||
<div class="toolbar-btn"><svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><line x1="8" y1="6" x2="21" y2="6"/><line x1="8" y1="12" x2="21" y2="12"/><line x1="8" y1="18" x2="21" y2="18"/><line x1="3" y1="6" x2="3.01" y2="6"/><line x1="3" y1="12" x2="3.01" y2="12"/><line x1="3" y1="18" x2="3.01" y2="18"/></svg></div>
|
||||
</div>
|
||||
|
||||
<div class="editor-title-line">The Future of Content Creation</div>
|
||||
<div class="editor-text-block">
|
||||
Every creator faces the same tension: the desire to produce more content versus the need to maintain quality and authenticity. <span class="highlight">AI doesn't have to mean losing your voice</span> — it can mean amplifying it.
|
||||
</div>
|
||||
<div class="editor-h2">Why Authenticity Matters</div>
|
||||
<div class="editor-text-block">
|
||||
Readers can tell. They feel the difference between words that carry genuine experience and words assembled by algorithm. The goal isn't to write <em>more</em> — it's to write more of what only you can write.<span class="editor-cursor"></span>
|
||||
</div>
|
||||
<div class="editor-h2">Key Principles</div>
|
||||
<ol class="editor-list">
|
||||
<li>Write from personal experience first</li>
|
||||
<li>Use AI for refinement, not replacement</li>
|
||||
<li>Adapt tone for each platform</li>
|
||||
</ol>
|
||||
</div>
|
||||
|
||||
<div class="ai-sidebar">
|
||||
<div class="sidebar-header">AI Assistant</div>
|
||||
|
||||
<div class="sidebar-card">
|
||||
<div class="sidebar-card-label">Style Match</div>
|
||||
<div class="sidebar-card-value">92% Voice Fidelity</div>
|
||||
<div class="style-meter">
|
||||
<div class="meter-bar filled"></div>
|
||||
<div class="meter-bar filled"></div>
|
||||
<div class="meter-bar filled"></div>
|
||||
<div class="meter-bar filled"></div>
|
||||
<div class="meter-bar"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="sidebar-card">
|
||||
<div class="sidebar-card-label">Target</div>
|
||||
<div class="sidebar-card-value">WeChat Article</div>
|
||||
<div class="tag-row">
|
||||
<span class="tag">WeChat</span>
|
||||
<span class="tag">XHS</span>
|
||||
<span class="tag">Script</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="sidebar-suggestion">
|
||||
<strong>Suggestion</strong>
|
||||
Consider opening with a specific anecdote to strengthen the personal connection.
|
||||
</div>
|
||||
|
||||
<div class="sidebar-suggestion">
|
||||
<strong>Tone Check</strong>
|
||||
Paragraph 2 reads slightly formal. Soften with a conversational phrase.
|
||||
</div>
|
||||
|
||||
<button class="sidebar-action">
|
||||
<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><polygon points="13 2 3 14 12 14 11 22 21 10 12 10 13 2"/></svg>
|
||||
Refine Selection
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 147 KiB |
@@ -0,0 +1,696 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=1440">
|
||||
<title>Inkwell — AI Writing Assistant</title>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500&family=Noto+Serif+SC:wght@400;500;600;700&display=swap" rel="stylesheet">
|
||||
<script src="https://unpkg.com/lucide@latest"></script>
|
||||
<style>
|
||||
* { margin: 0; padding: 0; box-sizing: border-box; }
|
||||
body {
|
||||
width: 1440px;
|
||||
height: 900px;
|
||||
overflow: hidden;
|
||||
margin: 0;
|
||||
background: #F5F0EB;
|
||||
font-family: 'Inter', sans-serif;
|
||||
color: #3D3D3D;
|
||||
}
|
||||
|
||||
.page {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
/* NAV */
|
||||
.nav-bar {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 28px 64px;
|
||||
}
|
||||
|
||||
.logo {
|
||||
font-family: 'Noto Serif SC', serif;
|
||||
font-size: 20px;
|
||||
font-weight: 600;
|
||||
color: #5C5347;
|
||||
letter-spacing: 1px;
|
||||
}
|
||||
|
||||
.nav-right {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 36px;
|
||||
}
|
||||
|
||||
.nav-right a {
|
||||
font-size: 13px;
|
||||
font-weight: 400;
|
||||
color: #8A8278;
|
||||
text-decoration: none;
|
||||
letter-spacing: 0.3px;
|
||||
}
|
||||
|
||||
.nav-cta {
|
||||
padding: 10px 24px;
|
||||
background: transparent;
|
||||
color: #2D3436;
|
||||
border: 1px solid rgba(45, 52, 54, 0.2);
|
||||
border-radius: 24px;
|
||||
font-size: 13px;
|
||||
font-weight: 500;
|
||||
text-decoration: none;
|
||||
letter-spacing: 0.3px;
|
||||
}
|
||||
|
||||
/* MAIN CONTENT */
|
||||
.main-content {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: 0 64px;
|
||||
gap: 36px;
|
||||
}
|
||||
|
||||
/* HERO ROW */
|
||||
.hero-row {
|
||||
display: grid;
|
||||
grid-template-columns: 480px 1fr;
|
||||
gap: 56px;
|
||||
align-items: start;
|
||||
padding-top: 16px;
|
||||
}
|
||||
|
||||
.hero-text {
|
||||
padding-top: 20px;
|
||||
}
|
||||
|
||||
.headline {
|
||||
font-family: 'Noto Serif SC', serif;
|
||||
font-size: 44px;
|
||||
font-weight: 600;
|
||||
line-height: 1.35;
|
||||
letter-spacing: -0.5px;
|
||||
color: #3D3D3D;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.headline .accent {
|
||||
color: #6B8F71;
|
||||
}
|
||||
|
||||
.subtitle {
|
||||
font-size: 16px;
|
||||
font-weight: 300;
|
||||
line-height: 1.8;
|
||||
color: #8A8278;
|
||||
max-width: 420px;
|
||||
margin-bottom: 28px;
|
||||
}
|
||||
|
||||
.cta-area {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 20px;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.cta-button {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
padding: 14px 32px;
|
||||
background: #2D3436;
|
||||
color: #F5F0EB;
|
||||
font-family: 'Inter', sans-serif;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
letter-spacing: 0.5px;
|
||||
text-decoration: none;
|
||||
border: none;
|
||||
border-radius: 32px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.social-proof {
|
||||
font-size: 12px;
|
||||
font-weight: 400;
|
||||
color: #B5AD9E;
|
||||
letter-spacing: 0.3px;
|
||||
}
|
||||
|
||||
/* EDITOR MOCKUP — organic rounded */
|
||||
.editor-container {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.editor-card {
|
||||
width: 100%;
|
||||
max-width: 720px;
|
||||
height: 460px;
|
||||
background: #FDFCF9;
|
||||
border-radius: 24px;
|
||||
box-shadow:
|
||||
0 2px 8px rgba(92,83,71,0.04),
|
||||
0 8px 24px rgba(92,83,71,0.06),
|
||||
0 24px 48px rgba(92,83,71,0.03);
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 200px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.editor-body {
|
||||
padding: 28px 28px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.editor-toolbar {
|
||||
display: flex;
|
||||
gap: 6px;
|
||||
margin-bottom: 20px;
|
||||
padding-bottom: 14px;
|
||||
border-bottom: 1px solid #EDE8DF;
|
||||
}
|
||||
|
||||
.e-btn {
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
border-radius: 10px;
|
||||
border: none;
|
||||
background: transparent;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: #C4BDB2;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.e-btn.active {
|
||||
background: #EDE8DF;
|
||||
color: #5C5347;
|
||||
}
|
||||
|
||||
.e-title {
|
||||
font-family: 'Noto Serif SC', serif;
|
||||
font-size: 20px;
|
||||
font-weight: 600;
|
||||
color: #3D3D3D;
|
||||
margin-bottom: 14px;
|
||||
}
|
||||
|
||||
.e-text {
|
||||
font-size: 13.5px;
|
||||
font-weight: 300;
|
||||
line-height: 1.9;
|
||||
color: #6B6560;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.e-text .enhanced {
|
||||
background: rgba(107,143,113,0.2);
|
||||
border-radius: 4px;
|
||||
padding: 1px 4px;
|
||||
}
|
||||
|
||||
.e-h2 {
|
||||
font-family: 'Noto Serif SC', serif;
|
||||
font-size: 16px;
|
||||
font-weight: 500;
|
||||
color: #3D3D3D;
|
||||
margin-bottom: 10px;
|
||||
margin-top: 2px;
|
||||
}
|
||||
|
||||
.e-list {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.e-list li {
|
||||
font-size: 13px;
|
||||
font-weight: 300;
|
||||
color: #8A8278;
|
||||
line-height: 1.9;
|
||||
padding-left: 18px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.e-list li::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: 2px;
|
||||
top: 10px;
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
border-radius: 50%;
|
||||
border: 1.5px solid #6B8F71;
|
||||
}
|
||||
|
||||
.typing-cursor {
|
||||
display: inline-block;
|
||||
width: 1.5px;
|
||||
height: 14px;
|
||||
background: #6B8F71;
|
||||
animation: softblink 1.5s ease-in-out infinite;
|
||||
vertical-align: text-bottom;
|
||||
margin-left: 2px;
|
||||
}
|
||||
|
||||
@keyframes softblink {
|
||||
0%, 100% { opacity: 0.8; }
|
||||
50% { opacity: 0.15; }
|
||||
}
|
||||
|
||||
/* AI Sidebar */
|
||||
.ai-panel {
|
||||
background: #F8F5EF;
|
||||
border-left: 1px solid #EDE8DF;
|
||||
padding: 22px 16px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.panel-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
padding-bottom: 12px;
|
||||
border-bottom: 1px solid #EDE8DF;
|
||||
}
|
||||
|
||||
.panel-header svg {
|
||||
color: #6B8F71;
|
||||
}
|
||||
|
||||
.panel-header span {
|
||||
font-size: 12px;
|
||||
font-weight: 500;
|
||||
color: #5C5347;
|
||||
letter-spacing: 0.5px;
|
||||
}
|
||||
|
||||
.panel-card {
|
||||
background: #FDFCF9;
|
||||
border-radius: 14px;
|
||||
padding: 14px;
|
||||
border: 1px solid #EDE8DF;
|
||||
}
|
||||
|
||||
.panel-card-label {
|
||||
font-size: 10px;
|
||||
font-weight: 500;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.8px;
|
||||
color: #B5AD9E;
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
|
||||
.panel-card-value {
|
||||
font-size: 13px;
|
||||
font-weight: 500;
|
||||
color: #3D3D3D;
|
||||
}
|
||||
|
||||
.voice-bar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
margin-top: 8px;
|
||||
}
|
||||
|
||||
.vb-track {
|
||||
flex: 1;
|
||||
height: 4px;
|
||||
background: #EDE8DF;
|
||||
border-radius: 4px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.vb-fill {
|
||||
width: 92%;
|
||||
height: 100%;
|
||||
background: linear-gradient(90deg, #6B8F71, #C4D1BC);
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.vb-label {
|
||||
font-size: 11px;
|
||||
font-weight: 500;
|
||||
color: #6B8F71;
|
||||
}
|
||||
|
||||
.platform-pills {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 6px;
|
||||
margin-top: 6px;
|
||||
}
|
||||
|
||||
.pill {
|
||||
font-size: 10px;
|
||||
padding: 4px 10px;
|
||||
border-radius: 16px;
|
||||
background: #EDE8DF;
|
||||
color: #8A8278;
|
||||
}
|
||||
|
||||
.pill.active {
|
||||
background: rgba(107,143,113,0.25);
|
||||
color: #5C5347;
|
||||
}
|
||||
|
||||
.panel-note {
|
||||
font-size: 11.5px;
|
||||
font-weight: 300;
|
||||
color: #8A8278;
|
||||
line-height: 1.6;
|
||||
padding: 12px;
|
||||
background: #FDFCF9;
|
||||
border-radius: 14px;
|
||||
border: 1px solid #EDE8DF;
|
||||
}
|
||||
|
||||
.panel-note .note-label {
|
||||
font-size: 10px;
|
||||
font-weight: 500;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.8px;
|
||||
color: #B5AD9E;
|
||||
display: block;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
/* FLOW DIAGRAM */
|
||||
.flow-section {
|
||||
padding: 0 0 0 0;
|
||||
}
|
||||
|
||||
.flow-bar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 0;
|
||||
padding: 20px 0;
|
||||
}
|
||||
|
||||
.flow-step {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 14px;
|
||||
padding: 14px 28px;
|
||||
background: #FDFCF9;
|
||||
border-radius: 18px;
|
||||
border: 1px solid #EDE8DF;
|
||||
box-shadow: 0 2px 8px rgba(92,83,71,0.03);
|
||||
}
|
||||
|
||||
.flow-step-icon {
|
||||
width: 38px;
|
||||
height: 38px;
|
||||
border-radius: 12px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.flow-step-icon.ideas {
|
||||
background: rgba(107,143,113,0.2);
|
||||
color: #6B8F71;
|
||||
}
|
||||
|
||||
.flow-step-icon.ai {
|
||||
background: rgba(212,187,156,0.25);
|
||||
color: #C4A87A;
|
||||
}
|
||||
|
||||
.flow-step-icon.voice {
|
||||
background: rgba(92,83,71,0.1);
|
||||
color: #5C5347;
|
||||
}
|
||||
|
||||
.flow-step-text {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.flow-step-label {
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
color: #3D3D3D;
|
||||
margin-bottom: 2px;
|
||||
}
|
||||
|
||||
.flow-step-desc {
|
||||
font-size: 11px;
|
||||
font-weight: 300;
|
||||
color: #B5AD9E;
|
||||
}
|
||||
|
||||
.flow-arrow {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 0 20px;
|
||||
color: #C4BDB2;
|
||||
}
|
||||
|
||||
.flow-arrow svg {
|
||||
opacity: 0.6;
|
||||
}
|
||||
|
||||
/* FEATURES ROW */
|
||||
.features-strip {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
gap: 56px;
|
||||
padding: 12px 0 20px 0;
|
||||
}
|
||||
|
||||
.feat {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.feat-icon {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
border-radius: 12px;
|
||||
background: rgba(107,143,113,0.15);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: #6B8F71;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.feat-text {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.feat-name {
|
||||
font-size: 13px;
|
||||
font-weight: 500;
|
||||
color: #3D3D3D;
|
||||
margin-bottom: 1px;
|
||||
}
|
||||
|
||||
.feat-sub {
|
||||
font-size: 11px;
|
||||
font-weight: 300;
|
||||
color: #B5AD9E;
|
||||
}
|
||||
|
||||
.divider-dot {
|
||||
width: 4px;
|
||||
height: 4px;
|
||||
border-radius: 50%;
|
||||
background: #D5CFC5;
|
||||
align-self: center;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="page">
|
||||
<!-- NAV -->
|
||||
<nav class="nav-bar">
|
||||
<div class="logo">Inkwell</div>
|
||||
<div class="nav-right">
|
||||
<a href="#">Philosophy</a>
|
||||
<a href="#">Features</a>
|
||||
<a href="#">Stories</a>
|
||||
<a href="#" class="nav-cta">Start Writing</a>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<!-- MAIN -->
|
||||
<div class="main-content">
|
||||
<!-- HERO -->
|
||||
<div class="hero-row">
|
||||
<div class="hero-text">
|
||||
<h1 class="headline">Write better, faster,<br>with <span class="accent">your own</span> voice</h1>
|
||||
<p class="subtitle">AI that learns your style, not replaces it. A mindful writing companion for WeChat, Xiaohongshu, and video scripts that honours your creative instincts.</p>
|
||||
<div class="cta-area">
|
||||
<a href="#" class="cta-button">
|
||||
Start Writing
|
||||
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><line x1="5" y1="12" x2="19" y2="12"/><polyline points="12 5 19 12 12 19"/></svg>
|
||||
</a>
|
||||
<span class="social-proof">Trusted by 10,000+ creators</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- EDITOR CARD -->
|
||||
<div class="editor-container">
|
||||
<div class="editor-card">
|
||||
<div class="editor-body">
|
||||
<div class="editor-toolbar">
|
||||
<button class="e-btn active"><svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><path d="M6 4h8a4 4 0 0 1 4 4 4 4 0 0 1-4 4H6z"/><path d="M6 12h9a4 4 0 0 1 4 4 4 4 0 0 1-4 4H6z"/></svg></button>
|
||||
<button class="e-btn"><svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="19" y1="4" x2="10" y2="4"/><line x1="14" y1="20" x2="5" y2="20"/><line x1="15" y1="4" x2="9" y2="20"/></svg></button>
|
||||
<button class="e-btn"><svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="21" y1="6" x2="3" y2="6"/><line x1="15" y1="12" x2="3" y2="12"/><line x1="17" y1="18" x2="3" y2="18"/></svg></button>
|
||||
<button class="e-btn"><svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"/><path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"/></svg></button>
|
||||
</div>
|
||||
|
||||
<div class="e-title">On the Patience of Growing Things</div>
|
||||
<div class="e-text">
|
||||
There is a kind of writing that happens slowly, like roots in winter soil. <span class="enhanced">You cannot rush a sentence into meaning any more than you can rush a seed into bloom</span>. The best words arrive when you stop chasing them.
|
||||
</div>
|
||||
<div class="e-h2">Listening to the Draft</div>
|
||||
<div class="e-text">
|
||||
Every draft speaks, if you give it room. The first version is never wrong — it is simply unfinished. What AI can offer is not replacement, but reflection: a gentle mirror held up to your own intentions.<span class="typing-cursor"></span>
|
||||
</div>
|
||||
<ul class="e-list">
|
||||
<li>Trust the messy first draft</li>
|
||||
<li>Let AI reveal patterns you missed</li>
|
||||
<li>Preserve what makes it yours</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="ai-panel">
|
||||
<div class="panel-header">
|
||||
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><circle cx="12" cy="12" r="10"/><path d="M12 16v-4"/><path d="M12 8h.01"/></svg>
|
||||
<span>Inkwell AI</span>
|
||||
</div>
|
||||
|
||||
<div class="panel-card">
|
||||
<div class="panel-card-label">Voice Match</div>
|
||||
<div class="panel-card-value">Your Style</div>
|
||||
<div class="voice-bar">
|
||||
<div class="vb-track"><div class="vb-fill"></div></div>
|
||||
<div class="vb-label">92%</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="panel-card">
|
||||
<div class="panel-card-label">Platform</div>
|
||||
<div class="panel-card-value">WeChat</div>
|
||||
<div class="platform-pills">
|
||||
<span class="pill active">WeChat</span>
|
||||
<span class="pill">XHS</span>
|
||||
<span class="pill">Script</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="panel-note">
|
||||
<span class="note-label">Observation</span>
|
||||
The seed metaphor in paragraph one is lovely. Consider echoing it in the closing line for a sense of return.
|
||||
</div>
|
||||
|
||||
<div class="panel-note">
|
||||
<span class="note-label">Tone</span>
|
||||
Gentle, contemplative. This reads naturally as you.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- FLOW DIAGRAM -->
|
||||
<div class="flow-section">
|
||||
<div class="flow-bar">
|
||||
<div class="flow-step">
|
||||
<div class="flow-step-icon ideas">
|
||||
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m2.828 9.9a5 5 0 1 1 7.072 0l-.548.547A3.374 3.374 0 0 0 12 18.469c-1.006 0-1.938-.429-2.577-1.177l-.56-.56z"/></svg>
|
||||
</div>
|
||||
<div class="flow-step-text">
|
||||
<div class="flow-step-label">Your Ideas</div>
|
||||
<div class="flow-step-desc">Raw thoughts and drafts</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flow-arrow">
|
||||
<svg width="32" height="16" viewBox="0 0 32 16" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"><line x1="2" y1="8" x2="28" y2="8"/><polyline points="24 4 28 8 24 12"/></svg>
|
||||
</div>
|
||||
|
||||
<div class="flow-step">
|
||||
<div class="flow-step-icon ai">
|
||||
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M12 2L2 7l10 5 10-5-10-5z"/><path d="M2 17l10 5 10-5"/><path d="M2 12l10 5 10-5"/></svg>
|
||||
</div>
|
||||
<div class="flow-step-text">
|
||||
<div class="flow-step-label">AI Enhancement</div>
|
||||
<div class="flow-step-desc">Refine, not rewrite</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flow-arrow">
|
||||
<svg width="32" height="16" viewBox="0 0 32 16" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"><line x1="2" y1="8" x2="28" y2="8"/><polyline points="24 4 28 8 24 12"/></svg>
|
||||
</div>
|
||||
|
||||
<div class="flow-step">
|
||||
<div class="flow-step-icon voice">
|
||||
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M12 20h9"/><path d="M16.5 3.5a2.121 2.121 0 0 1 3 3L7 19l-4 1 1-4L16.5 3.5z"/></svg>
|
||||
</div>
|
||||
<div class="flow-step-text">
|
||||
<div class="flow-step-label">Your Voice</div>
|
||||
<div class="flow-step-desc">Unmistakably you</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- FEATURES STRIP -->
|
||||
<div class="features-strip">
|
||||
<div class="feat">
|
||||
<div class="feat-icon">
|
||||
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M2 3h6a4 4 0 0 1 4 4v14a3 3 0 0 0-3-3H2z"/><path d="M22 3h-6a4 4 0 0 0-4 4v14a3 3 0 0 1 3-3h7z"/></svg>
|
||||
</div>
|
||||
<div class="feat-text">
|
||||
<div class="feat-name">Style Learning</div>
|
||||
<div class="feat-sub">Evolves with your writing</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="divider-dot"></div>
|
||||
|
||||
<div class="feat">
|
||||
<div class="feat-icon">
|
||||
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><rect x="2" y="3" width="20" height="14" rx="2"/><line x1="8" y1="21" x2="16" y2="21"/><line x1="12" y1="17" x2="12" y2="21"/></svg>
|
||||
</div>
|
||||
<div class="feat-text">
|
||||
<div class="feat-name">Multi-Platform</div>
|
||||
<div class="feat-sub">WeChat, XHS, video scripts</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="divider-dot"></div>
|
||||
|
||||
<div class="feat">
|
||||
<div class="feat-icon">
|
||||
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"/></svg>
|
||||
</div>
|
||||
<div class="feat-text">
|
||||
<div class="feat-name">Human-Touch Proofreading</div>
|
||||
<div class="feat-sub">Warmth-preserving refinement</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 154 KiB |
@@ -0,0 +1,372 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=1440">
|
||||
<title>Nexus API Documentation</title>
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@200;300;400;500;600&family=JetBrains+Mono:wght@300;400;500&display=swap" rel="stylesheet">
|
||||
<script src="https://unpkg.com/lucide@latest"></script>
|
||||
<style>
|
||||
* { margin: 0; padding: 0; box-sizing: border-box; }
|
||||
body {
|
||||
width: 1440px;
|
||||
height: 900px;
|
||||
overflow: hidden;
|
||||
margin: 0;
|
||||
font-family: 'Inter', sans-serif;
|
||||
background: #FAFAF8;
|
||||
color: #2C2C2C;
|
||||
}
|
||||
|
||||
/* Navigation */
|
||||
nav {
|
||||
height: 64px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 0 80px;
|
||||
position: relative;
|
||||
}
|
||||
.nav-logo {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
}
|
||||
.nav-logo-icon {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
border-radius: 2px;
|
||||
background: #E8E4DF;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
.nav-logo-icon i { color: #D4A574; }
|
||||
.nav-logo span {
|
||||
font-size: 17px;
|
||||
font-weight: 500;
|
||||
letter-spacing: -0.3px;
|
||||
color: #1A1A1A;
|
||||
}
|
||||
.nav-center {
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
display: flex;
|
||||
gap: 32px;
|
||||
}
|
||||
.nav-center a {
|
||||
font-size: 13px;
|
||||
font-weight: 400;
|
||||
color: #999;
|
||||
text-decoration: none;
|
||||
letter-spacing: 0.3px;
|
||||
transition: color 0.2s;
|
||||
}
|
||||
.nav-center a:hover { color: #2C2C2C; }
|
||||
.nav-center a.active { color: #2C2C2C; font-weight: 500; }
|
||||
.nav-right {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 24px;
|
||||
}
|
||||
.nav-right a {
|
||||
font-size: 13px;
|
||||
color: #BBB;
|
||||
text-decoration: none;
|
||||
transition: color 0.2s;
|
||||
}
|
||||
.nav-right a:hover { color: #2C2C2C; }
|
||||
.status-pill {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
padding: 5px 12px;
|
||||
border-radius: 2px;
|
||||
background: rgba(212, 165, 116, 0.08);
|
||||
font-size: 11px;
|
||||
color: #B0ACA4;
|
||||
font-weight: 400;
|
||||
}
|
||||
.status-pill .dot {
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
background: #D4A574;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
/* Hero section */
|
||||
.hero {
|
||||
text-align: center;
|
||||
padding: 64px 80px 48px;
|
||||
}
|
||||
.hero-eyebrow {
|
||||
font-size: 12px;
|
||||
font-weight: 400;
|
||||
letter-spacing: 4px;
|
||||
text-transform: uppercase;
|
||||
color: #B0ACA4;
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
.hero h1 {
|
||||
font-size: 56px;
|
||||
font-weight: 200;
|
||||
letter-spacing: -2.5px;
|
||||
line-height: 1.1;
|
||||
color: #1A1A1A;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
.hero h1 em {
|
||||
font-style: normal;
|
||||
font-weight: 500;
|
||||
}
|
||||
.hero p {
|
||||
font-size: 17px;
|
||||
font-weight: 300;
|
||||
color: #999;
|
||||
line-height: 1.6;
|
||||
max-width: 520px;
|
||||
margin: 0 auto 36px;
|
||||
letter-spacing: 0.1px;
|
||||
}
|
||||
.hero-actions {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
gap: 16px;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
.hero-actions a {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
padding: 12px 28px;
|
||||
font-size: 13px;
|
||||
font-weight: 400;
|
||||
text-decoration: none;
|
||||
border-radius: 2px;
|
||||
transition: all 0.2s;
|
||||
letter-spacing: 0.2px;
|
||||
}
|
||||
.btn-primary {
|
||||
background: #1A1A1A;
|
||||
color: #FAFAF8;
|
||||
}
|
||||
.btn-primary:hover { background: #333; }
|
||||
.btn-secondary {
|
||||
background: transparent;
|
||||
color: #999;
|
||||
border: 1px solid #E0DDD8;
|
||||
}
|
||||
.btn-secondary:hover { border-color: #CCC; color: #666; }
|
||||
|
||||
/* Code card */
|
||||
.code-section {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
padding: 32px 80px 48px;
|
||||
}
|
||||
.code-card {
|
||||
background: #FFFFFF;
|
||||
border-radius: 2px;
|
||||
box-shadow: 0 8px 40px rgba(0,0,0,0.04), 0 1px 3px rgba(0,0,0,0.02);
|
||||
max-width: 600px;
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
}
|
||||
.code-card-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 14px 24px;
|
||||
border-bottom: 1px solid #F2F0EC;
|
||||
}
|
||||
.code-card-header .dots {
|
||||
display: flex;
|
||||
gap: 7px;
|
||||
}
|
||||
.code-card-header .dots span {
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
border-radius: 50%;
|
||||
background: #E8E5E0;
|
||||
}
|
||||
.code-card-header .filename {
|
||||
font-family: 'JetBrains Mono', monospace;
|
||||
font-size: 11px;
|
||||
color: #BBB;
|
||||
font-weight: 400;
|
||||
}
|
||||
.code-card-header .copy-btn {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
background: none;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
color: #CCC;
|
||||
font-size: 11px;
|
||||
font-family: 'Inter', sans-serif;
|
||||
}
|
||||
.code-card-body {
|
||||
padding: 24px 28px;
|
||||
font-family: 'JetBrains Mono', monospace;
|
||||
font-size: 13px;
|
||||
line-height: 1.8;
|
||||
color: #444;
|
||||
font-weight: 400;
|
||||
}
|
||||
.code-card-body .kw { color: #8B7355; font-weight: 500; }
|
||||
.code-card-body .str { color: #D4A574; }
|
||||
.code-card-body .cmt { color: #CCCCCC; }
|
||||
.code-card-body .fn { color: #777; }
|
||||
.code-card-body .num { color: #B08D57; }
|
||||
|
||||
/* Quick links */
|
||||
.quick-links {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
gap: 48px;
|
||||
padding: 16px 80px 48px;
|
||||
}
|
||||
.quick-link {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
text-decoration: none;
|
||||
color: #BBB;
|
||||
font-size: 13px;
|
||||
font-weight: 400;
|
||||
transition: color 0.2s;
|
||||
letter-spacing: 0.2px;
|
||||
}
|
||||
.quick-link:hover { color: #666; }
|
||||
.quick-link i { color: #D4A574; opacity: 0.6; }
|
||||
|
||||
/* Features */
|
||||
.features {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
gap: 24px;
|
||||
padding: 0 80px;
|
||||
max-width: 1100px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
.feature-card {
|
||||
background: #FFFFFF;
|
||||
border-radius: 2px;
|
||||
padding: 32px 28px;
|
||||
box-shadow: 0 2px 16px rgba(0,0,0,0.02);
|
||||
transition: box-shadow 0.2s;
|
||||
}
|
||||
.feature-card:hover {
|
||||
box-shadow: 0 2px 16px rgba(0,0,0,0.04);
|
||||
}
|
||||
.feature-icon-wrap {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
border-radius: 2px;
|
||||
background: #F0EBE3;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.feature-icon-wrap i { color: #D4A574; }
|
||||
.feature-card h3 {
|
||||
font-size: 16px;
|
||||
font-weight: 500;
|
||||
letter-spacing: -0.3px;
|
||||
margin-bottom: 8px;
|
||||
color: #1A1A1A;
|
||||
}
|
||||
.feature-card p {
|
||||
font-size: 13px;
|
||||
font-weight: 300;
|
||||
line-height: 1.65;
|
||||
color: #AAA;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<!-- Navigation -->
|
||||
<nav>
|
||||
<div class="nav-logo">
|
||||
<div class="nav-logo-icon"><i data-lucide="zap" style="width:16px;height:16px;"></i></div>
|
||||
<span>Nexus</span>
|
||||
</div>
|
||||
<div class="nav-center">
|
||||
<a href="#" class="active">Docs</a>
|
||||
<a href="#">API</a>
|
||||
<a href="#">Changelog</a>
|
||||
<a href="#">Status</a>
|
||||
<a href="#">GitHub</a>
|
||||
</div>
|
||||
<div class="nav-right">
|
||||
<div class="status-pill"><span class="dot"></span> Operational</div>
|
||||
<a href="#"><i data-lucide="search" style="width:15px;height:15px;color:#CCC;"></i></a>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<!-- Hero -->
|
||||
<section class="hero">
|
||||
<div class="hero-eyebrow">Unified AI Gateway</div>
|
||||
<h1>One API, <em>every</em> AI model<span style="color:#D4A574;font-weight:300;">.</span></h1>
|
||||
<p>Access GPT, Claude, Gemini, and 20+ models through a single endpoint. Intelligent routing, unified billing, zero vendor lock-in.</p>
|
||||
<div class="hero-actions">
|
||||
<a href="#" class="btn-primary"><i data-lucide="arrow-right" style="width:14px;height:14px;"></i> Get started</a>
|
||||
<a href="#" class="btn-secondary">View API reference</a>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Code Card -->
|
||||
<section class="code-section">
|
||||
<div class="code-card">
|
||||
<div class="code-card-header">
|
||||
<div class="dots"><span></span><span></span><span></span></div>
|
||||
<span class="filename">quickstart.py</span>
|
||||
<button class="copy-btn"><i data-lucide="copy" style="width:12px;height:12px;"></i> Copy</button>
|
||||
</div>
|
||||
<div class="code-card-body">
|
||||
<span class="kw">from</span> nexus <span class="kw">import</span> Client<br><br>
|
||||
client = Client(api_key=<span class="str">"your-key"</span>)<br>
|
||||
response = client.chat(<br>
|
||||
model=<span class="str">"auto"</span>, <span class="cmt"># intelligently routes</span><br>
|
||||
messages=[{<span class="str">"role"</span>: <span class="str">"user"</span>, <span class="str">"content"</span>: <span class="str">"Hello!"</span>}]<br>
|
||||
)
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Quick Links -->
|
||||
<div class="quick-links">
|
||||
<a href="#" class="quick-link"><i data-lucide="rocket" style="width:14px;height:14px;"></i> Getting Started</a>
|
||||
<a href="#" class="quick-link"><i data-lucide="file-text" style="width:14px;height:14px;"></i> API Reference</a>
|
||||
<a href="#" class="quick-link"><i data-lucide="layers" style="width:14px;height:14px;"></i> Models</a>
|
||||
<a href="#" class="quick-link"><i data-lucide="credit-card" style="width:14px;height:14px;"></i> Pricing</a>
|
||||
</div>
|
||||
|
||||
<!-- Features -->
|
||||
<section class="features">
|
||||
<div class="feature-card">
|
||||
<div class="feature-icon-wrap"><i data-lucide="git-branch" style="width:18px;height:18px;"></i></div>
|
||||
<h3>Model Routing</h3>
|
||||
<p>Automatically select the best model for each request based on task complexity, latency requirements, and cost constraints.</p>
|
||||
</div>
|
||||
<div class="feature-card">
|
||||
<div class="feature-icon-wrap"><i data-lucide="trending-down" style="width:18px;height:18px;"></i></div>
|
||||
<h3>Cost Optimization</h3>
|
||||
<p>Reduce AI spend by up to 60% with intelligent model selection and automatic fallback to cost-effective alternatives.</p>
|
||||
</div>
|
||||
<div class="feature-card">
|
||||
<div class="feature-icon-wrap"><i data-lucide="bar-chart-3" style="width:18px;height:18px;"></i></div>
|
||||
<h3>Usage Analytics</h3>
|
||||
<p>Real-time dashboards tracking token usage, response latency, model performance, and cost breakdowns per project.</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<script>lucide.createIcons();</script>
|
||||
</body>
|
||||
</html>
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 67 KiB |
@@ -0,0 +1,460 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=1440">
|
||||
<title>Nexus API Documentation</title>
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500&family=Space+Grotesk:wght@400;500;600;700&display=swap" rel="stylesheet">
|
||||
<script src="https://unpkg.com/lucide@latest"></script>
|
||||
<style>
|
||||
* { margin: 0; padding: 0; box-sizing: border-box; }
|
||||
body {
|
||||
width: 1440px;
|
||||
height: 900px;
|
||||
overflow: hidden;
|
||||
margin: 0;
|
||||
font-family: 'Helvetica Neue', Arial, sans-serif;
|
||||
background: #FFFFFF;
|
||||
color: #111111;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
/* Sidebar */
|
||||
.sidebar {
|
||||
width: 260px;
|
||||
min-width: 260px;
|
||||
height: 900px;
|
||||
border-right: 1px solid #111;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: 0;
|
||||
overflow-y: auto;
|
||||
}
|
||||
.sidebar-logo {
|
||||
padding: 24px 28px;
|
||||
border-bottom: 1px solid #111;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
}
|
||||
.sidebar-logo .logo-mark {
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
background: #E63946;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
.sidebar-logo .logo-mark svg { color: #fff; }
|
||||
.sidebar-logo span {
|
||||
font-family: 'Helvetica Neue', Arial, sans-serif;
|
||||
font-weight: 700;
|
||||
font-size: 18px;
|
||||
letter-spacing: -0.5px;
|
||||
}
|
||||
.sidebar-section {
|
||||
padding: 20px 28px 8px;
|
||||
}
|
||||
.sidebar-section-label {
|
||||
font-family: 'Helvetica Neue', Arial, sans-serif;
|
||||
font-size: 10px;
|
||||
font-weight: 600;
|
||||
letter-spacing: 2px;
|
||||
text-transform: uppercase;
|
||||
color: #999;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
.sidebar-link {
|
||||
display: block;
|
||||
padding: 6px 0;
|
||||
font-size: 13px;
|
||||
font-weight: 500;
|
||||
color: #555;
|
||||
text-decoration: none;
|
||||
transition: color 0.15s;
|
||||
}
|
||||
.sidebar-link:hover { color: #111; }
|
||||
.sidebar-link.active {
|
||||
color: #E63946;
|
||||
font-weight: 600;
|
||||
}
|
||||
.sidebar-link.active::before {
|
||||
content: '';
|
||||
display: inline-block;
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
background: #E63946;
|
||||
margin-right: 8px;
|
||||
vertical-align: middle;
|
||||
}
|
||||
.sidebar-divider {
|
||||
height: 1px;
|
||||
background: #E8E8E8;
|
||||
margin: 12px 28px;
|
||||
}
|
||||
|
||||
/* Main content */
|
||||
.main {
|
||||
flex: 1;
|
||||
height: 900px;
|
||||
overflow-y: auto;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
/* Top nav */
|
||||
.topnav {
|
||||
height: 52px;
|
||||
min-height: 52px;
|
||||
border-bottom: 1px solid #111;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 0 40px;
|
||||
}
|
||||
.topnav-links {
|
||||
display: flex;
|
||||
gap: 28px;
|
||||
}
|
||||
.topnav-links a {
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
letter-spacing: 1px;
|
||||
text-transform: uppercase;
|
||||
text-decoration: none;
|
||||
color: #555;
|
||||
transition: color 0.15s;
|
||||
}
|
||||
.topnav-links a:hover { color: #111; }
|
||||
.topnav-links a.active-nav { color: #E63946; }
|
||||
.topnav-right {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 16px;
|
||||
}
|
||||
.topnav-right .status-dot {
|
||||
width: 7px;
|
||||
height: 7px;
|
||||
background: #E63946;
|
||||
border-radius: 50%;
|
||||
display: inline-block;
|
||||
}
|
||||
.topnav-right span {
|
||||
font-size: 11px;
|
||||
color: #888;
|
||||
font-weight: 500;
|
||||
}
|
||||
.topnav-right a {
|
||||
color: #555;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
/* Hero */
|
||||
.hero {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
min-height: 400px;
|
||||
border-bottom: 1px solid #E8E8E8;
|
||||
}
|
||||
.hero-left {
|
||||
padding: 56px 48px 48px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
}
|
||||
.hero-badge {
|
||||
font-family: 'Helvetica Neue', Arial, sans-serif;
|
||||
font-size: 10px;
|
||||
font-weight: 600;
|
||||
letter-spacing: 2.5px;
|
||||
text-transform: uppercase;
|
||||
color: #E63946;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.hero-left h1 {
|
||||
font-family: 'Helvetica Neue', Arial, sans-serif;
|
||||
font-size: 52px;
|
||||
font-weight: 900;
|
||||
line-height: 1.05;
|
||||
letter-spacing: -2px;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
.hero-left p {
|
||||
font-size: 16px;
|
||||
line-height: 1.6;
|
||||
color: #666;
|
||||
max-width: 420px;
|
||||
margin-bottom: 32px;
|
||||
}
|
||||
.hero-links {
|
||||
display: flex;
|
||||
gap: 12px;
|
||||
}
|
||||
.hero-links a {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
padding: 10px 20px;
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
text-decoration: none;
|
||||
transition: all 0.15s;
|
||||
}
|
||||
.hero-links a.primary {
|
||||
background: #111;
|
||||
color: #fff;
|
||||
}
|
||||
.hero-links a.primary:hover { background: #E63946; }
|
||||
.hero-links a.secondary {
|
||||
border: 1px solid #DDD;
|
||||
color: #333;
|
||||
background: #fff;
|
||||
}
|
||||
.hero-links a.secondary:hover { border-color: #111; }
|
||||
|
||||
/* Code block */
|
||||
.hero-right {
|
||||
padding: 40px 48px 40px 24px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: #FAFAFA;
|
||||
border-left: 1px solid #E8E8E8;
|
||||
}
|
||||
.code-block {
|
||||
background: #FFFFFF;
|
||||
border: 1px solid #DDD;
|
||||
width: 100%;
|
||||
max-width: 480px;
|
||||
}
|
||||
.code-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 10px 16px;
|
||||
border-bottom: 1px solid #DDD;
|
||||
background: #FAFAFA;
|
||||
}
|
||||
.code-header span {
|
||||
font-family: 'JetBrains Mono', monospace;
|
||||
font-size: 11px;
|
||||
color: #999;
|
||||
font-weight: 500;
|
||||
}
|
||||
.code-dots {
|
||||
display: flex;
|
||||
gap: 6px;
|
||||
}
|
||||
.code-dots i { width: 10px; height: 10px; }
|
||||
.code-body {
|
||||
padding: 20px;
|
||||
font-family: 'JetBrains Mono', monospace;
|
||||
font-size: 13px;
|
||||
line-height: 1.7;
|
||||
color: #111;
|
||||
}
|
||||
.code-body .kw { color: #111; font-weight: 500; }
|
||||
.code-body .str { color: #E63946; }
|
||||
.code-body .cmt { color: #AAAAAA; }
|
||||
.code-body .fn { color: #555; }
|
||||
|
||||
/* Quick links bar */
|
||||
.quick-bar {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, 1fr);
|
||||
border-bottom: 1px solid #E8E8E8;
|
||||
}
|
||||
.quick-bar a {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
padding: 18px 28px;
|
||||
text-decoration: none;
|
||||
color: #333;
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
border-right: 1px solid #E8E8E8;
|
||||
transition: background 0.15s;
|
||||
}
|
||||
.quick-bar a:last-child { border-right: none; }
|
||||
.quick-bar a:hover { background: #FAFAFA; }
|
||||
.quick-bar a i { color: #E63946; }
|
||||
|
||||
/* Features */
|
||||
.features {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
flex: 1;
|
||||
}
|
||||
.feature-card {
|
||||
padding: 36px 32px;
|
||||
border-right: 1px solid #E8E8E8;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
.feature-card:last-child { border-right: none; }
|
||||
.feature-card .feature-label {
|
||||
font-family: 'Helvetica Neue', Arial, sans-serif;
|
||||
font-size: 10px;
|
||||
font-weight: 600;
|
||||
letter-spacing: 2px;
|
||||
text-transform: uppercase;
|
||||
color: #E63946;
|
||||
margin-bottom: 14px;
|
||||
}
|
||||
.feature-card h3 {
|
||||
font-family: 'Helvetica Neue', Arial, sans-serif;
|
||||
font-size: 20px;
|
||||
font-weight: 600;
|
||||
letter-spacing: -0.5px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.feature-card p {
|
||||
font-size: 13px;
|
||||
line-height: 1.65;
|
||||
color: #777;
|
||||
}
|
||||
.feature-icon {
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
background: #111;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-bottom: 18px;
|
||||
}
|
||||
.feature-icon i { color: #fff; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<!-- Sidebar -->
|
||||
<aside class="sidebar">
|
||||
<div class="sidebar-logo">
|
||||
<div class="logo-mark"><i data-lucide="zap" style="width:16px;height:16px;"></i></div>
|
||||
<span>Nexus API</span>
|
||||
</div>
|
||||
|
||||
<div class="sidebar-section">
|
||||
<div class="sidebar-section-label">Getting Started</div>
|
||||
<a href="#" class="sidebar-link active">Introduction</a>
|
||||
<a href="#" class="sidebar-link">Quick Start</a>
|
||||
<a href="#" class="sidebar-link">Authentication</a>
|
||||
<a href="#" class="sidebar-link">Installation</a>
|
||||
</div>
|
||||
<div class="sidebar-divider"></div>
|
||||
<div class="sidebar-section">
|
||||
<div class="sidebar-section-label">Core Concepts</div>
|
||||
<a href="#" class="sidebar-link">Model Routing</a>
|
||||
<a href="#" class="sidebar-link">Chat Completions</a>
|
||||
<a href="#" class="sidebar-link">Streaming</a>
|
||||
<a href="#" class="sidebar-link">Error Handling</a>
|
||||
</div>
|
||||
<div class="sidebar-divider"></div>
|
||||
<div class="sidebar-section">
|
||||
<div class="sidebar-section-label">API Reference</div>
|
||||
<a href="#" class="sidebar-link">POST /chat</a>
|
||||
<a href="#" class="sidebar-link">GET /models</a>
|
||||
<a href="#" class="sidebar-link">GET /usage</a>
|
||||
<a href="#" class="sidebar-link">Webhooks</a>
|
||||
</div>
|
||||
<div class="sidebar-divider"></div>
|
||||
<div class="sidebar-section">
|
||||
<div class="sidebar-section-label">Resources</div>
|
||||
<a href="#" class="sidebar-link">Models</a>
|
||||
<a href="#" class="sidebar-link">Pricing</a>
|
||||
<a href="#" class="sidebar-link">SDKs</a>
|
||||
<a href="#" class="sidebar-link">Changelog</a>
|
||||
</div>
|
||||
</aside>
|
||||
|
||||
<!-- Main -->
|
||||
<main class="main">
|
||||
<!-- Top Nav -->
|
||||
<nav class="topnav">
|
||||
<div class="topnav-links">
|
||||
<a href="#" class="active-nav">Docs</a>
|
||||
<a href="#">API</a>
|
||||
<a href="#">Changelog</a>
|
||||
<a href="#">Status</a>
|
||||
<a href="#">GitHub</a>
|
||||
</div>
|
||||
<div class="topnav-right">
|
||||
<span class="status-dot"></span>
|
||||
<span>All systems operational</span>
|
||||
<a href="#"><i data-lucide="search" style="width:16px;height:16px;color:#888;"></i></a>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<!-- Hero -->
|
||||
<section class="hero">
|
||||
<div class="hero-left">
|
||||
<div class="hero-badge">Unified AI Gateway</div>
|
||||
<h1>One API,<br>every AI model</h1>
|
||||
<p>Access GPT, Claude, Gemini, and 20+ models through a single endpoint. Intelligent routing, unified billing, zero vendor lock-in.</p>
|
||||
<div class="hero-links">
|
||||
<a href="#" class="primary"><i data-lucide="arrow-right" style="width:14px;height:14px;"></i> Get Started</a>
|
||||
<a href="#" class="secondary">API Reference</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="hero-right">
|
||||
<div class="code-block">
|
||||
<div class="code-header">
|
||||
<div class="code-dots">
|
||||
<i data-lucide="circle" style="width:10px;height:10px;color:#DDD;fill:#DDD;"></i>
|
||||
<i data-lucide="circle" style="width:10px;height:10px;color:#DDD;fill:#DDD;"></i>
|
||||
<i data-lucide="circle" style="width:10px;height:10px;color:#DDD;fill:#DDD;"></i>
|
||||
</div>
|
||||
<span>quickstart.py</span>
|
||||
</div>
|
||||
<div class="code-body">
|
||||
<span class="kw">from</span> nexus <span class="kw">import</span> Client<br><br>
|
||||
client = Client(api_key=<span class="str">"your-key"</span>)<br>
|
||||
response = client.chat(<br>
|
||||
model=<span class="str">"auto"</span>, <span class="cmt"># intelligently routes</span><br>
|
||||
messages=[{<br>
|
||||
<span class="str">"role"</span>: <span class="str">"user"</span>,<br>
|
||||
<span class="str">"content"</span>: <span class="str">"Hello!"</span><br>
|
||||
}]<br>
|
||||
)
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Quick Links -->
|
||||
<div class="quick-bar">
|
||||
<a href="#"><i data-lucide="rocket" style="width:16px;height:16px;"></i> Getting Started</a>
|
||||
<a href="#"><i data-lucide="file-text" style="width:16px;height:16px;"></i> API Reference</a>
|
||||
<a href="#"><i data-lucide="layers" style="width:16px;height:16px;"></i> Models</a>
|
||||
<a href="#"><i data-lucide="credit-card" style="width:16px;height:16px;"></i> Pricing</a>
|
||||
</div>
|
||||
|
||||
<!-- Features -->
|
||||
<section class="features">
|
||||
<div class="feature-card">
|
||||
<div class="feature-icon"><i data-lucide="git-branch" style="width:18px;height:18px;"></i></div>
|
||||
<div class="feature-label">Feature 01</div>
|
||||
<h3>Model Routing</h3>
|
||||
<p>Automatically select the best model for each request based on task complexity, latency requirements, and cost constraints.</p>
|
||||
</div>
|
||||
<div class="feature-card">
|
||||
<div class="feature-icon"><i data-lucide="trending-down" style="width:18px;height:18px;"></i></div>
|
||||
<div class="feature-label">Feature 02</div>
|
||||
<h3>Cost Optimization</h3>
|
||||
<p>Reduce AI spend by up to 60% with intelligent model selection and automatic fallback to cost-effective alternatives.</p>
|
||||
</div>
|
||||
<div class="feature-card">
|
||||
<div class="feature-icon"><i data-lucide="bar-chart-3" style="width:18px;height:18px;"></i></div>
|
||||
<div class="feature-label">Feature 03</div>
|
||||
<h3>Usage Analytics</h3>
|
||||
<p>Real-time dashboards tracking token usage, response latency, model performance, and cost breakdowns per project.</p>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
|
||||
<script>lucide.createIcons();</script>
|
||||
</body>
|
||||
</html>
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 114 KiB |
@@ -0,0 +1,494 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=1440">
|
||||
<title>Nexus API Documentation</title>
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600&family=JetBrains+Mono:wght@300;400;500&family=Noto+Serif+SC:wght@400;500;600&display=swap" rel="stylesheet">
|
||||
<script src="https://unpkg.com/lucide@latest"></script>
|
||||
<style>
|
||||
* { margin: 0; padding: 0; box-sizing: border-box; }
|
||||
body {
|
||||
width: 1440px;
|
||||
height: 900px;
|
||||
overflow: hidden;
|
||||
margin: 0;
|
||||
font-family: 'Inter', sans-serif;
|
||||
background: #F5F0EB;
|
||||
color: #3A3A35;
|
||||
}
|
||||
|
||||
/* Navigation */
|
||||
nav {
|
||||
height: 72px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 0 64px;
|
||||
}
|
||||
.nav-logo {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
}
|
||||
.nav-logo-mark {
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
border-radius: 12px;
|
||||
background: #6B8F71;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
.nav-logo-mark i { color: #F5F0EB; }
|
||||
.nav-logo-text {
|
||||
font-family: 'Noto Serif SC', serif;
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
color: #2D3436;
|
||||
letter-spacing: -0.3px;
|
||||
}
|
||||
.nav-links {
|
||||
display: flex;
|
||||
gap: 32px;
|
||||
}
|
||||
.nav-links a {
|
||||
font-size: 13px;
|
||||
font-weight: 400;
|
||||
color: #999;
|
||||
text-decoration: none;
|
||||
transition: color 0.2s;
|
||||
letter-spacing: 0.3px;
|
||||
}
|
||||
.nav-links a:hover { color: #3A3A35; }
|
||||
.nav-links a.active { color: #3A3A35; font-weight: 500; }
|
||||
.nav-right {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 20px;
|
||||
}
|
||||
.search-box {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
padding: 8px 16px;
|
||||
background: rgba(255,255,255,0.5);
|
||||
border-radius: 12px;
|
||||
border: 1px solid #E5DFCE;
|
||||
}
|
||||
.search-box span {
|
||||
font-size: 12px;
|
||||
color: #BBB;
|
||||
}
|
||||
.search-box kbd {
|
||||
font-family: 'Inter', sans-serif;
|
||||
font-size: 10px;
|
||||
background: #EDE8DC;
|
||||
border-radius: 4px;
|
||||
padding: 2px 6px;
|
||||
color: #AAA;
|
||||
margin-left: 24px;
|
||||
}
|
||||
|
||||
/* Hero Section */
|
||||
.hero {
|
||||
display: flex;
|
||||
padding: 40px 64px 36px;
|
||||
gap: 56px;
|
||||
align-items: flex-start;
|
||||
}
|
||||
.hero-content {
|
||||
flex: 1;
|
||||
padding-top: 16px;
|
||||
}
|
||||
.hero-tag {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
padding: 6px 14px;
|
||||
background: rgba(107,143,113,0.15);
|
||||
border-radius: 100px;
|
||||
font-size: 11px;
|
||||
font-weight: 500;
|
||||
color: #6B8F71;
|
||||
margin-bottom: 24px;
|
||||
letter-spacing: 0.5px;
|
||||
}
|
||||
.hero h1 {
|
||||
font-family: 'Noto Serif SC', serif;
|
||||
font-size: 44px;
|
||||
font-weight: 600;
|
||||
line-height: 1.15;
|
||||
letter-spacing: -1.5px;
|
||||
color: #2D3436;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
.hero p {
|
||||
font-size: 16px;
|
||||
font-weight: 300;
|
||||
line-height: 1.7;
|
||||
color: #888;
|
||||
max-width: 440px;
|
||||
margin-bottom: 32px;
|
||||
}
|
||||
.hero-buttons {
|
||||
display: flex;
|
||||
gap: 12px;
|
||||
}
|
||||
.hero-buttons a {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
padding: 12px 24px;
|
||||
font-size: 13px;
|
||||
font-weight: 500;
|
||||
text-decoration: none;
|
||||
border-radius: 12px;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
.btn-green {
|
||||
background: rgba(107, 143, 113, 0.12);
|
||||
color: #6B8F71;
|
||||
border: 1px solid rgba(107, 143, 113, 0.3);
|
||||
}
|
||||
.btn-green:hover { background: rgba(107, 143, 113, 0.18); }
|
||||
.btn-outline {
|
||||
background: rgba(255,255,255,0.5);
|
||||
color: #666;
|
||||
border: 1px solid #DDD8CB;
|
||||
}
|
||||
.btn-outline:hover { background: rgba(255,255,255,0.8); }
|
||||
|
||||
/* Code + Diagram Area */
|
||||
.hero-visual {
|
||||
width: 560px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 20px;
|
||||
}
|
||||
|
||||
/* Flow diagram */
|
||||
.flow-diagram {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 0;
|
||||
padding: 20px 24px;
|
||||
background: rgba(255,255,255,0.45);
|
||||
border-radius: 16px;
|
||||
border: 1px solid #E5DFCE;
|
||||
}
|
||||
.flow-node {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
}
|
||||
.flow-node-box {
|
||||
padding: 10px 20px;
|
||||
background: #FFFFFF;
|
||||
border-radius: 10px;
|
||||
border: 1px solid #E0DACE;
|
||||
font-size: 13px;
|
||||
font-weight: 500;
|
||||
color: #3A3A35;
|
||||
white-space: nowrap;
|
||||
box-shadow: 0 2px 8px rgba(0,0,0,0.03);
|
||||
}
|
||||
.flow-node-box.highlight {
|
||||
background: #6B8F71;
|
||||
border-color: #6B8F71;
|
||||
color: #fff;
|
||||
}
|
||||
.flow-node-label {
|
||||
font-size: 10px;
|
||||
color: #BBB;
|
||||
letter-spacing: 0.5px;
|
||||
}
|
||||
.flow-arrow {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 0 12px;
|
||||
}
|
||||
.flow-arrow-line {
|
||||
width: 40px;
|
||||
height: 1px;
|
||||
background: #CCC8BA;
|
||||
position: relative;
|
||||
}
|
||||
.flow-arrow-line::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
right: -1px;
|
||||
top: -3px;
|
||||
border: solid #CCC8BA;
|
||||
border-width: 0 1px 1px 0;
|
||||
padding: 3px;
|
||||
transform: rotate(-45deg);
|
||||
}
|
||||
.flow-models {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 6px;
|
||||
}
|
||||
.flow-model-tag {
|
||||
padding: 6px 14px;
|
||||
background: #FFFFFF;
|
||||
border-radius: 8px;
|
||||
border: 1px solid #E0DACE;
|
||||
font-size: 11px;
|
||||
font-weight: 400;
|
||||
color: #888;
|
||||
box-shadow: 0 1px 4px rgba(0,0,0,0.02);
|
||||
}
|
||||
|
||||
/* Code block */
|
||||
.code-card {
|
||||
background: #FAF5EC;
|
||||
border-radius: 16px;
|
||||
border: 1px solid #E5DFCE;
|
||||
overflow: hidden;
|
||||
}
|
||||
.code-card-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 12px 20px;
|
||||
border-bottom: 1px solid #E5DFCE;
|
||||
background: rgba(255,255,255,0.3);
|
||||
}
|
||||
.code-card-header .dots {
|
||||
display: flex;
|
||||
gap: 6px;
|
||||
}
|
||||
.code-card-header .dots span {
|
||||
width: 9px;
|
||||
height: 9px;
|
||||
border-radius: 50%;
|
||||
background: #DDD8CB;
|
||||
}
|
||||
.code-card-header .fname {
|
||||
font-family: 'JetBrains Mono', monospace;
|
||||
font-size: 11px;
|
||||
color: #BBB;
|
||||
}
|
||||
.code-card-body {
|
||||
padding: 20px 24px;
|
||||
font-family: 'JetBrains Mono', monospace;
|
||||
font-size: 12.5px;
|
||||
line-height: 1.8;
|
||||
color: #555;
|
||||
}
|
||||
.code-card-body .kw { color: #6B8F71; font-weight: 500; }
|
||||
.code-card-body .str { color: #D4A574; }
|
||||
.code-card-body .cmt { color: #C4C0B4; }
|
||||
|
||||
/* Quick Links */
|
||||
.quick-links {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
gap: 20px;
|
||||
padding: 8px 64px 32px;
|
||||
}
|
||||
.quick-link {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
text-decoration: none;
|
||||
padding: 12px 22px;
|
||||
background: rgba(255,255,255,0.45);
|
||||
border: 1px solid #E5DFCE;
|
||||
border-radius: 12px;
|
||||
font-size: 13px;
|
||||
font-weight: 400;
|
||||
color: #777;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
.quick-link:hover {
|
||||
background: rgba(255,255,255,0.7);
|
||||
color: #3A3A35;
|
||||
}
|
||||
.quick-link i { color: #6B8F71; }
|
||||
|
||||
/* Features */
|
||||
.features {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
gap: 20px;
|
||||
padding: 0 64px;
|
||||
position: relative;
|
||||
}
|
||||
.feature-card {
|
||||
background: rgba(255,255,255,0.5);
|
||||
border: 1px solid #E5DFCE;
|
||||
border-radius: 16px;
|
||||
padding: 28px 24px;
|
||||
transition: all 0.2s;
|
||||
position: relative;
|
||||
}
|
||||
.feature-card:hover {
|
||||
background: rgba(255,255,255,0.75);
|
||||
box-shadow: 0 4px 20px rgba(0,0,0,0.03);
|
||||
}
|
||||
.feature-icon-wrap {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
border-radius: 12px;
|
||||
background: rgba(107,143,113,0.15);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
.feature-icon-wrap i { color: #6B8F71; }
|
||||
.feature-card h3 {
|
||||
font-family: 'Noto Serif SC', serif;
|
||||
font-size: 16px;
|
||||
font-weight: 500;
|
||||
margin-bottom: 8px;
|
||||
color: #2D3436;
|
||||
}
|
||||
.feature-card p {
|
||||
font-size: 13px;
|
||||
font-weight: 300;
|
||||
line-height: 1.65;
|
||||
color: #AAA;
|
||||
}
|
||||
|
||||
/* Connection lines between feature cards */
|
||||
.features::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: calc(33.33% + 32px);
|
||||
width: calc(33.33% - 64px - 20px);
|
||||
height: 0;
|
||||
border-top: 1px dashed #D4CEBD;
|
||||
transform: translateX(10px);
|
||||
}
|
||||
.features::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
right: calc(33.33% + 32px);
|
||||
width: calc(33.33% - 64px - 20px);
|
||||
height: 0;
|
||||
border-top: 1px dashed #D4CEBD;
|
||||
transform: translateX(-10px);
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<!-- Navigation -->
|
||||
<nav>
|
||||
<div class="nav-logo">
|
||||
<div class="nav-logo-mark"><i data-lucide="zap" style="width:18px;height:18px;"></i></div>
|
||||
<span class="nav-logo-text">Nexus API</span>
|
||||
</div>
|
||||
<div class="nav-links">
|
||||
<a href="#" class="active">Docs</a>
|
||||
<a href="#">API</a>
|
||||
<a href="#">Changelog</a>
|
||||
<a href="#">Status</a>
|
||||
<a href="#">GitHub</a>
|
||||
</div>
|
||||
<div class="nav-right">
|
||||
<div class="search-box">
|
||||
<i data-lucide="search" style="width:13px;height:13px;color:#CCC;"></i>
|
||||
<span>Search documentation...</span>
|
||||
<kbd>/</kbd>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<!-- Hero -->
|
||||
<section class="hero">
|
||||
<div class="hero-content">
|
||||
<div class="hero-tag"><i data-lucide="sparkles" style="width:12px;height:12px;"></i> Unified AI Gateway</div>
|
||||
<h1>One API,<br>every AI model</h1>
|
||||
<p>Access GPT, Claude, Gemini, and 20+ models through a single endpoint. Intelligent routing, unified billing, zero vendor lock-in.</p>
|
||||
<div class="hero-buttons">
|
||||
<a href="#" class="btn-green"><i data-lucide="book-open" style="width:14px;height:14px;"></i> Get Started</a>
|
||||
<a href="#" class="btn-outline">API Reference</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="hero-visual">
|
||||
<!-- Flow diagram -->
|
||||
<div class="flow-diagram">
|
||||
<div class="flow-node">
|
||||
<div class="flow-node-box">Your App</div>
|
||||
<span class="flow-node-label">request</span>
|
||||
</div>
|
||||
<div class="flow-arrow"><div class="flow-arrow-line"></div></div>
|
||||
<div class="flow-node">
|
||||
<div class="flow-node-box highlight">Nexus</div>
|
||||
<span class="flow-node-label">routes</span>
|
||||
</div>
|
||||
<div class="flow-arrow"><div class="flow-arrow-line"></div></div>
|
||||
<div class="flow-models">
|
||||
<div class="flow-model-tag">GPT-4o</div>
|
||||
<div class="flow-model-tag">Claude 3.5</div>
|
||||
<div class="flow-model-tag">Gemini Pro</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Code block -->
|
||||
<div class="code-card">
|
||||
<div class="code-card-header">
|
||||
<div class="dots"><span></span><span></span><span></span></div>
|
||||
<span class="fname">quickstart.py</span>
|
||||
<i data-lucide="copy" style="width:13px;height:13px;color:#CCC;cursor:pointer;"></i>
|
||||
</div>
|
||||
<div class="code-card-body">
|
||||
<span class="kw">from</span> nexus <span class="kw">import</span> Client<br><br>
|
||||
client = Client(api_key=<span class="str">"your-key"</span>)<br>
|
||||
response = client.chat(<br>
|
||||
model=<span class="str">"auto"</span>, <span class="cmt"># intelligently routes</span><br>
|
||||
messages=[{<span class="str">"role"</span>: <span class="str">"user"</span>, <span class="str">"content"</span>: <span class="str">"Hello!"</span>}]<br>
|
||||
)
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Quick Links -->
|
||||
<div class="quick-links">
|
||||
<a href="#" class="quick-link"><i data-lucide="rocket" style="width:14px;height:14px;"></i> Getting Started</a>
|
||||
<a href="#" class="quick-link"><i data-lucide="file-text" style="width:14px;height:14px;"></i> API Reference</a>
|
||||
<a href="#" class="quick-link"><i data-lucide="layers" style="width:14px;height:14px;"></i> Models</a>
|
||||
<a href="#" class="quick-link"><i data-lucide="credit-card" style="width:14px;height:14px;"></i> Pricing</a>
|
||||
</div>
|
||||
|
||||
<!-- Features -->
|
||||
<section class="features">
|
||||
<div class="feature-card">
|
||||
<div class="feature-icon-wrap"><i data-lucide="git-branch" style="width:18px;height:18px;"></i></div>
|
||||
<h3>Model Routing</h3>
|
||||
<p>Automatically select the best model for each request based on task complexity, latency, and cost constraints.</p>
|
||||
</div>
|
||||
<div class="feature-card">
|
||||
<div class="feature-icon-wrap"><i data-lucide="trending-down" style="width:18px;height:18px;"></i></div>
|
||||
<h3>Cost Optimization</h3>
|
||||
<p>Reduce AI spend by up to 60% with intelligent selection and automatic fallback to cost-effective alternatives.</p>
|
||||
</div>
|
||||
<div class="feature-card">
|
||||
<div class="feature-icon-wrap"><i data-lucide="bar-chart-3" style="width:18px;height:18px;"></i></div>
|
||||
<h3>Usage Analytics</h3>
|
||||
<p>Real-time dashboards tracking token usage, latency, model performance, and cost breakdowns per project.</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Spec annotation -->
|
||||
<svg style="position:absolute;bottom:24px;right:64px;opacity:0.12;" width="120" height="40" viewBox="0 0 120 40" fill="none">
|
||||
<line x1="0" y1="20" x2="72" y2="20" stroke="#6B8F71" stroke-width="0.5"/>
|
||||
<circle cx="72" cy="20" r="2.5" fill="none" stroke="#6B8F71" stroke-width="0.5"/>
|
||||
<text x="82" y="23" font-family="Inter" font-size="8" fill="#6B8F71" letter-spacing="0.5">20+ models</text>
|
||||
</svg>
|
||||
|
||||
<script>lucide.createIcons();</script>
|
||||
</body>
|
||||
</html>
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 109 KiB |
@@ -0,0 +1,367 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=1440">
|
||||
<title>Alex Chen — Indie Developer & AI Creator</title>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@200;300;400;500;600&display=swap" rel="stylesheet">
|
||||
<script src="https://unpkg.com/lucide@latest"></script>
|
||||
<style>
|
||||
* { margin: 0; padding: 0; box-sizing: border-box; }
|
||||
body {
|
||||
width: 1440px;
|
||||
height: 900px;
|
||||
overflow: hidden;
|
||||
margin: 0;
|
||||
background: #FAFAF8;
|
||||
font-family: 'Inter', sans-serif;
|
||||
color: #2A2A28;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
/* GLASSMORPHISM NAV */
|
||||
nav {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 1440px;
|
||||
height: 64px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 0 80px;
|
||||
background: rgba(250, 250, 248, 0.72);
|
||||
backdrop-filter: blur(24px);
|
||||
-webkit-backdrop-filter: blur(24px);
|
||||
border-bottom: 1px solid rgba(0,0,0,0.04);
|
||||
z-index: 100;
|
||||
}
|
||||
nav .logo {
|
||||
font-weight: 500;
|
||||
font-size: 15px;
|
||||
letter-spacing: 0.02em;
|
||||
color: #2A2A28;
|
||||
}
|
||||
nav .logo .dot { color: #D4A574; }
|
||||
nav ul {
|
||||
list-style: none;
|
||||
display: flex;
|
||||
gap: 40px;
|
||||
}
|
||||
nav ul li a {
|
||||
font-weight: 400;
|
||||
font-size: 13px;
|
||||
color: #888;
|
||||
text-decoration: none;
|
||||
letter-spacing: 0.01em;
|
||||
transition: color 0.3s;
|
||||
}
|
||||
nav ul li a:hover { color: #2A2A28; }
|
||||
nav .nav-cta a {
|
||||
font-weight: 400;
|
||||
font-size: 12px;
|
||||
color: #2A2A28;
|
||||
text-decoration: none;
|
||||
padding: 8px 24px;
|
||||
border: 1px solid rgba(0,0,0,0.08);
|
||||
border-radius: 2px;
|
||||
transition: all 0.3s;
|
||||
letter-spacing: 0.02em;
|
||||
}
|
||||
nav .nav-cta a:hover {
|
||||
border-color: #D4A574;
|
||||
color: #D4A574;
|
||||
}
|
||||
|
||||
/* HERO LAYOUT */
|
||||
.hero {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 1440px;
|
||||
height: 900px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 0 80px;
|
||||
}
|
||||
|
||||
.hero-content {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 96px;
|
||||
width: 100%;
|
||||
max-width: 1200px;
|
||||
}
|
||||
|
||||
/* LEFT: TEXT */
|
||||
.hero-text {
|
||||
flex: 1;
|
||||
}
|
||||
.hero-text .greeting {
|
||||
font-weight: 400;
|
||||
font-size: 11px;
|
||||
color: #B0ACA4;
|
||||
letter-spacing: 4px;
|
||||
text-transform: uppercase;
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
.hero-text h1 {
|
||||
font-weight: 200;
|
||||
font-size: 80px;
|
||||
line-height: 1.02;
|
||||
letter-spacing: -0.04em;
|
||||
color: #2A2A28;
|
||||
}
|
||||
.hero-text h1 strong {
|
||||
font-weight: 500;
|
||||
}
|
||||
.hero-text h1 .gold-period {
|
||||
color: #D4A574;
|
||||
font-weight: 300;
|
||||
}
|
||||
.hero-text .tagline {
|
||||
font-weight: 300;
|
||||
font-size: 16px;
|
||||
line-height: 1.8;
|
||||
color: #999;
|
||||
margin-top: 32px;
|
||||
max-width: 440px;
|
||||
}
|
||||
|
||||
/* CTA BUTTONS */
|
||||
.hero-cta {
|
||||
display: flex;
|
||||
gap: 16px;
|
||||
margin-top: 48px;
|
||||
}
|
||||
.btn-primary {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
font-family: 'Inter', sans-serif;
|
||||
font-weight: 400;
|
||||
font-size: 13px;
|
||||
color: #FAFAF8;
|
||||
background: #2A2A28;
|
||||
border: none;
|
||||
padding: 14px 32px;
|
||||
border-radius: 2px;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s;
|
||||
text-decoration: none;
|
||||
letter-spacing: 0.02em;
|
||||
}
|
||||
.btn-primary:hover { background: #3A3A38; }
|
||||
.btn-secondary {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
font-family: 'Inter', sans-serif;
|
||||
font-weight: 400;
|
||||
font-size: 13px;
|
||||
color: #888;
|
||||
background: transparent;
|
||||
border: 1px solid rgba(0,0,0,0.08);
|
||||
padding: 14px 32px;
|
||||
border-radius: 2px;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s;
|
||||
text-decoration: none;
|
||||
letter-spacing: 0.02em;
|
||||
}
|
||||
.btn-secondary:hover { border-color: #D4A574; color: #D4A574; }
|
||||
|
||||
/* RIGHT: CARDS + PORTRAIT */
|
||||
.hero-visual {
|
||||
flex: 0 0 460px;
|
||||
position: relative;
|
||||
height: 520px;
|
||||
}
|
||||
|
||||
/* PORTRAIT */
|
||||
.portrait {
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
border-radius: 50%;
|
||||
background: #EDECE8;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 40px;
|
||||
box-shadow: 0 20px 60px rgba(0,0,0,0.06);
|
||||
overflow: hidden;
|
||||
}
|
||||
.portrait::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
bottom: 0; left: 50%;
|
||||
transform: translateX(-50%);
|
||||
width: 110px;
|
||||
height: 130px;
|
||||
background: #D8D6D0;
|
||||
border-radius: 55px 55px 0 0;
|
||||
}
|
||||
|
||||
/* FLOATING CARDS */
|
||||
.card {
|
||||
position: absolute;
|
||||
background: #FFFFFF;
|
||||
border: 1px solid rgba(0,0,0,0.04);
|
||||
border-radius: 2px;
|
||||
padding: 24px;
|
||||
box-shadow: 0 4px 24px rgba(0,0,0,0.03);
|
||||
}
|
||||
|
||||
.card-1 {
|
||||
top: 60px;
|
||||
left: 0;
|
||||
width: 220px;
|
||||
}
|
||||
.card-2 {
|
||||
top: 240px;
|
||||
left: 60px;
|
||||
width: 240px;
|
||||
}
|
||||
.card-3 {
|
||||
top: 180px;
|
||||
right: 0;
|
||||
width: 200px;
|
||||
}
|
||||
|
||||
.card .card-number {
|
||||
font-weight: 200;
|
||||
font-size: 32px;
|
||||
letter-spacing: -0.02em;
|
||||
color: #2A2A28;
|
||||
line-height: 1;
|
||||
}
|
||||
.card .card-number .gold { color: #D4A574; font-weight: 300; }
|
||||
.card .card-label {
|
||||
font-weight: 400;
|
||||
font-size: 10px;
|
||||
color: #B0ACA4;
|
||||
margin-top: 8px;
|
||||
letter-spacing: 2px;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
.card .card-desc {
|
||||
font-weight: 300;
|
||||
font-size: 12px;
|
||||
color: #999;
|
||||
margin-top: 8px;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
/* GOLD ACCENT LINE */
|
||||
.accent-line {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 100px;
|
||||
width: 48px;
|
||||
height: 2px;
|
||||
background: #D4A574;
|
||||
border-radius: 1px;
|
||||
}
|
||||
|
||||
/* Removed dot-grid — Build: zero decorative elements */
|
||||
|
||||
/* BOTTOM TICKER */
|
||||
.bottom-bar {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
width: 1440px;
|
||||
height: 48px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 48px;
|
||||
border-top: 1px solid rgba(0,0,0,0.04);
|
||||
}
|
||||
.bottom-bar span {
|
||||
font-weight: 300;
|
||||
font-size: 11px;
|
||||
color: #BBB;
|
||||
letter-spacing: 0.08em;
|
||||
}
|
||||
.bottom-bar .sep {
|
||||
width: 4px;
|
||||
height: 4px;
|
||||
border-radius: 50%;
|
||||
background: #D4A574;
|
||||
opacity: 0.5;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<!-- NAV -->
|
||||
<nav>
|
||||
<div class="logo">alex chen<span class="dot"> .</span></div>
|
||||
<ul>
|
||||
<li><a href="#work">Work</a></li>
|
||||
<li><a href="#content">Content</a></li>
|
||||
<li><a href="#services">Services</a></li>
|
||||
</ul>
|
||||
<div class="nav-cta">
|
||||
<a href="#contact">Get in Touch</a>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<!-- HERO -->
|
||||
<div class="hero">
|
||||
<div class="hero-content">
|
||||
<!-- TEXT -->
|
||||
<div class="hero-text">
|
||||
<div class="greeting">Indie Developer & AI Creator</div>
|
||||
<h1>Alex<br><strong>Chen</strong><span class="gold-period">.</span></h1>
|
||||
<p class="tagline">Building tools at the intersection of AI and creativity. Shipping products, writing stories, shaping ideas.</p>
|
||||
<div class="hero-cta">
|
||||
<a href="#work" class="btn-primary">
|
||||
View Work
|
||||
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14"/><path d="m12 5 7 7-7 7"/></svg>
|
||||
</a>
|
||||
<a href="#content" class="btn-secondary">Read Articles</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- VISUAL -->
|
||||
<div class="hero-visual">
|
||||
<div class="portrait"></div>
|
||||
|
||||
<div class="card card-1">
|
||||
<div class="card-number">300K<span class="gold">+</span></div>
|
||||
<div class="card-label">Followers</div>
|
||||
<div class="card-desc">Across platforms, building in public</div>
|
||||
</div>
|
||||
|
||||
<div class="card card-2">
|
||||
<div class="card-number"><span class="gold">#</span>1</div>
|
||||
<div class="card-label">App Store</div>
|
||||
<div class="card-desc">Top paid app, shipped as a solo developer</div>
|
||||
</div>
|
||||
|
||||
<div class="card card-3">
|
||||
<div class="card-number">100<span class="gold">+</span></div>
|
||||
<div class="card-label">Articles</div>
|
||||
<div class="card-desc">On AI, dev, and creative tools</div>
|
||||
</div>
|
||||
|
||||
<div class="accent-line"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- BOTTOM BAR -->
|
||||
<div class="bottom-bar">
|
||||
<span>Developer</span>
|
||||
<div class="sep"></div>
|
||||
<span>Writer</span>
|
||||
<div class="sep"></div>
|
||||
<span>AI Creator</span>
|
||||
<div class="sep"></div>
|
||||
<span>Speaker</span>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 60 KiB |
@@ -0,0 +1,368 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=1440">
|
||||
<title>Alex Chen — Indie Developer & AI Creator</title>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600&family=Space+Grotesk:wght@400;500;600;700&display=swap" rel="stylesheet">
|
||||
<script src="https://unpkg.com/lucide@latest"></script>
|
||||
<style>
|
||||
* { margin: 0; padding: 0; box-sizing: border-box; }
|
||||
body {
|
||||
width: 1440px;
|
||||
height: 900px;
|
||||
overflow: hidden;
|
||||
margin: 0;
|
||||
background: #FFFFFF;
|
||||
font-family: 'Helvetica Neue', Arial, sans-serif;
|
||||
color: #111111;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
/* NAV */
|
||||
nav {
|
||||
position: absolute;
|
||||
top: 0; left: 0; right: 0;
|
||||
height: 72px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 0 80px;
|
||||
border-bottom: 1px solid #111;
|
||||
z-index: 10;
|
||||
}
|
||||
nav .logo {
|
||||
font-family: 'Helvetica Neue', Arial, sans-serif;
|
||||
font-weight: 700;
|
||||
font-size: 16px;
|
||||
letter-spacing: 0.08em;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
nav .logo span { color: #E63946; }
|
||||
nav ul {
|
||||
list-style: none;
|
||||
display: flex;
|
||||
gap: 48px;
|
||||
}
|
||||
nav ul li a {
|
||||
font-family: 'Helvetica Neue', Arial, sans-serif;
|
||||
font-weight: 500;
|
||||
font-size: 11px;
|
||||
letter-spacing: 0.18em;
|
||||
text-transform: uppercase;
|
||||
text-decoration: none;
|
||||
color: #111;
|
||||
transition: color 0.2s;
|
||||
}
|
||||
nav ul li a:hover { color: #E63946; }
|
||||
nav .nav-contact a {
|
||||
background: #111;
|
||||
color: #fff;
|
||||
padding: 10px 28px;
|
||||
font-family: 'Helvetica Neue', Arial, sans-serif;
|
||||
font-weight: 500;
|
||||
font-size: 11px;
|
||||
letter-spacing: 0.14em;
|
||||
text-transform: uppercase;
|
||||
text-decoration: none;
|
||||
transition: background 0.2s;
|
||||
}
|
||||
nav .nav-contact a:hover { background: #E63946; }
|
||||
|
||||
/* MAIN GRID */
|
||||
.hero {
|
||||
position: absolute;
|
||||
top: 72px;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1px 1fr;
|
||||
grid-template-rows: 1fr;
|
||||
}
|
||||
|
||||
/* LEFT PANEL */
|
||||
.hero-left {
|
||||
padding: 64px 80px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
}
|
||||
.hero-left .intro-label {
|
||||
font-family: 'Helvetica Neue', Arial, sans-serif;
|
||||
font-size: 11px;
|
||||
letter-spacing: 0.2em;
|
||||
text-transform: uppercase;
|
||||
color: #999;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
.hero-left .name {
|
||||
font-family: 'Helvetica Neue', Arial, sans-serif;
|
||||
font-weight: 900;
|
||||
font-size: 112px;
|
||||
line-height: 0.92;
|
||||
letter-spacing: -0.03em;
|
||||
color: #111;
|
||||
}
|
||||
.hero-left .name .accent { color: #E63946; }
|
||||
.hero-left .tagline {
|
||||
font-family: 'Helvetica Neue', Arial, sans-serif;
|
||||
font-weight: 300;
|
||||
font-size: 20px;
|
||||
line-height: 1.6;
|
||||
color: #555;
|
||||
max-width: 480px;
|
||||
margin-top: 32px;
|
||||
}
|
||||
|
||||
/* STATS ROW */
|
||||
.stats-row {
|
||||
display: flex;
|
||||
gap: 0;
|
||||
border-top: 1px solid #111;
|
||||
padding-top: 32px;
|
||||
}
|
||||
.stat-item {
|
||||
flex: 1;
|
||||
position: relative;
|
||||
}
|
||||
.stat-item:not(:last-child)::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 0;
|
||||
height: 100%;
|
||||
width: 1px;
|
||||
background: #DDD;
|
||||
}
|
||||
.stat-item .stat-number {
|
||||
font-family: 'Helvetica Neue', Arial, sans-serif;
|
||||
font-weight: 700;
|
||||
font-size: 48px;
|
||||
letter-spacing: -0.02em;
|
||||
color: #111;
|
||||
line-height: 1;
|
||||
}
|
||||
.stat-item .stat-number .red { color: #E63946; }
|
||||
.stat-item .stat-label {
|
||||
font-family: 'Helvetica Neue', Arial, sans-serif;
|
||||
font-size: 11px;
|
||||
letter-spacing: 0.14em;
|
||||
text-transform: uppercase;
|
||||
color: #999;
|
||||
margin-top: 8px;
|
||||
}
|
||||
|
||||
/* CENTER DIVIDER */
|
||||
.divider {
|
||||
background: #111;
|
||||
}
|
||||
|
||||
/* RIGHT PANEL */
|
||||
.hero-right {
|
||||
padding: 64px 80px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
position: relative;
|
||||
background: #FAFAFA;
|
||||
}
|
||||
|
||||
/* PORTRAIT PLACEHOLDER */
|
||||
.portrait-wrap {
|
||||
position: relative;
|
||||
width: 320px;
|
||||
height: 320px;
|
||||
}
|
||||
.portrait-circle {
|
||||
width: 320px;
|
||||
height: 320px;
|
||||
border-radius: 50%;
|
||||
background: #E8E8E8;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
.portrait-circle::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
bottom: 0; left: 50%;
|
||||
transform: translateX(-50%);
|
||||
width: 180px;
|
||||
height: 200px;
|
||||
background: #D0D0D0;
|
||||
border-radius: 90px 90px 0 0;
|
||||
}
|
||||
.portrait-frame {
|
||||
position: absolute;
|
||||
top: -12px;
|
||||
left: -12px;
|
||||
width: 344px;
|
||||
height: 344px;
|
||||
border: 1px solid #E63946;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
/* RED INDEX MARKER */
|
||||
.index-marker {
|
||||
position: absolute;
|
||||
bottom: 64px;
|
||||
right: 80px;
|
||||
text-align: right;
|
||||
}
|
||||
.index-marker .idx-num {
|
||||
font-family: 'Helvetica Neue', Arial, sans-serif;
|
||||
font-weight: 700;
|
||||
font-size: 120px;
|
||||
line-height: 0.85;
|
||||
color: #E63946;
|
||||
opacity: 0.1;
|
||||
}
|
||||
.index-marker .idx-label {
|
||||
font-family: 'Helvetica Neue', Arial, sans-serif;
|
||||
font-size: 11px;
|
||||
letter-spacing: 0.18em;
|
||||
text-transform: uppercase;
|
||||
color: #999;
|
||||
margin-top: 8px;
|
||||
}
|
||||
|
||||
/* DECORATIVE ELEMENTS */
|
||||
.corner-mark {
|
||||
position: absolute;
|
||||
top: 64px;
|
||||
right: 80px;
|
||||
font-family: 'Helvetica Neue', Arial, sans-serif;
|
||||
font-size: 11px;
|
||||
letter-spacing: 0.18em;
|
||||
text-transform: uppercase;
|
||||
color: #CCC;
|
||||
}
|
||||
|
||||
.hero-right .role-tags {
|
||||
margin-top: 40px;
|
||||
display: flex;
|
||||
gap: 12px;
|
||||
}
|
||||
.role-tags span {
|
||||
font-family: 'Helvetica Neue', Arial, sans-serif;
|
||||
font-size: 11px;
|
||||
letter-spacing: 0.12em;
|
||||
text-transform: uppercase;
|
||||
padding: 8px 20px;
|
||||
border: 1px solid #CCC;
|
||||
color: #666;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
.role-tags span:hover {
|
||||
border-color: #E63946;
|
||||
color: #E63946;
|
||||
}
|
||||
|
||||
/* SCROLL CTA */
|
||||
.scroll-cta {
|
||||
position: absolute;
|
||||
bottom: 28px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
.scroll-cta span {
|
||||
font-family: 'Helvetica Neue', Arial, sans-serif;
|
||||
font-size: 10px;
|
||||
letter-spacing: 0.2em;
|
||||
text-transform: uppercase;
|
||||
color: #BBB;
|
||||
}
|
||||
.scroll-cta .arrow-down {
|
||||
width: 1px;
|
||||
height: 32px;
|
||||
background: #CCC;
|
||||
position: relative;
|
||||
}
|
||||
.scroll-cta .arrow-down::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: -3px;
|
||||
width: 7px;
|
||||
height: 7px;
|
||||
border-right: 1px solid #CCC;
|
||||
border-bottom: 1px solid #CCC;
|
||||
transform: rotate(45deg);
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<!-- NAVIGATION -->
|
||||
<nav>
|
||||
<div class="logo">Alex<span>.</span>Chen</div>
|
||||
<ul>
|
||||
<li><a href="#work">Work</a></li>
|
||||
<li><a href="#content">Content</a></li>
|
||||
<li><a href="#services">Services</a></li>
|
||||
</ul>
|
||||
<div class="nav-contact">
|
||||
<a href="#contact">Contact</a>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<!-- HERO -->
|
||||
<div class="hero">
|
||||
<!-- LEFT -->
|
||||
<div class="hero-left">
|
||||
<div>
|
||||
<div class="intro-label">Indie Developer / AI Creator</div>
|
||||
<h1 class="name">Alex<br>Chen<span class="accent">.</span></h1>
|
||||
<p class="tagline">Building tools at the intersection of AI and creativity.</p>
|
||||
</div>
|
||||
<div class="stats-row">
|
||||
<div class="stat-item">
|
||||
<div class="stat-number">300K<span class="red">+</span></div>
|
||||
<div class="stat-label">Followers</div>
|
||||
</div>
|
||||
<div class="stat-item" style="padding-left: 32px;">
|
||||
<div class="stat-number">#1</div>
|
||||
<div class="stat-label">App Store</div>
|
||||
</div>
|
||||
<div class="stat-item" style="padding-left: 32px;">
|
||||
<div class="stat-number">100<span class="red">+</span></div>
|
||||
<div class="stat-label">Articles</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- DIVIDER -->
|
||||
<div class="divider"></div>
|
||||
|
||||
<!-- RIGHT -->
|
||||
<div class="hero-right">
|
||||
<div class="corner-mark">Portfolio 2026</div>
|
||||
<div class="portrait-wrap">
|
||||
<div class="portrait-circle"></div>
|
||||
<div class="portrait-frame"></div>
|
||||
</div>
|
||||
<div class="role-tags">
|
||||
<span>Developer</span>
|
||||
<span>Writer</span>
|
||||
<span>Creator</span>
|
||||
</div>
|
||||
<div class="index-marker">
|
||||
<div class="idx-num">01</div>
|
||||
<div class="idx-label">Hero</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- SCROLL CTA -->
|
||||
<div class="scroll-cta">
|
||||
<span>Scroll</span>
|
||||
<div class="arrow-down"></div>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 56 KiB |
@@ -0,0 +1,459 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=1440">
|
||||
<title>Alex Chen — Indie Developer & AI Creator</title>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500&family=Noto+Serif+SC:wght@300;400;600&display=swap" rel="stylesheet">
|
||||
<script src="https://unpkg.com/lucide@latest"></script>
|
||||
<style>
|
||||
* { margin: 0; padding: 0; box-sizing: border-box; }
|
||||
body {
|
||||
width: 1440px;
|
||||
height: 900px;
|
||||
overflow: hidden;
|
||||
margin: 0;
|
||||
background: #F5F0EB;
|
||||
font-family: 'Inter', sans-serif;
|
||||
color: #3D3D3A;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
/* PAPER TEXTURE */
|
||||
body::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0; left: 0;
|
||||
width: 100%; height: 100%;
|
||||
background:
|
||||
repeating-linear-gradient(
|
||||
0deg,
|
||||
transparent,
|
||||
transparent 2px,
|
||||
rgba(0,0,0,0.008) 2px,
|
||||
rgba(0,0,0,0.008) 4px
|
||||
),
|
||||
repeating-linear-gradient(
|
||||
90deg,
|
||||
transparent,
|
||||
transparent 2px,
|
||||
rgba(0,0,0,0.005) 2px,
|
||||
rgba(0,0,0,0.005) 4px
|
||||
);
|
||||
pointer-events: none;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
/* NAV */
|
||||
nav {
|
||||
position: absolute;
|
||||
top: 0; left: 0; right: 0;
|
||||
height: 72px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 0 80px;
|
||||
z-index: 10;
|
||||
}
|
||||
nav .logo {
|
||||
font-family: 'Noto Serif SC', serif;
|
||||
font-weight: 400;
|
||||
font-size: 16px;
|
||||
color: #3D3D3A;
|
||||
letter-spacing: 0.02em;
|
||||
}
|
||||
nav ul {
|
||||
list-style: none;
|
||||
display: flex;
|
||||
gap: 36px;
|
||||
align-items: center;
|
||||
}
|
||||
nav ul li a {
|
||||
font-weight: 400;
|
||||
font-size: 13px;
|
||||
color: #8A8A84;
|
||||
text-decoration: none;
|
||||
letter-spacing: 0.01em;
|
||||
transition: color 0.3s;
|
||||
}
|
||||
nav ul li a:hover { color: #3D3D3A; }
|
||||
nav ul li.active a { color: #3D3D3A; }
|
||||
|
||||
/* Hairline below nav */
|
||||
nav::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
width: 48px;
|
||||
height: 1px;
|
||||
background: #C8C2B6;
|
||||
}
|
||||
|
||||
/* MAIN LAYOUT - ASYMMETRIC */
|
||||
.hero {
|
||||
position: absolute;
|
||||
top: 72px;
|
||||
left: 0;
|
||||
width: 1440px;
|
||||
height: 828px;
|
||||
display: grid;
|
||||
grid-template-columns: 120px 1fr 400px 120px;
|
||||
grid-template-rows: 1fr;
|
||||
align-items: center;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
/* LEFT MARGIN ELEMENT */
|
||||
.margin-left {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: flex-end;
|
||||
padding-bottom: 80px;
|
||||
height: 100%;
|
||||
}
|
||||
.margin-left .vertical-text {
|
||||
writing-mode: vertical-rl;
|
||||
font-size: 10px;
|
||||
letter-spacing: 0.18em;
|
||||
color: #B8B2A6;
|
||||
font-weight: 300;
|
||||
}
|
||||
|
||||
/* CENTER CONTENT */
|
||||
.hero-center {
|
||||
padding: 0 40px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.hero-center .section-label {
|
||||
font-size: 10px;
|
||||
letter-spacing: 0.16em;
|
||||
text-transform: uppercase;
|
||||
color: #6B8F71;
|
||||
font-weight: 500;
|
||||
margin-bottom: 32px;
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
.hero-center h1 {
|
||||
font-family: 'Noto Serif SC', serif;
|
||||
font-weight: 300;
|
||||
font-size: 56px;
|
||||
line-height: 1.25;
|
||||
letter-spacing: -0.01em;
|
||||
color: #2D3436;
|
||||
}
|
||||
.hero-center h1 .serif-accent {
|
||||
font-family: 'Noto Serif SC', serif;
|
||||
font-weight: 600;
|
||||
font-style: normal;
|
||||
color: #2D3436;
|
||||
}
|
||||
|
||||
/* HAIRLINE DIVIDER */
|
||||
.hairline {
|
||||
width: 48px;
|
||||
height: 1px;
|
||||
background: #C8C2B6;
|
||||
margin: 36px 0;
|
||||
}
|
||||
|
||||
.hero-center .tagline {
|
||||
font-weight: 300;
|
||||
font-size: 16px;
|
||||
line-height: 1.8;
|
||||
color: #8A8A84;
|
||||
max-width: 420px;
|
||||
}
|
||||
|
||||
/* STATS - HORIZONTAL */
|
||||
.stats {
|
||||
display: flex;
|
||||
gap: 48px;
|
||||
margin-top: 48px;
|
||||
}
|
||||
.stat {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
.stat .stat-value {
|
||||
font-family: 'Noto Serif SC', serif;
|
||||
font-weight: 600;
|
||||
font-size: 28px;
|
||||
color: #2D3436;
|
||||
letter-spacing: -0.01em;
|
||||
line-height: 1;
|
||||
}
|
||||
.stat .stat-desc {
|
||||
font-size: 11px;
|
||||
color: #B8B2A6;
|
||||
margin-top: 8px;
|
||||
letter-spacing: 0.04em;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
/* CTA */
|
||||
.hero-cta {
|
||||
margin-top: 48px;
|
||||
display: flex;
|
||||
gap: 20px;
|
||||
align-items: center;
|
||||
}
|
||||
.cta-link {
|
||||
font-weight: 500;
|
||||
font-size: 13px;
|
||||
color: #3D3D3A;
|
||||
text-decoration: none;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
padding: 12px 0;
|
||||
border-bottom: 1px solid #C8C2B6;
|
||||
transition: all 0.3s;
|
||||
}
|
||||
.cta-link:hover { border-color: #6B8F71; color: #6B8F71; }
|
||||
.cta-link svg { width: 14px; height: 14px; }
|
||||
|
||||
.cta-dot {
|
||||
width: 4px;
|
||||
height: 4px;
|
||||
border-radius: 50%;
|
||||
background: #C8C2B6;
|
||||
}
|
||||
|
||||
.cta-subtle {
|
||||
font-weight: 300;
|
||||
font-size: 13px;
|
||||
color: #B8B2A6;
|
||||
text-decoration: none;
|
||||
transition: color 0.3s;
|
||||
}
|
||||
.cta-subtle:hover { color: #3D3D3A; }
|
||||
|
||||
/* RIGHT PANEL */
|
||||
.hero-right {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 0 20px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
/* PORTRAIT */
|
||||
.portrait-container {
|
||||
position: relative;
|
||||
}
|
||||
.portrait {
|
||||
width: 180px;
|
||||
height: 180px;
|
||||
border-radius: 50%;
|
||||
background: #EAE5DD;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
border: 1px solid rgba(200, 194, 182, 0.4);
|
||||
}
|
||||
.portrait::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
bottom: 0; left: 50%;
|
||||
transform: translateX(-50%);
|
||||
width: 96px;
|
||||
height: 110px;
|
||||
background: #D5CEC4;
|
||||
border-radius: 48px 48px 0 0;
|
||||
}
|
||||
.portrait-ring {
|
||||
position: absolute;
|
||||
top: -16px; left: -16px;
|
||||
width: 212px;
|
||||
height: 212px;
|
||||
border-radius: 50%;
|
||||
border: 1px solid rgba(107, 143, 113, 0.2);
|
||||
}
|
||||
|
||||
/* BIO CARD */
|
||||
.bio-card {
|
||||
margin-top: 36px;
|
||||
background: rgba(255,255,255,0.5);
|
||||
border: 1px solid rgba(0,0,0,0.04);
|
||||
border-radius: 12px;
|
||||
padding: 24px 28px;
|
||||
width: 260px;
|
||||
backdrop-filter: blur(8px);
|
||||
}
|
||||
.bio-card .bio-name {
|
||||
font-family: 'Noto Serif SC', serif;
|
||||
font-weight: 600;
|
||||
font-size: 15px;
|
||||
color: #3D3D3A;
|
||||
}
|
||||
.bio-card .bio-role {
|
||||
font-size: 12px;
|
||||
color: #B8B2A6;
|
||||
margin-top: 4px;
|
||||
font-weight: 300;
|
||||
}
|
||||
.bio-card .bio-hairline {
|
||||
width: 32px;
|
||||
height: 1px;
|
||||
background: #C8C2B6;
|
||||
margin: 16px 0;
|
||||
}
|
||||
.bio-card .bio-desc {
|
||||
font-size: 12px;
|
||||
line-height: 1.7;
|
||||
color: #8A8A84;
|
||||
font-weight: 300;
|
||||
}
|
||||
|
||||
/* RIGHT MARGIN */
|
||||
.margin-right {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
padding-top: 80px;
|
||||
height: 100%;
|
||||
}
|
||||
.margin-right .year {
|
||||
writing-mode: vertical-rl;
|
||||
font-size: 10px;
|
||||
letter-spacing: 0.18em;
|
||||
color: #C8C2B6;
|
||||
font-weight: 300;
|
||||
}
|
||||
|
||||
/* DECORATIVE: FLOATING LEAF/ORGANIC SHAPE */
|
||||
.organic-shape {
|
||||
position: absolute;
|
||||
top: 140px;
|
||||
right: 280px;
|
||||
width: 60px;
|
||||
height: 80px;
|
||||
z-index: 3;
|
||||
opacity: 0.08;
|
||||
}
|
||||
.organic-shape svg {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
/* BOTTOM AREA */
|
||||
.bottom-zen {
|
||||
position: absolute;
|
||||
bottom: 40px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 24px;
|
||||
z-index: 5;
|
||||
}
|
||||
.bottom-zen .zen-line {
|
||||
width: 48px;
|
||||
height: 1px;
|
||||
background: #C8C2B6;
|
||||
}
|
||||
.bottom-zen .zen-text {
|
||||
font-size: 10px;
|
||||
letter-spacing: 0.14em;
|
||||
color: #C8C2B6;
|
||||
font-weight: 300;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<!-- NAV -->
|
||||
<nav>
|
||||
<div class="logo">Alex Chen</div>
|
||||
<ul>
|
||||
<li class="active"><a href="#work">Work</a></li>
|
||||
<li><a href="#content">Content</a></li>
|
||||
<li><a href="#services">Services</a></li>
|
||||
<li><a href="#contact">Contact</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
|
||||
<!-- DECORATIVE: Subtle spec annotation -->
|
||||
<svg style="position:absolute;top:100px;right:340px;z-index:3;opacity:0.15;" width="60" height="60" viewBox="0 0 60 60" fill="none">
|
||||
<circle cx="30" cy="30" r="28" stroke="#6B8F71" stroke-width="0.5"/>
|
||||
<circle cx="30" cy="30" r="18" stroke="#6B8F71" stroke-width="0.5" stroke-dasharray="2,4"/>
|
||||
<line x1="30" y1="0" x2="30" y2="60" stroke="#6B8F71" stroke-width="0.3"/>
|
||||
<line x1="0" y1="30" x2="60" y2="30" stroke="#6B8F71" stroke-width="0.3"/>
|
||||
</svg>
|
||||
|
||||
<!-- HERO -->
|
||||
<div class="hero">
|
||||
<!-- LEFT MARGIN -->
|
||||
<div class="margin-left">
|
||||
<div class="vertical-text">PORTFOLIO</div>
|
||||
</div>
|
||||
|
||||
<!-- CENTER -->
|
||||
<div class="hero-center">
|
||||
<div class="section-label">Indie Developer & AI Creator</div>
|
||||
<h1>Building tools<br>at the intersection<br>of <span class="serif-accent">AI</span> and <span class="serif-accent">creativity</span></h1>
|
||||
<div class="hairline"></div>
|
||||
<p class="tagline">I design, build, and write about the things that emerge when technology meets human imagination.</p>
|
||||
|
||||
<div class="stats">
|
||||
<div class="stat">
|
||||
<div class="stat-value">300K+</div>
|
||||
<div class="stat-desc">followers</div>
|
||||
</div>
|
||||
<div class="stat">
|
||||
<div class="stat-value">No. 1</div>
|
||||
<div class="stat-desc">App Store</div>
|
||||
</div>
|
||||
<div class="stat">
|
||||
<div class="stat-value">100+</div>
|
||||
<div class="stat-desc">articles published</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="hero-cta">
|
||||
<a href="#work" class="cta-link">
|
||||
Explore Work
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14"/><path d="m12 5 7 7-7 7"/></svg>
|
||||
</a>
|
||||
<div class="cta-dot"></div>
|
||||
<a href="#content" class="cta-subtle">Read Writing</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- RIGHT -->
|
||||
<div class="hero-right">
|
||||
<div class="portrait-container">
|
||||
<div class="portrait"></div>
|
||||
<div class="portrait-ring"></div>
|
||||
</div>
|
||||
<div class="bio-card">
|
||||
<div class="bio-name">Alex Chen</div>
|
||||
<div class="bio-role">Developer / Writer / Creator</div>
|
||||
<div class="bio-hairline"></div>
|
||||
<div class="bio-desc">Shipping AI-powered products as an independent maker. Writing about the craft of building.</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- RIGHT MARGIN -->
|
||||
<div class="margin-right">
|
||||
<div class="year">2026</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- BOTTOM ZEN -->
|
||||
<div class="bottom-zen">
|
||||
<div class="zen-line"></div>
|
||||
<div class="zen-text">Design as inquiry</div>
|
||||
<div class="zen-line"></div>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 125 KiB |
@@ -0,0 +1,493 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=1440">
|
||||
<title>Meridian — Business Intelligence for Modern Teams</title>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@200;300;400;500;600&display=swap" rel="stylesheet">
|
||||
<script src="https://unpkg.com/lucide@latest"></script>
|
||||
<style>
|
||||
* { margin: 0; padding: 0; box-sizing: border-box; }
|
||||
body {
|
||||
width: 1440px;
|
||||
height: 900px;
|
||||
overflow: hidden;
|
||||
margin: 0;
|
||||
font-family: 'Inter', sans-serif;
|
||||
background: #FAFAF8;
|
||||
color: #1a1a1a;
|
||||
}
|
||||
|
||||
/* NAV */
|
||||
nav {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 0 96px;
|
||||
height: 80px;
|
||||
}
|
||||
.nav-logo {
|
||||
font-size: 20px;
|
||||
font-weight: 500;
|
||||
letter-spacing: -0.3px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
color: #1a1a1a;
|
||||
}
|
||||
.nav-logo-icon {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
background: #E8E4DF;
|
||||
border-radius: 2px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
.nav-logo-icon svg { width: 18px; height: 18px; color: #D4A574; }
|
||||
.nav-links {
|
||||
display: flex;
|
||||
gap: 40px;
|
||||
list-style: none;
|
||||
}
|
||||
.nav-links a {
|
||||
font-size: 14px;
|
||||
font-weight: 400;
|
||||
text-decoration: none;
|
||||
color: #777;
|
||||
transition: color 0.2s;
|
||||
}
|
||||
.nav-links a:hover { color: #1a1a1a; }
|
||||
.nav-right {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 24px;
|
||||
}
|
||||
.nav-signin {
|
||||
font-size: 14px;
|
||||
font-weight: 400;
|
||||
text-decoration: none;
|
||||
color: #777;
|
||||
transition: color 0.2s;
|
||||
}
|
||||
.nav-signin:hover { color: #1a1a1a; }
|
||||
.nav-cta {
|
||||
font-size: 13px;
|
||||
font-weight: 400;
|
||||
padding: 10px 24px;
|
||||
background: #1a1a1a;
|
||||
color: #FAFAF8;
|
||||
border: none;
|
||||
border-radius: 2px;
|
||||
cursor: pointer;
|
||||
transition: background 0.2s;
|
||||
}
|
||||
.nav-cta:hover { background: #333; }
|
||||
|
||||
/* HERO LAYOUT */
|
||||
.hero {
|
||||
padding: 24px 96px 0 96px;
|
||||
display: grid;
|
||||
grid-template-columns: 480px 1fr;
|
||||
gap: 64px;
|
||||
align-items: start;
|
||||
height: calc(900px - 80px);
|
||||
position: relative;
|
||||
}
|
||||
|
||||
/* LEFT TEXT */
|
||||
.hero-text {
|
||||
padding-top: 48px;
|
||||
}
|
||||
.hero-badge {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 0;
|
||||
padding: 0;
|
||||
background: transparent;
|
||||
margin-bottom: 32px;
|
||||
}
|
||||
.hero-badge-dot {
|
||||
display: none;
|
||||
}
|
||||
.hero-badge span {
|
||||
font-size: 10px;
|
||||
font-weight: 400;
|
||||
color: #B0ACA4;
|
||||
letter-spacing: 4px;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
.hero-headline {
|
||||
font-size: 48px;
|
||||
font-weight: 300;
|
||||
line-height: 1.15;
|
||||
letter-spacing: -1.5px;
|
||||
margin-bottom: 24px;
|
||||
color: #1a1a1a;
|
||||
}
|
||||
.hero-headline em {
|
||||
font-style: italic;
|
||||
font-weight: 300;
|
||||
color: #1a1a1a;
|
||||
}
|
||||
.hero-subtitle {
|
||||
font-size: 17px;
|
||||
font-weight: 300;
|
||||
line-height: 1.7;
|
||||
color: #888;
|
||||
margin-bottom: 48px;
|
||||
max-width: 400px;
|
||||
}
|
||||
.hero-ctas {
|
||||
display: flex;
|
||||
gap: 16px;
|
||||
margin-bottom: 64px;
|
||||
}
|
||||
.btn-primary {
|
||||
font-family: 'Inter', sans-serif;
|
||||
font-size: 14px;
|
||||
font-weight: 400;
|
||||
padding: 14px 32px;
|
||||
background: #1a1a1a;
|
||||
color: #FAFAF8;
|
||||
border: none;
|
||||
border-radius: 2px;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
.btn-primary:hover { background: #333; }
|
||||
.btn-secondary {
|
||||
font-family: 'Inter', sans-serif;
|
||||
font-size: 14px;
|
||||
font-weight: 400;
|
||||
padding: 14px 32px;
|
||||
background: transparent;
|
||||
color: #777;
|
||||
border: 1px solid #ddd;
|
||||
border-radius: 2px;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
.btn-secondary:hover { border-color: #aaa; color: #1a1a1a; }
|
||||
.btn-secondary svg { width: 15px; height: 15px; }
|
||||
|
||||
/* METRICS ROW */
|
||||
.metrics {
|
||||
display: flex;
|
||||
gap: 48px;
|
||||
}
|
||||
.metric {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 4px;
|
||||
}
|
||||
.metric-value {
|
||||
font-size: 36px;
|
||||
font-weight: 200;
|
||||
letter-spacing: -1px;
|
||||
color: #1a1a1a;
|
||||
}
|
||||
.metric-value span { color: #D4A574; }
|
||||
.metric-label {
|
||||
font-size: 12px;
|
||||
font-weight: 400;
|
||||
color: #aaa;
|
||||
letter-spacing: 0.3px;
|
||||
}
|
||||
|
||||
/* RIGHT — DASHBOARD */
|
||||
.hero-dashboard {
|
||||
position: relative;
|
||||
padding-top: 16px;
|
||||
}
|
||||
.dashboard-card {
|
||||
background: #FFFFFF;
|
||||
border-radius: 2px;
|
||||
box-shadow:
|
||||
0 1px 2px rgba(0,0,0,0.02),
|
||||
0 4px 16px rgba(0,0,0,0.04);
|
||||
padding: 28px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
/* Dashboard header */
|
||||
.dash-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
.dash-title {
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
color: #1a1a1a;
|
||||
}
|
||||
.dash-period {
|
||||
font-size: 12px;
|
||||
font-weight: 400;
|
||||
color: #aaa;
|
||||
padding: 4px 12px;
|
||||
border: 1px solid #eee;
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
/* KPI strip */
|
||||
.kpi-strip {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, 1fr);
|
||||
gap: 1px;
|
||||
background: #f0eeeb;
|
||||
border-radius: 2px;
|
||||
overflow: hidden;
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
.kpi-item {
|
||||
background: #FAFAF8;
|
||||
padding: 18px 16px;
|
||||
text-align: center;
|
||||
}
|
||||
.kpi-item-value {
|
||||
font-size: 22px;
|
||||
font-weight: 300;
|
||||
color: #1a1a1a;
|
||||
letter-spacing: -0.5px;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
.kpi-item-label {
|
||||
font-size: 10px;
|
||||
font-weight: 500;
|
||||
color: #bbb;
|
||||
letter-spacing: 0.5px;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
/* Chart */
|
||||
.chart-container {
|
||||
margin-bottom: 24px;
|
||||
position: relative;
|
||||
height: 200px;
|
||||
}
|
||||
.chart-svg {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
/* Bottom section */
|
||||
.dash-bottom-row {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 16px;
|
||||
}
|
||||
.insight-card {
|
||||
background: #FAFAF8;
|
||||
border-radius: 2px;
|
||||
padding: 16px;
|
||||
}
|
||||
.insight-icon {
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
background: #F0EBE3;
|
||||
border-radius: 2px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
.insight-icon svg { width: 14px; height: 14px; color: #D4A574; }
|
||||
.insight-title {
|
||||
font-size: 12px;
|
||||
font-weight: 500;
|
||||
color: #1a1a1a;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
.insight-desc {
|
||||
font-size: 11px;
|
||||
font-weight: 300;
|
||||
color: #999;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
/* TRUST BAR */
|
||||
.trust-bar {
|
||||
position: absolute;
|
||||
bottom: 24px;
|
||||
left: 96px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 40px;
|
||||
}
|
||||
.trust-label {
|
||||
font-size: 11px;
|
||||
font-weight: 400;
|
||||
color: #ccc;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.trust-logos {
|
||||
display: flex;
|
||||
gap: 40px;
|
||||
align-items: center;
|
||||
}
|
||||
.trust-logo {
|
||||
font-size: 14px;
|
||||
font-weight: 400;
|
||||
color: #ccc;
|
||||
letter-spacing: 0.3px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<!-- NAV -->
|
||||
<nav>
|
||||
<div class="nav-logo">
|
||||
<div class="nav-logo-icon">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||||
<polygon points="12 2 22 8.5 22 15.5 12 22 2 15.5 2 8.5 12 2"/>
|
||||
</svg>
|
||||
</div>
|
||||
Meridian
|
||||
</div>
|
||||
<ul class="nav-links">
|
||||
<li><a href="#">Product</a></li>
|
||||
<li><a href="#">Pricing</a></li>
|
||||
<li><a href="#">Docs</a></li>
|
||||
<li><a href="#">Blog</a></li>
|
||||
</ul>
|
||||
<div class="nav-right">
|
||||
<a href="#" class="nav-signin">Sign In</a>
|
||||
<button class="nav-cta">Get Started</button>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<!-- HERO -->
|
||||
<div class="hero">
|
||||
|
||||
<!-- LEFT -->
|
||||
<div class="hero-text">
|
||||
<div class="hero-badge">
|
||||
<div class="hero-badge-dot"></div>
|
||||
<span>Business Intelligence for Modern Teams</span>
|
||||
</div>
|
||||
<h1 class="hero-headline">Turn data into <em>decisions,</em> not dashboards<span style="color:#D4A574;font-weight:300;">.</span></h1>
|
||||
<p class="hero-subtitle">AI-powered analytics that tells you what matters, when it matters. Less noise, more clarity.</p>
|
||||
<div class="hero-ctas">
|
||||
<button class="btn-primary">Start Free Trial</button>
|
||||
<button class="btn-secondary">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polygon points="5 3 19 12 5 21 5 3"/></svg>
|
||||
Watch Demo
|
||||
</button>
|
||||
</div>
|
||||
<div class="metrics">
|
||||
<div class="metric">
|
||||
<div class="metric-value">3<span>x</span></div>
|
||||
<div class="metric-label">Faster insights</div>
|
||||
</div>
|
||||
<div class="metric">
|
||||
<div class="metric-value">50<span>%</span></div>
|
||||
<div class="metric-label">Less meeting time</div>
|
||||
</div>
|
||||
<div class="metric">
|
||||
<div class="metric-value">99.9<span>%</span></div>
|
||||
<div class="metric-label">Uptime SLA</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- RIGHT — FLOATING DASHBOARD -->
|
||||
<div class="hero-dashboard">
|
||||
<div class="dashboard-card">
|
||||
<div class="dash-header">
|
||||
<div class="dash-title">Performance Overview</div>
|
||||
<div class="dash-period">Last 30 days</div>
|
||||
</div>
|
||||
|
||||
<div class="kpi-strip">
|
||||
<div class="kpi-item">
|
||||
<div class="kpi-item-value">$2.4M</div>
|
||||
<div class="kpi-item-label">Revenue</div>
|
||||
</div>
|
||||
<div class="kpi-item">
|
||||
<div class="kpi-item-value">84.2K</div>
|
||||
<div class="kpi-item-label">Users</div>
|
||||
</div>
|
||||
<div class="kpi-item">
|
||||
<div class="kpi-item-value">1.2%</div>
|
||||
<div class="kpi-item-label">Churn</div>
|
||||
</div>
|
||||
<div class="kpi-item">
|
||||
<div class="kpi-item-value">$142</div>
|
||||
<div class="kpi-item-label">ARPU</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- SVG Chart -->
|
||||
<div class="chart-container">
|
||||
<svg class="chart-svg" viewBox="0 0 700 200" preserveAspectRatio="none">
|
||||
<!-- Grid lines -->
|
||||
<line x1="0" y1="50" x2="700" y2="50" stroke="#f0eeeb" stroke-width="1"/>
|
||||
<line x1="0" y1="100" x2="700" y2="100" stroke="#f0eeeb" stroke-width="1"/>
|
||||
<line x1="0" y1="150" x2="700" y2="150" stroke="#f0eeeb" stroke-width="1"/>
|
||||
|
||||
<!-- Area fill -->
|
||||
<defs>
|
||||
<linearGradient id="areaGrad" x1="0" y1="0" x2="0" y2="1">
|
||||
<stop offset="0%" stop-color="#D4A574" stop-opacity="0.15"/>
|
||||
<stop offset="100%" stop-color="#D4A574" stop-opacity="0.01"/>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<path d="M0,160 C50,155 100,140 150,120 C200,100 250,110 300,85 C350,60 400,70 450,50 C500,30 550,45 600,35 C650,25 680,20 700,15 L700,200 L0,200 Z" fill="url(#areaGrad)"/>
|
||||
|
||||
<!-- Main line -->
|
||||
<path d="M0,160 C50,155 100,140 150,120 C200,100 250,110 300,85 C350,60 400,70 450,50 C500,30 550,45 600,35 C650,25 680,20 700,15" fill="none" stroke="#D4A574" stroke-width="2.5" stroke-linecap="round"/>
|
||||
|
||||
<!-- Secondary line -->
|
||||
<path d="M0,170 C50,165 100,158 150,150 C200,142 250,145 300,135 C350,125 400,128 450,118 C500,108 550,112 600,105 C650,98 680,95 700,90" fill="none" stroke="#e0d5c8" stroke-width="1.5" stroke-dasharray="4,4"/>
|
||||
|
||||
<!-- Data point -->
|
||||
<circle cx="600" cy="35" r="5" fill="#D4A574"/>
|
||||
<circle cx="600" cy="35" r="8" fill="none" stroke="#D4A574" stroke-width="1" opacity="0.4"/>
|
||||
</svg>
|
||||
</div>
|
||||
|
||||
<div class="dash-bottom-row">
|
||||
<div class="insight-card">
|
||||
<div class="insight-icon">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M13 2L3 14h9l-1 8 10-12h-9l1-8z"/></svg>
|
||||
</div>
|
||||
<div class="insight-title">AI Insight: Revenue Acceleration</div>
|
||||
<div class="insight-desc">Enterprise segment grew 23% this quarter, driven by 4 new accounts. Recommend increasing sales capacity.</div>
|
||||
</div>
|
||||
<div class="insight-card">
|
||||
<div class="insight-icon">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/></svg>
|
||||
</div>
|
||||
<div class="insight-title">Predicted: Q3 Target On Track</div>
|
||||
<div class="insight-desc">Based on current trajectory, 89% probability of hitting $3.2M quarterly target. Pipeline looks healthy.</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- TRUST BAR -->
|
||||
<div class="trust-bar">
|
||||
<span class="trust-label">Trusted by teams at</span>
|
||||
<div class="trust-logos">
|
||||
<span class="trust-logo">Stripe</span>
|
||||
<span class="trust-logo">Notion</span>
|
||||
<span class="trust-logo">Linear</span>
|
||||
<span class="trust-logo">Vercel</span>
|
||||
<span class="trust-logo">Figma</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
lucide.createIcons();
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 97 KiB |
@@ -0,0 +1,556 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=1440">
|
||||
<title>Meridian — Business Intelligence for Modern Teams</title>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;900&family=Space+Grotesk:wght@400;500;600;700&display=swap" rel="stylesheet">
|
||||
<script src="https://unpkg.com/lucide@latest"></script>
|
||||
<style>
|
||||
* { margin: 0; padding: 0; box-sizing: border-box; }
|
||||
body {
|
||||
width: 1440px;
|
||||
height: 900px;
|
||||
overflow: hidden;
|
||||
margin: 0;
|
||||
font-family: 'Helvetica Neue', Arial, sans-serif;
|
||||
background: #FFFFFF;
|
||||
color: #000000;
|
||||
}
|
||||
|
||||
/* NAV */
|
||||
nav {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 0 80px;
|
||||
height: 72px;
|
||||
border-bottom: 1px solid #000;
|
||||
}
|
||||
.nav-logo {
|
||||
font-family: 'Helvetica Neue', Arial, sans-serif;
|
||||
font-weight: 700;
|
||||
font-size: 22px;
|
||||
letter-spacing: -0.5px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
.nav-logo svg { width: 24px; height: 24px; }
|
||||
.nav-links {
|
||||
display: flex;
|
||||
gap: 40px;
|
||||
list-style: none;
|
||||
}
|
||||
.nav-links a {
|
||||
font-family: 'Helvetica Neue', Arial, sans-serif;
|
||||
font-size: 13px;
|
||||
font-weight: 500;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 1.5px;
|
||||
text-decoration: none;
|
||||
color: #000;
|
||||
transition: color 0.2s;
|
||||
}
|
||||
.nav-links a:hover { color: #E63946; }
|
||||
.nav-signin {
|
||||
font-family: 'Helvetica Neue', Arial, sans-serif;
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 1.5px;
|
||||
text-decoration: none;
|
||||
color: #000;
|
||||
padding: 8px 20px;
|
||||
border: 2px solid #000;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
.nav-signin:hover { background: #000; color: #fff; }
|
||||
|
||||
/* HERO */
|
||||
.hero {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
height: calc(900px - 72px);
|
||||
}
|
||||
|
||||
/* LEFT PANEL */
|
||||
.hero-left {
|
||||
padding: 64px 80px 48px 80px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
position: relative;
|
||||
}
|
||||
.hero-label {
|
||||
font-family: 'Helvetica Neue', Arial, sans-serif;
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 3px;
|
||||
color: #E63946;
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
.hero-headline {
|
||||
font-family: 'Helvetica Neue', Arial, sans-serif;
|
||||
font-size: 52px;
|
||||
font-weight: 900;
|
||||
line-height: 1.05;
|
||||
letter-spacing: -2px;
|
||||
margin-bottom: 20px;
|
||||
max-width: 520px;
|
||||
}
|
||||
.hero-headline span { color: #E63946; }
|
||||
.hero-subtitle {
|
||||
font-size: 17px;
|
||||
font-weight: 400;
|
||||
line-height: 1.6;
|
||||
color: #444;
|
||||
max-width: 440px;
|
||||
margin-bottom: 36px;
|
||||
}
|
||||
.hero-ctas {
|
||||
display: flex;
|
||||
gap: 16px;
|
||||
margin-bottom: 48px;
|
||||
}
|
||||
.btn-primary {
|
||||
font-family: 'Helvetica Neue', Arial, sans-serif;
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 1px;
|
||||
padding: 16px 36px;
|
||||
background: #E63946;
|
||||
color: #fff;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
transition: background 0.2s;
|
||||
}
|
||||
.btn-primary:hover { background: #c4303c; }
|
||||
.btn-secondary {
|
||||
font-family: 'Helvetica Neue', Arial, sans-serif;
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 1px;
|
||||
padding: 16px 36px;
|
||||
background: transparent;
|
||||
color: #000;
|
||||
border: 2px solid #000;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
.btn-secondary:hover { background: #000; color: #fff; }
|
||||
.btn-secondary svg { width: 16px; height: 16px; }
|
||||
|
||||
/* BIG NUMBER */
|
||||
.big-number {
|
||||
position: absolute;
|
||||
bottom: 64px;
|
||||
left: 80px;
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
gap: 40px;
|
||||
}
|
||||
.big-number-main {
|
||||
font-family: 'Helvetica Neue', Arial, sans-serif;
|
||||
font-size: 140px;
|
||||
font-weight: 700;
|
||||
line-height: 1;
|
||||
letter-spacing: -6px;
|
||||
color: #E63946;
|
||||
}
|
||||
.big-number-label {
|
||||
font-family: 'Helvetica Neue', Arial, sans-serif;
|
||||
font-size: 13px;
|
||||
font-weight: 500;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 2px;
|
||||
color: #666;
|
||||
max-width: 100px;
|
||||
line-height: 1.5;
|
||||
}
|
||||
.big-number-divider {
|
||||
width: 1px;
|
||||
height: 48px;
|
||||
background: #ccc;
|
||||
}
|
||||
.metric-small {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 4px;
|
||||
}
|
||||
.metric-small-value {
|
||||
font-family: 'Helvetica Neue', Arial, sans-serif;
|
||||
font-size: 32px;
|
||||
font-weight: 700;
|
||||
letter-spacing: -1px;
|
||||
}
|
||||
.metric-small-label {
|
||||
font-family: 'Helvetica Neue', Arial, sans-serif;
|
||||
font-size: 11px;
|
||||
font-weight: 500;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 2px;
|
||||
color: #888;
|
||||
}
|
||||
|
||||
/* RIGHT PANEL — DASHBOARD */
|
||||
.hero-right {
|
||||
background: #000;
|
||||
padding: 32px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 16px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
/* Dashboard grid */
|
||||
.dash-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
.dash-title {
|
||||
font-family: 'Helvetica Neue', Arial, sans-serif;
|
||||
font-size: 13px;
|
||||
font-weight: 500;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 2px;
|
||||
color: #666;
|
||||
}
|
||||
.dash-live {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
font-size: 11px;
|
||||
font-weight: 500;
|
||||
color: #E63946;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 1px;
|
||||
}
|
||||
.dash-live-dot {
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
background: #E63946;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
/* KPI Row */
|
||||
.kpi-row {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
gap: 12px;
|
||||
}
|
||||
.kpi-card {
|
||||
background: #111;
|
||||
border: 1px solid #222;
|
||||
padding: 20px;
|
||||
}
|
||||
.kpi-label {
|
||||
font-size: 10px;
|
||||
font-weight: 500;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 1.5px;
|
||||
color: #555;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
.kpi-value {
|
||||
font-family: 'Helvetica Neue', Arial, sans-serif;
|
||||
font-size: 28px;
|
||||
font-weight: 700;
|
||||
color: #fff;
|
||||
letter-spacing: -1px;
|
||||
}
|
||||
.kpi-change {
|
||||
font-size: 12px;
|
||||
font-weight: 500;
|
||||
color: #E63946;
|
||||
margin-top: 4px;
|
||||
}
|
||||
.kpi-change.positive { color: #fff; opacity: 0.7; }
|
||||
|
||||
/* Chart area */
|
||||
.chart-area {
|
||||
flex: 1;
|
||||
background: #111;
|
||||
border: 1px solid #222;
|
||||
padding: 24px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
.chart-top {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.chart-label {
|
||||
font-size: 11px;
|
||||
font-weight: 500;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 1.5px;
|
||||
color: #555;
|
||||
}
|
||||
.chart-tabs {
|
||||
display: flex;
|
||||
gap: 2px;
|
||||
}
|
||||
.chart-tab {
|
||||
font-size: 10px;
|
||||
font-weight: 500;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 1px;
|
||||
color: #444;
|
||||
padding: 4px 12px;
|
||||
background: transparent;
|
||||
border: 1px solid #333;
|
||||
}
|
||||
.chart-tab.active {
|
||||
color: #fff;
|
||||
background: #E63946;
|
||||
border-color: #E63946;
|
||||
}
|
||||
.chart-bars {
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
gap: 6px;
|
||||
flex: 1;
|
||||
padding-top: 12px;
|
||||
}
|
||||
.chart-bar-group {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
.chart-bar {
|
||||
width: 100%;
|
||||
background: #222;
|
||||
position: relative;
|
||||
}
|
||||
.chart-bar.accent { background: #E63946; }
|
||||
.chart-bar-label {
|
||||
font-size: 9px;
|
||||
color: #444;
|
||||
font-weight: 500;
|
||||
letter-spacing: 0.5px;
|
||||
}
|
||||
|
||||
/* Bottom row */
|
||||
.dash-bottom {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 12px;
|
||||
}
|
||||
.data-table {
|
||||
background: #111;
|
||||
border: 1px solid #222;
|
||||
padding: 16px;
|
||||
}
|
||||
.data-table-title {
|
||||
font-size: 10px;
|
||||
font-weight: 500;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 1.5px;
|
||||
color: #555;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
.data-row {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
padding: 6px 0;
|
||||
border-bottom: 1px solid #1a1a1a;
|
||||
}
|
||||
.data-row:last-child { border-bottom: none; }
|
||||
.data-row-label {
|
||||
font-size: 12px;
|
||||
color: #888;
|
||||
}
|
||||
.data-row-value {
|
||||
font-family: 'Helvetica Neue', Arial, sans-serif;
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
color: #fff;
|
||||
}
|
||||
.data-row-value.red { color: #E63946; }
|
||||
|
||||
/* TRUST BAR */
|
||||
.trust-bar {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
border-top: 1px solid #e0e0e0;
|
||||
padding: 0 80px;
|
||||
height: 56px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 48px;
|
||||
background: #fff;
|
||||
}
|
||||
.trust-label {
|
||||
font-size: 11px;
|
||||
font-weight: 500;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 2px;
|
||||
color: #aaa;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.trust-logos {
|
||||
display: flex;
|
||||
gap: 48px;
|
||||
align-items: center;
|
||||
}
|
||||
.trust-logo {
|
||||
font-family: 'Helvetica Neue', Arial, sans-serif;
|
||||
font-size: 15px;
|
||||
font-weight: 600;
|
||||
color: #bbb;
|
||||
letter-spacing: 1px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<!-- NAVIGATION -->
|
||||
<nav>
|
||||
<div class="nav-logo">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
|
||||
<polygon points="12 2 22 8.5 22 15.5 12 22 2 15.5 2 8.5 12 2"/>
|
||||
<line x1="12" y1="22" x2="12" y2="15.5"/>
|
||||
<polyline points="22 8.5 12 15.5 2 8.5"/>
|
||||
</svg>
|
||||
Meridian
|
||||
</div>
|
||||
<ul class="nav-links">
|
||||
<li><a href="#">Product</a></li>
|
||||
<li><a href="#">Pricing</a></li>
|
||||
<li><a href="#">Docs</a></li>
|
||||
<li><a href="#">Blog</a></li>
|
||||
</ul>
|
||||
<a href="#" class="nav-signin">Sign In</a>
|
||||
</nav>
|
||||
|
||||
<!-- HERO -->
|
||||
<div class="hero">
|
||||
|
||||
<!-- LEFT -->
|
||||
<div class="hero-left">
|
||||
<div class="hero-label">Business Intelligence for Modern Teams</div>
|
||||
<h1 class="hero-headline">Turn data into <span>decisions,</span> not dashboards</h1>
|
||||
<p class="hero-subtitle">AI-powered analytics that tells you what matters, when it matters. Stop drowning in charts and start acting on real insights.</p>
|
||||
<div class="hero-ctas">
|
||||
<button class="btn-primary">Start Free Trial</button>
|
||||
<button class="btn-secondary">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polygon points="5 3 19 12 5 21 5 3"/></svg>
|
||||
Watch Demo
|
||||
</button>
|
||||
</div>
|
||||
<div class="big-number">
|
||||
<div class="big-number-main">3x</div>
|
||||
<div class="big-number-label">Faster Insights</div>
|
||||
<div class="big-number-divider"></div>
|
||||
<div class="metric-small">
|
||||
<div class="metric-small-value">50%</div>
|
||||
<div class="metric-small-label">Less Meeting Time</div>
|
||||
</div>
|
||||
<div class="big-number-divider"></div>
|
||||
<div class="metric-small">
|
||||
<div class="metric-small-value">99.9%</div>
|
||||
<div class="metric-small-label">Uptime</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- RIGHT — DASHBOARD MOCKUP -->
|
||||
<div class="hero-right">
|
||||
<div class="dash-header">
|
||||
<div class="dash-title">Analytics Overview</div>
|
||||
<div class="dash-live"><div class="dash-live-dot"></div> Live</div>
|
||||
</div>
|
||||
|
||||
<div class="kpi-row">
|
||||
<div class="kpi-card">
|
||||
<div class="kpi-label">Revenue</div>
|
||||
<div class="kpi-value">$2.4M</div>
|
||||
<div class="kpi-change positive">+12.3%</div>
|
||||
</div>
|
||||
<div class="kpi-card">
|
||||
<div class="kpi-label">Active Users</div>
|
||||
<div class="kpi-value">84.2K</div>
|
||||
<div class="kpi-change positive">+8.7%</div>
|
||||
</div>
|
||||
<div class="kpi-card">
|
||||
<div class="kpi-label">Churn Rate</div>
|
||||
<div class="kpi-value">1.2%</div>
|
||||
<div class="kpi-change red">-0.3pp</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="chart-area">
|
||||
<div class="chart-top">
|
||||
<div class="chart-label">Monthly Performance</div>
|
||||
<div class="chart-tabs">
|
||||
<div class="chart-tab">7D</div>
|
||||
<div class="chart-tab active">30D</div>
|
||||
<div class="chart-tab">90D</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="chart-bars">
|
||||
<div class="chart-bar-group"><div class="chart-bar" style="height:60px"></div><div class="chart-bar-label">Jan</div></div>
|
||||
<div class="chart-bar-group"><div class="chart-bar" style="height:80px"></div><div class="chart-bar-label">Feb</div></div>
|
||||
<div class="chart-bar-group"><div class="chart-bar" style="height:55px"></div><div class="chart-bar-label">Mar</div></div>
|
||||
<div class="chart-bar-group"><div class="chart-bar accent" style="height:110px"></div><div class="chart-bar-label">Apr</div></div>
|
||||
<div class="chart-bar-group"><div class="chart-bar" style="height:95px"></div><div class="chart-bar-label">May</div></div>
|
||||
<div class="chart-bar-group"><div class="chart-bar accent" style="height:130px"></div><div class="chart-bar-label">Jun</div></div>
|
||||
<div class="chart-bar-group"><div class="chart-bar" style="height:105px"></div><div class="chart-bar-label">Jul</div></div>
|
||||
<div class="chart-bar-group"><div class="chart-bar accent" style="height:145px"></div><div class="chart-bar-label">Aug</div></div>
|
||||
<div class="chart-bar-group"><div class="chart-bar" style="height:120px"></div><div class="chart-bar-label">Sep</div></div>
|
||||
<div class="chart-bar-group"><div class="chart-bar" style="height:100px"></div><div class="chart-bar-label">Oct</div></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="dash-bottom">
|
||||
<div class="data-table">
|
||||
<div class="data-table-title">Top Segments</div>
|
||||
<div class="data-row"><span class="data-row-label">Enterprise</span><span class="data-row-value">$1.1M</span></div>
|
||||
<div class="data-row"><span class="data-row-label">Mid-Market</span><span class="data-row-value">$820K</span></div>
|
||||
<div class="data-row"><span class="data-row-label">SMB</span><span class="data-row-value">$480K</span></div>
|
||||
</div>
|
||||
<div class="data-table">
|
||||
<div class="data-table-title">AI Alerts Today</div>
|
||||
<div class="data-row"><span class="data-row-label">Revenue spike detected</span><span class="data-row-value red">High</span></div>
|
||||
<div class="data-row"><span class="data-row-label">Churn risk: Acme Corp</span><span class="data-row-value red">Med</span></div>
|
||||
<div class="data-row"><span class="data-row-label">Expansion signal: Bolt</span><span class="data-row-value" style="color:#888">Low</span></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<!-- TRUST BAR (absolutely positioned at bottom-left) -->
|
||||
<div class="trust-bar" style="position:fixed; bottom:0; left:0; width:720px; z-index:10;">
|
||||
<span class="trust-label">Trusted by</span>
|
||||
<div class="trust-logos">
|
||||
<span class="trust-logo">Stripe</span>
|
||||
<span class="trust-logo">Notion</span>
|
||||
<span class="trust-logo">Linear</span>
|
||||
<span class="trust-logo">Vercel</span>
|
||||
<span class="trust-logo">Figma</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
lucide.createIcons();
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 94 KiB |
@@ -0,0 +1,604 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=1440">
|
||||
<title>Meridian — Business Intelligence for Modern Teams</title>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600&family=Noto+Serif+SC:wght@300;400;500;600&display=swap" rel="stylesheet">
|
||||
<script src="https://unpkg.com/lucide@latest"></script>
|
||||
<style>
|
||||
* { margin: 0; padding: 0; box-sizing: border-box; }
|
||||
body {
|
||||
width: 1440px;
|
||||
height: 900px;
|
||||
overflow: hidden;
|
||||
margin: 0;
|
||||
font-family: 'Inter', sans-serif;
|
||||
background: #F5F0EB;
|
||||
color: #3a3a3a;
|
||||
}
|
||||
|
||||
/* NAV */
|
||||
nav {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 0 80px;
|
||||
height: 72px;
|
||||
}
|
||||
.nav-logo {
|
||||
font-family: 'Noto Serif SC', serif;
|
||||
font-size: 20px;
|
||||
font-weight: 500;
|
||||
letter-spacing: -0.3px;
|
||||
color: #3a3a3a;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
}
|
||||
.nav-logo-mark {
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
border-radius: 50%;
|
||||
background: #6B8F71;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
.nav-logo-mark svg { width: 14px; height: 14px; color: #F5F0EB; }
|
||||
.nav-center {
|
||||
display: flex;
|
||||
gap: 40px;
|
||||
list-style: none;
|
||||
}
|
||||
.nav-center a {
|
||||
font-size: 14px;
|
||||
font-weight: 400;
|
||||
text-decoration: none;
|
||||
color: #888;
|
||||
transition: color 0.2s;
|
||||
}
|
||||
.nav-center a:hover { color: #3a3a3a; }
|
||||
.nav-right {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 20px;
|
||||
}
|
||||
.nav-signin {
|
||||
font-size: 14px;
|
||||
font-weight: 400;
|
||||
text-decoration: none;
|
||||
color: #888;
|
||||
}
|
||||
.nav-cta {
|
||||
font-family: 'Inter', sans-serif;
|
||||
font-size: 13px;
|
||||
font-weight: 500;
|
||||
padding: 9px 22px;
|
||||
background: #2D3436;
|
||||
color: #F5F0EB;
|
||||
border: none;
|
||||
border-radius: 100px;
|
||||
cursor: pointer;
|
||||
transition: background 0.2s;
|
||||
}
|
||||
.nav-cta:hover { background: #3D4547; }
|
||||
|
||||
/* HERO */
|
||||
.hero {
|
||||
padding: 20px 80px 0 80px;
|
||||
height: calc(900px - 72px);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
/* TOP SECTION: text + dashboard side by side */
|
||||
.hero-top {
|
||||
display: grid;
|
||||
grid-template-columns: 500px 1fr;
|
||||
gap: 60px;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
/* LEFT TEXT */
|
||||
.hero-text {
|
||||
padding-top: 32px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
.hero-label {
|
||||
font-size: 12px;
|
||||
font-weight: 500;
|
||||
color: #6B8F71;
|
||||
letter-spacing: 1px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.hero-headline {
|
||||
font-family: 'Noto Serif SC', serif;
|
||||
font-size: 44px;
|
||||
font-weight: 400;
|
||||
line-height: 1.25;
|
||||
letter-spacing: -0.5px;
|
||||
color: #2a2a2a;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
.hero-headline em {
|
||||
font-style: italic;
|
||||
color: #7A8F71;
|
||||
}
|
||||
.hero-subtitle {
|
||||
font-size: 16px;
|
||||
font-weight: 300;
|
||||
line-height: 1.7;
|
||||
color: #999;
|
||||
margin-bottom: 32px;
|
||||
max-width: 400px;
|
||||
}
|
||||
.hero-ctas {
|
||||
display: flex;
|
||||
gap: 12px;
|
||||
margin-bottom: 36px;
|
||||
}
|
||||
.btn-primary {
|
||||
font-family: 'Inter', sans-serif;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
padding: 14px 28px;
|
||||
background: rgba(107, 143, 113, 0.12);
|
||||
color: #6B8F71;
|
||||
border: 1px solid rgba(107, 143, 113, 0.3);
|
||||
border-radius: 100px;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
.btn-primary:hover { background: rgba(107, 143, 113, 0.18); }
|
||||
.btn-secondary {
|
||||
font-family: 'Inter', sans-serif;
|
||||
font-size: 14px;
|
||||
font-weight: 400;
|
||||
padding: 14px 28px;
|
||||
background: transparent;
|
||||
color: #888;
|
||||
border: 1px solid #d5cfc5;
|
||||
border-radius: 100px;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
.btn-secondary:hover { border-color: #aaa; color: #555; }
|
||||
.btn-secondary svg { width: 14px; height: 14px; }
|
||||
|
||||
/* FLOW DIAGRAM */
|
||||
.flow-diagram {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
margin-bottom: 32px;
|
||||
}
|
||||
.flow-step {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
background: rgba(107, 143, 113, 0.1);
|
||||
border: 1px solid rgba(107, 143, 113, 0.25);
|
||||
border-radius: 100px;
|
||||
padding: 8px 18px;
|
||||
}
|
||||
.flow-step-icon {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
background: #6B8F71;
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
.flow-step-icon svg { width: 12px; height: 12px; color: #fff; }
|
||||
.flow-step span {
|
||||
font-size: 12px;
|
||||
font-weight: 500;
|
||||
color: #666;
|
||||
}
|
||||
.flow-arrow {
|
||||
width: 20px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: #ccc;
|
||||
}
|
||||
.flow-arrow svg { width: 16px; height: 16px; }
|
||||
|
||||
/* METRICS ROW */
|
||||
.metrics-row {
|
||||
display: flex;
|
||||
gap: 40px;
|
||||
}
|
||||
.metric-card {
|
||||
background: #fff;
|
||||
border-radius: 16px;
|
||||
padding: 20px 24px;
|
||||
min-width: 130px;
|
||||
box-shadow: 0 2px 8px rgba(0,0,0,0.03);
|
||||
}
|
||||
.metric-card-value {
|
||||
font-family: 'Noto Serif SC', serif;
|
||||
font-size: 28px;
|
||||
font-weight: 400;
|
||||
color: #2a2a2a;
|
||||
letter-spacing: -0.5px;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
.metric-card-value span { color: #6B8F71; }
|
||||
.metric-card-label {
|
||||
font-size: 11px;
|
||||
font-weight: 400;
|
||||
color: #bbb;
|
||||
}
|
||||
|
||||
/* RIGHT — DASHBOARD */
|
||||
.hero-dashboard {
|
||||
padding-top: 8px;
|
||||
}
|
||||
.dashboard-frame {
|
||||
background: #FFFFFF;
|
||||
border-radius: 24px;
|
||||
box-shadow:
|
||||
0 1px 2px rgba(0,0,0,0.02),
|
||||
0 4px 12px rgba(0,0,0,0.03),
|
||||
0 16px 48px rgba(0,0,0,0.05);
|
||||
padding: 24px;
|
||||
height: 480px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
/* Dash header */
|
||||
.dash-head {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.dash-head-title {
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
color: #3a3a3a;
|
||||
}
|
||||
.dash-head-tag {
|
||||
font-size: 11px;
|
||||
font-weight: 400;
|
||||
color: #6B8F71;
|
||||
background: rgba(107, 143, 113, 0.1);
|
||||
padding: 4px 12px;
|
||||
border-radius: 100px;
|
||||
}
|
||||
|
||||
/* KPI row */
|
||||
.dash-kpis {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
gap: 12px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.dash-kpi {
|
||||
background: #FAFAF6;
|
||||
border-radius: 14px;
|
||||
padding: 16px;
|
||||
text-align: center;
|
||||
}
|
||||
.dash-kpi-value {
|
||||
font-size: 22px;
|
||||
font-weight: 500;
|
||||
color: #2a2a2a;
|
||||
margin-bottom: 2px;
|
||||
}
|
||||
.dash-kpi-label {
|
||||
font-size: 10px;
|
||||
font-weight: 400;
|
||||
color: #bbb;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.5px;
|
||||
}
|
||||
.dash-kpi-change {
|
||||
font-size: 11px;
|
||||
font-weight: 500;
|
||||
color: #6B8F71;
|
||||
margin-top: 4px;
|
||||
}
|
||||
|
||||
/* Chart area */
|
||||
.dash-chart {
|
||||
flex: 1;
|
||||
display: grid;
|
||||
grid-template-columns: 2fr 1fr;
|
||||
gap: 12px;
|
||||
}
|
||||
.chart-main {
|
||||
background: #FAFAF6;
|
||||
border-radius: 16px;
|
||||
padding: 20px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
.chart-main-label {
|
||||
font-size: 11px;
|
||||
font-weight: 500;
|
||||
color: #aaa;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
.chart-main-svg {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
/* Side panel */
|
||||
.chart-side {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 10px;
|
||||
}
|
||||
.insight-bubble {
|
||||
background: #FAFAF6;
|
||||
border-radius: 16px;
|
||||
padding: 14px 16px;
|
||||
flex: 1;
|
||||
}
|
||||
.insight-bubble-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
.insight-bubble-icon {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
background: rgba(107, 143, 113, 0.2);
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
.insight-bubble-icon svg { width: 10px; height: 10px; color: #7A8F71; }
|
||||
.insight-bubble-tag {
|
||||
font-size: 10px;
|
||||
font-weight: 500;
|
||||
color: #6B8F71;
|
||||
}
|
||||
.insight-bubble-text {
|
||||
font-size: 11px;
|
||||
font-weight: 400;
|
||||
color: #888;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
/* TRUST BAR */
|
||||
.trust-bar {
|
||||
padding: 16px 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 40px;
|
||||
border-top: 1px solid #e8e2d8;
|
||||
}
|
||||
.trust-label {
|
||||
font-size: 11px;
|
||||
font-weight: 400;
|
||||
color: #ccc;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.trust-logos {
|
||||
display: flex;
|
||||
gap: 36px;
|
||||
align-items: center;
|
||||
}
|
||||
.trust-logo {
|
||||
font-size: 14px;
|
||||
font-weight: 400;
|
||||
color: #ccc;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<!-- NAV -->
|
||||
<nav>
|
||||
<div class="nav-logo">
|
||||
<div class="nav-logo-mark">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
|
||||
<polygon points="12 2 22 8.5 22 15.5 12 22 2 15.5 2 8.5 12 2"/>
|
||||
</svg>
|
||||
</div>
|
||||
Meridian
|
||||
</div>
|
||||
<ul class="nav-center">
|
||||
<li><a href="#">Product</a></li>
|
||||
<li><a href="#">Pricing</a></li>
|
||||
<li><a href="#">Docs</a></li>
|
||||
<li><a href="#">Blog</a></li>
|
||||
</ul>
|
||||
<div class="nav-right">
|
||||
<a href="#" class="nav-signin">Sign In</a>
|
||||
<button class="nav-cta">Start Free Trial</button>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<!-- HERO -->
|
||||
<div class="hero">
|
||||
<div class="hero-top">
|
||||
|
||||
<!-- LEFT TEXT -->
|
||||
<div class="hero-text">
|
||||
<div class="hero-label">Business Intelligence for Modern Teams</div>
|
||||
<h1 class="hero-headline">Turn data into <em>decisions,</em> not dashboards</h1>
|
||||
<p class="hero-subtitle">AI-powered analytics that tells you what matters, when it matters. Clarity over complexity.</p>
|
||||
<div class="hero-ctas">
|
||||
<button class="btn-primary">Start Free Trial</button>
|
||||
<button class="btn-secondary">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polygon points="5 3 19 12 5 21 5 3"/></svg>
|
||||
Watch Demo
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- Flow diagram -->
|
||||
<div class="flow-diagram">
|
||||
<div class="flow-step">
|
||||
<div class="flow-step-icon">
|
||||
<svg 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 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="17 8 12 3 7 8"/><line x1="12" y1="3" x2="12" y2="15"/></svg>
|
||||
</div>
|
||||
<span>Raw Data</span>
|
||||
</div>
|
||||
<div class="flow-arrow">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="9 18 15 12 9 6"/></svg>
|
||||
</div>
|
||||
<div class="flow-step">
|
||||
<div class="flow-step-icon">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M13 2L3 14h9l-1 8 10-12h-9l1-8z"/></svg>
|
||||
</div>
|
||||
<span>AI Analysis</span>
|
||||
</div>
|
||||
<div class="flow-arrow">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="9 18 15 12 9 6"/></svg>
|
||||
</div>
|
||||
<div class="flow-step">
|
||||
<div class="flow-step-icon">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>
|
||||
</div>
|
||||
<span>Actionable Insight</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Metrics -->
|
||||
<div class="metrics-row">
|
||||
<div class="metric-card">
|
||||
<div class="metric-card-value">3<span>x</span></div>
|
||||
<div class="metric-card-label">Faster insights</div>
|
||||
</div>
|
||||
<div class="metric-card">
|
||||
<div class="metric-card-value">50<span>%</span></div>
|
||||
<div class="metric-card-label">Less meeting time</div>
|
||||
</div>
|
||||
<div class="metric-card">
|
||||
<div class="metric-card-value">99.9<span>%</span></div>
|
||||
<div class="metric-card-label">Uptime</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- RIGHT — DASHBOARD -->
|
||||
<div class="hero-dashboard">
|
||||
<div class="dashboard-frame">
|
||||
<div class="dash-head">
|
||||
<div class="dash-head-title">Analytics Overview</div>
|
||||
<div class="dash-head-tag">AI-Enhanced</div>
|
||||
</div>
|
||||
|
||||
<div class="dash-kpis">
|
||||
<div class="dash-kpi">
|
||||
<div class="dash-kpi-value">$2.4M</div>
|
||||
<div class="dash-kpi-label">Revenue</div>
|
||||
<div class="dash-kpi-change">+12.3%</div>
|
||||
</div>
|
||||
<div class="dash-kpi">
|
||||
<div class="dash-kpi-value">84.2K</div>
|
||||
<div class="dash-kpi-label">Active Users</div>
|
||||
<div class="dash-kpi-change">+8.7%</div>
|
||||
</div>
|
||||
<div class="dash-kpi">
|
||||
<div class="dash-kpi-value">1.2%</div>
|
||||
<div class="dash-kpi-label">Churn Rate</div>
|
||||
<div class="dash-kpi-change">-0.3pp</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="dash-chart">
|
||||
<!-- Main chart with organic shapes -->
|
||||
<div class="chart-main">
|
||||
<div class="chart-main-label">Revenue Trend</div>
|
||||
<svg class="chart-main-svg" viewBox="0 0 400 160" preserveAspectRatio="xMidYMid meet">
|
||||
<!-- Soft grid -->
|
||||
<line x1="0" y1="40" x2="400" y2="40" stroke="#ece7dd" stroke-width="1"/>
|
||||
<line x1="0" y1="80" x2="400" y2="80" stroke="#ece7dd" stroke-width="1"/>
|
||||
<line x1="0" y1="120" x2="400" y2="120" stroke="#ece7dd" stroke-width="1"/>
|
||||
|
||||
<!-- Rounded bars -->
|
||||
<rect x="15" y="80" width="28" height="70" rx="8" ry="8" fill="#e2ddd4"/>
|
||||
<rect x="58" y="65" width="28" height="85" rx="8" ry="8" fill="#e2ddd4"/>
|
||||
<rect x="101" y="90" width="28" height="60" rx="8" ry="8" fill="#e2ddd4"/>
|
||||
<rect x="144" y="50" width="28" height="100" rx="8" ry="8" fill="#6B8F71" opacity="0.6"/>
|
||||
<rect x="187" y="60" width="28" height="90" rx="8" ry="8" fill="#e2ddd4"/>
|
||||
<rect x="230" y="35" width="28" height="115" rx="8" ry="8" fill="#6B8F71" opacity="0.8"/>
|
||||
<rect x="273" y="45" width="28" height="105" rx="8" ry="8" fill="#e2ddd4"/>
|
||||
<rect x="316" y="25" width="28" height="125" rx="8" ry="8" fill="#6B8F71"/>
|
||||
<rect x="359" y="40" width="28" height="110" rx="8" ry="8" fill="#e2ddd4"/>
|
||||
|
||||
<!-- Smooth trend line overlay -->
|
||||
<path d="M29,75 C60,62 75,60 115,85 C140,70 155,47 172,45 C200,55 205,55 244,30 C270,40 280,40 330,20 C350,35 365,35 373,35" fill="none" stroke="#7A8F71" stroke-width="2" stroke-linecap="round" opacity="0.7"/>
|
||||
|
||||
<!-- Labels -->
|
||||
<text x="22" y="158" font-size="9" fill="#bbb" font-family="Inter" text-anchor="middle">Jan</text>
|
||||
<text x="72" y="158" font-size="9" fill="#bbb" font-family="Inter" text-anchor="middle">Feb</text>
|
||||
<text x="115" y="158" font-size="9" fill="#bbb" font-family="Inter" text-anchor="middle">Mar</text>
|
||||
<text x="158" y="158" font-size="9" fill="#bbb" font-family="Inter" text-anchor="middle">Apr</text>
|
||||
<text x="201" y="158" font-size="9" fill="#bbb" font-family="Inter" text-anchor="middle">May</text>
|
||||
<text x="244" y="158" font-size="9" fill="#bbb" font-family="Inter" text-anchor="middle">Jun</text>
|
||||
<text x="287" y="158" font-size="9" fill="#bbb" font-family="Inter" text-anchor="middle">Jul</text>
|
||||
<text x="330" y="158" font-size="9" fill="#bbb" font-family="Inter" text-anchor="middle">Aug</text>
|
||||
<text x="373" y="158" font-size="9" fill="#bbb" font-family="Inter" text-anchor="middle">Sep</text>
|
||||
</svg>
|
||||
</div>
|
||||
|
||||
<!-- Side insights -->
|
||||
<div class="chart-side">
|
||||
<div class="insight-bubble">
|
||||
<div class="insight-bubble-header">
|
||||
<div class="insight-bubble-icon">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M13 2L3 14h9l-1 8 10-12h-9l1-8z"/></svg>
|
||||
</div>
|
||||
<span class="insight-bubble-tag">AI Insight</span>
|
||||
</div>
|
||||
<div class="insight-bubble-text">Enterprise segment grew 23% this quarter. Four new accounts are driving acceleration.</div>
|
||||
</div>
|
||||
<div class="insight-bubble">
|
||||
<div class="insight-bubble-header">
|
||||
<div class="insight-bubble-icon">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/></svg>
|
||||
</div>
|
||||
<span class="insight-bubble-tag">Prediction</span>
|
||||
</div>
|
||||
<div class="insight-bubble-text">89% likelihood of hitting Q3 revenue target based on current pipeline velocity.</div>
|
||||
</div>
|
||||
<div class="insight-bubble">
|
||||
<div class="insight-bubble-header">
|
||||
<div class="insight-bubble-icon">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z"/><line x1="12" y1="9" x2="12" y2="13"/><line x1="12" y1="17" x2="12.01" y2="17"/></svg>
|
||||
</div>
|
||||
<span class="insight-bubble-tag">Alert</span>
|
||||
</div>
|
||||
<div class="insight-bubble-text">Churn risk detected for 2 mid-market accounts. Recommend outreach this week.</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- TRUST BAR -->
|
||||
<div class="trust-bar">
|
||||
<span class="trust-label">Trusted by teams at</span>
|
||||
<div class="trust-logos">
|
||||
<span class="trust-logo">Stripe</span>
|
||||
<span class="trust-logo">Notion</span>
|
||||
<span class="trust-logo">Linear</span>
|
||||
<span class="trust-logo">Vercel</span>
|
||||
<span class="trust-logo">Figma</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
lucide.createIcons();
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 121 KiB |
Reference in New Issue
Block a user