Cogent Core 一次编码，全平台运行
✨步子哥 (steper) •
2026年02月12日 15:03
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@300;400;500;700;900&display=swap" rel="stylesheet">
<title>Cogent Core Poster</title>
<style>
:root {
--primary-color: #00ADD8; /* Go Cyan */
--secondary-color: #0ea5e9;
--bg-color: #f0f9ff;
--card-bg: #ffffff;
--text-main: #0f172a;
--text-secondary: #475569;
--accent-gradient: linear-gradient(135deg, #00ADD8 0%, #00758d 100%);
--code-bg: #1e293b;
}
* { box-sizing: border-box; }
body {
margin: 0;
padding: 0;
font-family: 'Noto Sans SC', "HarmonyOS Sans SC", sans-serif;
background-color: #e0e7ff;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
}
.poster-container {
width: 720px;
min-height: 1200px; /* Increased height for detailed content */
background: #ffffff;
position: relative;
overflow: hidden;
box-shadow: 0 20px 40px rgba(0,0,0,0.1);
display: flex;
flex-direction: column;
}
/* Background Decoration */
.bg-pattern {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 0;
background-image: radial-gradient(#e0f2fe 1px, transparent 1px);
background-size: 24px 24px;
opacity: 0.6;
}
.bg-shape {
position: absolute;
border-radius: 50%;
filter: blur(60px);
z-index: 0;
}
.shape-top {
width: 500px;
height: 500px;
background: rgba(0, 173, 216, 0.15);
top: -150px;
right: -100px;
}
.shape-bottom {
width: 400px;
height: 400px;
background: rgba(14, 165, 233, 0.1);
bottom: -100px;
left: -100px;
}
/* Main Content */
.content-wrapper {
position: relative;
z-index: 1;
padding: 48px;
display: flex;
flex-direction: column;
gap: 32px;
flex-grow: 1;
}
/* Header */
header {
text-align: center;
}
.main-title {
font-size: 64px;
font-weight: 900;
background: var(--accent-gradient);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
margin: 0;
letter-spacing: -2px;
line-height: 1.1;
font-family: 'Noto Sans SC', sans-serif; /* Simulating title font */
}
.subtitle {
display: inline-block;
font-size: 22px;
color: var(--text-main);
font-weight: 700;
margin-top: 12px;
padding: 6px 20px;
background: rgba(0, 173, 216, 0.1);
border-radius: 30px;
border: 1px solid rgba(0, 173, 216, 0.2);
}
/* Intro Card */
.intro-card {
background: rgba(255,255,255,0.9);
border: 1px solid rgba(255,255,255,0.5);
border-radius: 20px;
padding: 24px 32px;
text-align: center;
backdrop-filter: blur(10px);
box-shadow: 0 8px 24px rgba(0,0,0,0.04);
}
.intro-text {
font-size: 18px;
line-height: 1.6;
color: var(--text-secondary);
margin: 0;
}
.intro-text strong {
color: var(--primary-color);
font-weight: 700;
}
/* Section Styles */
.section-header {
display: flex;
align-items: center;
gap: 10px;
margin-bottom: 16px;
}
.section-icon {
color: var(--primary-color);
font-size: 28px;
}
.section-title {
font-size: 24px;
font-weight: 700;
color: var(--text-main);
}
/* Features Grid */
.features-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 20px;
}
.feature-card {
background: #fff;
padding: 20px;
border-radius: 16px;
border: 1px solid #f1f5f9;
box-shadow: 0 2px 8px rgba(0,0,0,0.03);
display: flex;
flex-direction: column;
gap: 12px;
transition: transform 0.2s;
}
.feature-icon-box {
width: 48px;
height: 48px;
background: linear-gradient(135deg, #e0f7fa 0%, #e0f2fe 100%);
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
}
.feature-icon-box i {
color: var(--primary-color);
font-size: 28px;
}
.feature-title {
font-size: 18px;
font-weight: 700;
color: var(--text-main);
}
.feature-desc {
font-size: 14px;
color: var(--text-secondary);
line-height: 1.5;
}
/* Tech Stack */
.tech-container {
background: linear-gradient(to right, #f8fafc, #ffffff);
border-radius: 20px;
padding: 20px;
display: flex;
align-items: center;
gap: 24px;
border: 1px solid #e2e8f0;
}
.tech-image {
width: 100px;
height: 100px;
object-fit: cover;
border-radius: 16px;
box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}
.tech-content h3 {
margin: 0 0 8px 0;
font-size: 20px;
color: var(--text-main);
}
.tech-content p {
margin: 0;
font-size: 14px;
color: var(--text-secondary);
line-height: 1.5;
}
/* Usage Scenarios */
.scenarios-flex {
display: flex;
gap: 12px;
overflow-x: auto; /* Allow horizontal scroll if needed, though flex-wrap is better for poster */
flex-wrap: wrap;
}
.scenario-tag {
flex: 1;
background: #fff;
padding: 16px;
border-radius: 12px;
border-left: 4px solid var(--primary-color);
box-shadow: 0 2px 6px rgba(0,0,0,0.02);
min-width: 180px;
}
.scenario-title {
font-size: 16px;
font-weight: 700;
margin-bottom: 4px;
color: var(--text-main);
}
.scenario-desc {
font-size: 13px;
color: var(--text-secondary);
}
/* Code Block */
.code-section {
background: var(--code-bg);
border-radius: 16px;
padding: 24px;
color: #e2e8f0;
font-family: 'Fira Code', 'Courier New', monospace;
position: relative;
box-shadow: 0 8px 20px rgba(0,0,0,0.15);
}
.code-header {
position: absolute;
top: 0;
left: 0;
right: 0;
height: 6px;
background: var(--accent-gradient);
border-radius: 16px 16px 0 0;
}
.code-line {
display: block;
margin-bottom: 8px;
font-size: 14px;
line-height: 1.6;
}
.cmt { color: #64748b; }
.cmd { color: #38bdf8; }
.pth { color: #a3e635; }
.arg { color: #fbbf24; }
/* Footer */
.footer {
margin-top: auto;
text-align: center;
border-top: 1px solid #f1f5f9;
padding-top: 24px;
}
.footer-link {
font-size: 16px;
color: var(--primary-color);
text-decoration: none;
font-weight: 700;
margin-bottom: 12px;
display: block;
}
.tags-row {
display: flex;
justify-content: center;
gap: 10px;
flex-wrap: wrap;
}
.tag-pill {
font-size: 12px;
padding: 4px 12px;
background: #f1f5f9;
color: #64748b;
border-radius: 20px;
}
</style>
</head>
<body>
<div class="poster-container">
<div class="bg-pattern"></div>
<div class="bg-shape shape-top"></div>
<div class="bg-shape shape-bottom"></div>
<div class="content-wrapper">
<!-- Header -->
<header>
<h1 class="main-title">Cogent Core</h1>
<div class="subtitle">一次编码，全平台运行</div>
</header>
<!-- Introduction -->
<div class="intro-card">
<p class="intro-text">
<strong>Cogent Core</strong> 是一个免费开源的强大框架，专为构建强大、快速、优雅的 2D 和 3D 应用而生。
使用单一的 <strong>Go</strong> 代码库，即可让您的应用在 macOS, Windows, Linux, iOS, Android 和 Web 上无缝运行。
</p>
</div>
<!-- Features -->
<section>
<div class="section-header">
<i class="material-icons section-icon">stars</i>
<h2 class="section-title">核心优势</h2>
</div>
<div class="features-grid">
<div class="feature-card">
<div class="feature-icon-box"><i class="material-icons">devices</i></div>
<div class="feature-title">全平台覆盖</div>
<div class="feature-desc">真正实现一套代码运行在桌面、移动端和网页平台，告别重复劳动。</div>
</div>
<div class="feature-card">
<div class="feature-icon-box"><i class="material-icons">speed</i></div>
<div class="feature-title">极致性能</div>
<div class="feature-desc">基于 WebGPU 构建，提供原生级的流畅渲染体验，轻松应对 3D 交互。</div>
</div>
<div class="feature-card">
<div class="feature-icon-box"><i class="material-icons">code</i></div>
<div class="feature-title">Go 语言驱动</div>
<div class="feature-desc">继承 Go 的简洁高效与类型安全，代码可读性强，维护成本低。</div>
</div>
<div class="feature-card">
<div class="feature-icon-box"><i class="material-icons">dashboard_customize</i></div>
<div class="feature-title">丰富组件库</div>
<div class="feature-desc">内置按钮、图表、3D 视图、Markdown 渲染等高级功能，开箱即用。</div>
</div>
</div>
</section>
<!-- Tech Stack -->
<section>
<div class="section-header">
<i class="material-icons section-icon">architecture</i>
<h2 class="section-title">技术基础</h2>
</div>
<div class="tech-container">
<img src="https://sfile.chatglm.cn/image/9e/9e254c65.jpg" alt="Go Language" class="tech-image">
<div class="tech-content">
<h3>Go + WebGPU 强强联合</h3>
<p>结合 Go 语言的高效并发特性与 WebGPU 的现代图形能力，打造下一代高性能应用。官网本身即由 Cogent Core 构建并运行于 Web。</p>
</div>
</div>
</section>
<!-- Usage Scenarios -->
<section>
<div class="section-header">
<i class="material-icons section-icon">lightbulb</i>
<h2 class="section-title">应用场景</h2>
</div>
<div class="scenarios-flex">
<div class="scenario-tag">
<div class="scenario-title">专业工具开发</div>
<div class="scenario-desc">IDE、图形编辑器、邮件客户端</div>
</div>
<div class="scenario-tag">
<div class="scenario-title">科学研究平台</div>
<div class="scenario-desc">3D 模型展示、神经科学模拟工具</div>
</div>
<div class="scenario-tag">
<div class="scenario-title">内容型应用</div>
<div class="scenario-desc">文档站点、博客系统、知识库</div>
</div>
</div>
</section>
<!-- Installation -->
<section>
<div class="section-header">
<i class="material-icons section-icon">terminal</i>
<h2 class="section-title">快速开始</h2>
</div>
<div class="code-section">
<div class="code-header"></div>
<span class="code-line"><span class="cmt"># 1. 完成官网安装指引后克隆仓库</span></span>
<span class="code-line"><span class="cmd">git</span> clone https://github.com/cogentcore/core.git</span>
<span class="code-line"><span class="cmd">cd</span> <span class="pth">core/examples/hello</span></span>
<span class="code-line"><span class="cmt"># 2. 运行示例应用</span></span>
<span class="code-line"><span class="cmd">go</span> run .</span>
</div>
</section>
<!-- Footer -->
<div class="footer">
<a href="https://cogentcore.org/core" class="footer-link">cogentcore.org/core</a>
<div class="tags-row">
<span class="tag-pill">Open Source</span>
<span class="tag-pill">BSD-3 License</span>
<span class="tag-pill">Interactive Docs</span>
</div>
</div>
</div>
</div>
</body>
</html>
登录后可参与表态
讨论回复
0 条回复还没有人回复，快来发表你的看法吧！