Skip to content

Commit 0497724

Browse files
makerjackiemakerjackie
authored
docs: add v0.7.1 marketing kit (#11)
1 parent 06be97c commit 0497724

12 files changed

Lines changed: 361 additions & 4 deletions

‎README.md‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,9 @@
33
[English](README.en.md) · [工作原理](docs/how-it-works.zh-CN.md) · [MIT License](LICENSE)
44

55
<p align="center">
6-
<img src="assets/app-icon-source.png" width="150" alt="Codex Helper 图标">
6+
<a href="assets/marketing-v0.7.1/codex-helper-promo-zh.mp4">
7+
<img src="assets/marketing-v0.7.1/codex-helper-poster-zh.webp" width="620" alt="Codex Helper 宣传图">
8+
</a>
79
</p>
810

911
一个开源的 macOS Codex 辅助工具。直接查看剩余额度，并在模型满载时安全续跑原任务。
@@ -17,9 +19,7 @@
1719
- 模型满载后自动定位并重试原 Codex 任务
1820
- 中英文、自动更新、Codex 官方动态与文档入口
1921

20-
<p align="center">
21-
<img src="assets/status-rail-v0.6.0.webp" width="520" alt="Codex Helper 悬浮状态轨道">
22-
</p>
22+
点击上方宣传图可查看 15 秒产品短片（无配音，轻音乐）。
2323

2424
## 安装
2525

‎assets/marketing-v0.7.1/codex-helper-poster-zh.webp‎

71.6 KB
Loading

‎assets/marketing-v0.7.1/codex-helper-promo-zh.mp4‎

3.51 MB
Binary file not shown.

‎assets/marketing-v0.7.1/codex-helper-ui-poster-zh.webp‎

76.3 KB
Loading

‎assets/marketing-v0.7.1/source/abstract-orbits.png‎

1.91 MB
Loading

‎assets/marketing-v0.7.1/source/dashboard-dark.png‎

746 KB
Loading

‎assets/marketing-v0.7.1/source/dashboard-light.png‎

1010 KB
Loading

‎assets/marketing-v0.7.1/source/poster-detail.html‎

Lines changed: 149 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,149 @@
1+
<!doctype html>
2+
<html lang="zh-CN">
3+
<head>
4+
<meta charset="utf-8" />
5+
<meta name="viewport" content="width=1080, initial-scale=1" />
6+
<style>
7+
* { box-sizing: border-box; }
8+
html, body { margin: 0; width: 1080px; height: 1440px; overflow: hidden; }
9+
body {
10+
font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "PingFang SC", sans-serif;
11+
color: #f7f4ed;
12+
background: #0d1413;
13+
}
14+
.poster {
15+
position: relative;
16+
width: 1080px;
17+
height: 1440px;
18+
overflow: hidden;
19+
background:
20+
radial-gradient(circle at 83% 12%, rgba(248,151,28,.22), transparent 26%),
21+
radial-gradient(circle at 18% 78%, rgba(17,161,136,.22), transparent 33%),
22+
linear-gradient(155deg, #101817 0%, #111b19 42%, #1d211b 100%);
23+
}
24+
.orbit {
25+
position: absolute;
26+
width: 740px;
27+
height: 740px;
28+
right: -320px;
29+
top: -280px;
30+
border: 1px solid rgba(245,170,60,.25);
31+
border-radius: 50%;
32+
}
33+
.orbit::before,
34+
.orbit::after {
35+
content: "";
36+
position: absolute;
37+
border: 1px solid rgba(37,184,155,.17);
38+
border-radius: 50%;
39+
}
40+
.orbit::before { inset: 78px; }
41+
.orbit::after { inset: 156px; }
42+
.header {
43+
position: absolute;
44+
left: 76px;
45+
right: 76px;
46+
top: 74px;
47+
display: flex;
48+
justify-content: space-between;
49+
align-items: center;
50+
}
51+
.brand { font-size: 22px; font-weight: 720; letter-spacing: 3.6px; }
52+
.dot { display: inline-block; width: 11px; height: 11px; margin-right: 13px; border-radius: 50%; background: #20c685; box-shadow: 0 0 20px rgba(32,198,133,.75); }
53+
.status { color: rgba(247,244,237,.5); font-size: 19px; font-weight: 620; }
54+
.headline {
55+
position: absolute;
56+
left: 73px;
57+
top: 166px;
58+
width: 900px;
59+
margin: 0;
60+
font-size: 74px;
61+
line-height: 1.08;
62+
letter-spacing: -4px;
63+
font-weight: 740;
64+
}
65+
.headline em { font-style: normal; color: #f3a12e; }
66+
.intro {
67+
position: absolute;
68+
left: 78px;
69+
top: 352px;
70+
margin: 0;
71+
color: rgba(247,244,237,.61);
72+
font-size: 28px;
73+
line-height: 1.5;
74+
font-weight: 520;
75+
}
76+
.stage {
77+
position: absolute;
78+
left: 58px;
79+
top: 470px;
80+
width: 964px;
81+
height: 680px;
82+
}
83+
.rail {
84+
position: absolute;
85+
width: 850px;
86+
height: auto;
87+
filter: drop-shadow(0 26px 46px rgba(0,0,0,.38));
88+
}
89+
.rail.light { left: 0; top: 0; }
90+
.rail.dark { right: 0; top: 302px; }
91+
.label {
92+
position: absolute;
93+
display: flex;
94+
align-items: center;
95+
gap: 11px;
96+
font-size: 20px;
97+
font-weight: 680;
98+
letter-spacing: 1px;
99+
color: rgba(247,244,237,.72);
100+
}
101+
.label::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #f3a12e; }
102+
.label.light { right: 14px; top: 228px; }
103+
.label.dark { left: 12px; top: 528px; }
104+
.label.dark::before { background: #1ab293; }
105+
.rule {
106+
position: absolute;
107+
left: 77px;
108+
right: 77px;
109+
top: 1170px;
110+
height: 1px;
111+
background: linear-gradient(90deg, rgba(255,255,255,.04), rgba(255,255,255,.24), rgba(255,255,255,.04));
112+
}
113+
.footer {
114+
position: absolute;
115+
left: 77px;
116+
right: 77px;
117+
top: 1218px;
118+
display: flex;
119+
align-items: end;
120+
justify-content: space-between;
121+
}
122+
.footer-main { font-size: 31px; line-height: 1.4; font-weight: 650; }
123+
.footer-main span { color: #25c39e; }
124+
.footer-side { text-align: right; color: rgba(247,244,237,.52); font-size: 20px; line-height: 1.65; font-weight: 560; }
125+
</style>
126+
</head>
127+
<body>
128+
<main class="poster">
129+
<div class="orbit"></div>
130+
<header class="header">
131+
<div class="brand"><span class="dot"></span>CODEX HELPER</div>
132+
<div class="status">macOS · v0.7.1</div>
133+
</header>
134+
<h1 class="headline">浅色，深色。<br><em>都安静地守着 Codex。</em></h1>
135+
<p class="intro">额度变化时，颜色会轻轻提醒你。<br>需要时，自动重试接手未完成的任务。</p>
136+
<section class="stage">
137+
<img class="rail light" src="rail-light.png" alt="浅色悬浮轨道" />
138+
<div class="label light">浅色模式</div>
139+
<img class="rail dark" src="rail-dark.png" alt="深色悬浮轨道" />
140+
<div class="label dark">深色模式</div>
141+
</section>
142+
<div class="rule"></div>
143+
<footer class="footer">
144+
<div class="footer-main">看见剩余，放心继续。<br><span>Codex Helper for Mac</span></div>
145+
<div class="footer-side">菜单栏 · 悬浮轨道 · 小组件<br>免费开源 · MIT License</div>
146+
</footer>
147+
</main>
148+
</body>
149+
</html>

‎assets/marketing-v0.7.1/source/poster-hero.html‎

Lines changed: 156 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,156 @@
1+
<!doctype html>
2+
<html lang="zh-CN">
3+
<head>
4+
<meta charset="utf-8" />
5+
<meta name="viewport" content="width=1080, initial-scale=1" />
6+
<style>
7+
* { box-sizing: border-box; }
8+
html, body { margin: 0; width: 1080px; height: 1440px; overflow: hidden; }
9+
body {
10+
font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "PingFang SC", sans-serif;
11+
color: #17201f;
12+
background: #f6f3eb;
13+
}
14+
.poster {
15+
position: relative;
16+
width: 1080px;
17+
height: 1440px;
18+
overflow: hidden;
19+
background: linear-gradient(180deg, rgba(255,254,248,.96) 0%, rgba(248,247,240,.92) 48%, rgba(234,243,239,.88) 100%);
20+
}
21+
.art {
22+
position: absolute;
23+
inset: 0;
24+
width: 100%;
25+
height: 100%;
26+
object-fit: cover;
27+
opacity: .34;
28+
filter: saturate(.78) contrast(.9);
29+
}
30+
.wash {
31+
position: absolute;
32+
inset: 0;
33+
background:
34+
radial-gradient(circle at 86% 24%, rgba(255,168,53,.15), transparent 26%),
35+
linear-gradient(180deg, rgba(250,249,242,.42), rgba(250,249,242,.05) 50%, rgba(245,248,245,.3));
36+
}
37+
.topline {
38+
position: absolute;
39+
top: 70px;
40+
left: 74px;
41+
right: 74px;
42+
display: flex;
43+
align-items: center;
44+
justify-content: space-between;
45+
font-size: 22px;
46+
font-weight: 700;
47+
letter-spacing: 4.2px;
48+
}
49+
.brand { display: flex; align-items: center; gap: 16px; }
50+
.brand-mark {
51+
width: 16px;
52+
height: 16px;
53+
border-radius: 50%;
54+
background: #159e89;
55+
box-shadow: 0 0 0 8px rgba(21,158,137,.10);
56+
}
57+
.platform { color: rgba(23,32,31,.52); font-size: 19px; letter-spacing: 2px; }
58+
.headline {
59+
position: absolute;
60+
top: 160px;
61+
left: 72px;
62+
width: 900px;
63+
font-size: 86px;
64+
line-height: 1.06;
65+
letter-spacing: -5px;
66+
font-weight: 760;
67+
}
68+
.headline .accent { color: #d9770b; }
69+
.subline {
70+
position: absolute;
71+
top: 368px;
72+
left: 77px;
73+
font-size: 30px;
74+
font-weight: 560;
75+
color: rgba(23,32,31,.66);
76+
letter-spacing: .5px;
77+
}
78+
.rail-wrap {
79+
position: absolute;
80+
top: 462px;
81+
left: 76px;
82+
width: 928px;
83+
height: 407px;
84+
display: flex;
85+
align-items: center;
86+
justify-content: center;
87+
filter: drop-shadow(0 30px 40px rgba(20,42,37,.16));
88+
}
89+
.rail { width: 910px; height: auto; display: block; }
90+
.dash-frame {
91+
position: absolute;
92+
left: 108px;
93+
top: 870px;
94+
width: 864px;
95+
height: 484px;
96+
overflow: hidden;
97+
border-radius: 35px 35px 0 0;
98+
border: 1px solid rgba(27,45,41,.13);
99+
box-shadow: 0 35px 80px rgba(15,48,42,.18);
100+
background: #f5f7f6;
101+
}
102+
.dashboard {
103+
width: 940px;
104+
height: auto;
105+
display: block;
106+
margin-left: -38px;
107+
margin-top: -14px;
108+
}
109+
.feature-strip {
110+
position: absolute;
111+
left: 80px;
112+
bottom: 42px;
113+
display: flex;
114+
gap: 14px;
115+
}
116+
.feature {
117+
padding: 13px 19px;
118+
border: 1px solid rgba(20,35,33,.14);
119+
border-radius: 999px;
120+
background: rgba(255,255,250,.82);
121+
color: #263331;
122+
font-size: 20px;
123+
font-weight: 650;
124+
box-shadow: 0 8px 24px rgba(33,59,53,.08);
125+
}
126+
.version {
127+
position: absolute;
128+
right: 77px;
129+
bottom: 57px;
130+
font-size: 20px;
131+
color: rgba(23,32,31,.56);
132+
font-weight: 650;
133+
}
134+
</style>
135+
</head>
136+
<body>
137+
<main class="poster">
138+
<img class="art" src="abstract-orbits.png" alt="" />
139+
<div class="wash"></div>
140+
<header class="topline">
141+
<div class="brand"><span class="brand-mark"></span><span>CODEX HELPER</span></div>
142+
<span class="platform">FOR MAC</span>
143+
</header>
144+
<h1 class="headline">Codex 的状态<br><span class="accent">一眼就够。</span></h1>
145+
<p class="subline">剩余额度 · 自动重试 · 更新动态</p>
146+
<div class="rail-wrap"><img class="rail" src="rail-light.png" alt="Codex Helper 悬浮轨道" /></div>
147+
<div class="dash-frame"><img class="dashboard" src="dashboard-light.png" alt="Codex Helper 主界面" /></div>
148+
<div class="feature-strip">
149+
<span class="feature">菜单栏</span>
150+
<span class="feature">悬浮轨道</span>
151+
<span class="feature">macOS 小组件</span>
152+
</div>
153+
<div class="version">开源 · 免费 · MIT</div>
154+
</main>
155+
</body>
156+
</html>

‎assets/marketing-v0.7.1/source/rail-dark.png‎

148 KB
Loading

0 commit comments

Comments
 (0)