boos/BoosAPI
2
0
Fork 2
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix: support website color schemes

Browse Source
This commit is contained in:
boos
2026-06-06 18:45:12 +08:00
parent 4b757b8250
commit d5babf5f3f
3 changed files with 203 additions and 91 deletions
Download Patch File Download Diff File Expand all files Collapse all files
website/app/globals.css
+194 -85
View File
@@ -1,6 +1,7 @@
@import "tailwindcss";
:root {
color-scheme: light;
--ink: #f7fbf2;
--ink-soft: #eef6e6;
--panel: rgba(255, 255, 255, 0.82);
@@ -14,11 +15,146 @@
--acid-2: #79d94d;
--ice: #f7ffef;
--blue: #18b9c7;
--cyan: #087f91;
--hot: #946600;
--claude: #8c6f52;
--flow-end: #ffffff;
--amber: #a97805;
--shadow: rgba(18, 48, 38, 0.12);
--shell-gradient:
radial-gradient(circle at 8% 18%, rgba(183, 237, 42, 0.26), transparent 28%),
radial-gradient(circle at 88% 8%, rgba(24, 185, 199, 0.15), transparent 30%),
linear-gradient(145deg, #fbfff6 0%, #f3faec 46%, #e9f6ea 100%);
--grid-line-y: rgba(32, 82, 66, 0.05);
--grid-line-x: rgba(32, 82, 66, 0.045);
--noise-dot: rgba(10, 36, 28, 0.11);
--noise-blend: multiply;
--boot-bg:
radial-gradient(circle at 28% 34%, rgba(183, 237, 42, 0.28), transparent 30%),
radial-gradient(circle at 72% 60%, rgba(24, 185, 199, 0.16), transparent 32%),
rgba(247, 251, 242, 0.84);
--boot-frame-bg:
linear-gradient(135deg, rgba(255, 255, 255, 0.98), rgba(250, 255, 244, 0.9)),
#ffffff;
--boot-shadow:
0 34px 120px rgba(28, 78, 60, 0.24),
0 0 0 1px rgba(255, 255, 255, 0.72),
inset 0 1px 0 rgba(255, 255, 255, 0.96);
--boot-rule-line: linear-gradient(90deg, rgba(11, 36, 28, 0.22), rgba(24, 185, 199, 0.16), transparent);
--boot-progress-bg: rgba(11, 36, 28, 0.08);
--surface: rgba(255, 255, 255, 0.68);
--surface-strong: rgba(255, 255, 255, 0.76);
--surface-hover: rgba(255, 255, 255, 0.88);
--surface-highlight: rgba(255, 255, 255, 0.82);
--surface-border-soft: rgba(255, 255, 255, 0.09);
--surface-muted: rgba(12, 34, 28, 0.06);
--panel-gradient:
linear-gradient(180deg, rgba(255, 255, 255, 0.94), rgba(250, 255, 245, 0.72)),
rgba(255, 255, 255, 0.76);
--card-gradient:
linear-gradient(180deg, rgba(255, 255, 255, 0.92), rgba(250, 255, 245, 0.72)),
rgba(255, 255, 255, 0.76);
--console-bg:
radial-gradient(circle at 18% 18%, rgba(183, 237, 42, 0.26), transparent 30%),
radial-gradient(circle at 86% 82%, rgba(24, 185, 199, 0.15), transparent 34%),
linear-gradient(180deg, rgba(255, 255, 255, 0.92), rgba(247, 253, 241, 0.72)),
rgba(255, 255, 255, 0.82);
--console-grid-y: rgba(28, 78, 60, 0.06);
--console-grid-x: rgba(28, 78, 60, 0.05);
--console-bar-bg:
linear-gradient(90deg, rgba(183, 237, 42, 0.18), rgba(255, 255, 255, 0.72) 42%, rgba(24, 185, 199, 0.08)),
rgba(255, 255, 255, 0.72);
--route-shine: linear-gradient(110deg, rgba(255, 255, 255, 0.5), transparent 28%, transparent 76%, rgba(183, 237, 42, 0.1));
--route-featured-bg:
linear-gradient(90deg, rgba(183, 237, 42, 0.22), rgba(255, 255, 255, 0.74) 42%, rgba(24, 185, 199, 0.1)),
rgba(255, 255, 255, 0.76);
--pill-featured-bg: rgba(183, 237, 42, 0.16);
--pill-featured-text: rgba(9, 23, 19, 0.82);
--node-fill: rgba(255, 255, 255, 0.42);
--wide-node-bg:
radial-gradient(circle at 80% 0%, rgba(183, 237, 42, 0.22), transparent 36%),
rgba(255, 255, 255, 0.78);
--radius: 24px;
}
@media (prefers-color-scheme: dark) {
:root {
color-scheme: dark;
--ink: #06110e;
--ink-soft: #0a1813;
--panel: rgba(10, 26, 21, 0.82);
--panel-strong: rgba(14, 34, 28, 0.94);
--line: rgba(219, 255, 172, 0.14);
--line-strong: rgba(183, 237, 42, 0.36);
--text: #f5fff0;
--muted: rgba(232, 246, 224, 0.72);
--faint: rgba(232, 246, 224, 0.52);
--acid: #c8ff45;
--acid-2: #82e35d;
--ice: #eaf7ff;
--blue: #74ecf7;
--cyan: #72ffd1;
--hot: #ffe08a;
--claude: #d7ba9a;
--flow-end: #ecfff7;
--amber: #ffd268;
--shadow: rgba(0, 0, 0, 0.34);
--shell-gradient:
radial-gradient(circle at 8% 18%, rgba(183, 237, 42, 0.18), transparent 28%),
radial-gradient(circle at 88% 8%, rgba(24, 185, 199, 0.16), transparent 30%),
linear-gradient(145deg, #06110e 0%, #0a1813 46%, #0e2018 100%);
--grid-line-y: rgba(205, 255, 154, 0.06);
--grid-line-x: rgba(205, 255, 154, 0.045);
--noise-dot: rgba(224, 255, 204, 0.08);
--noise-blend: screen;
--boot-bg:
radial-gradient(circle at 28% 34%, rgba(183, 237, 42, 0.18), transparent 30%),
radial-gradient(circle at 72% 60%, rgba(24, 185, 199, 0.16), transparent 32%),
rgba(4, 12, 10, 0.86);
--boot-frame-bg:
linear-gradient(135deg, rgba(14, 34, 28, 0.98), rgba(8, 22, 18, 0.92)),
#06110e;
--boot-shadow:
0 34px 120px rgba(0, 0, 0, 0.48),
0 0 0 1px rgba(215, 255, 77, 0.1),
inset 0 1px 0 rgba(255, 255, 255, 0.08);
--boot-rule-line: linear-gradient(90deg, rgba(215, 255, 77, 0.28), rgba(116, 236, 247, 0.2), transparent);
--boot-progress-bg: rgba(232, 246, 224, 0.1);
--surface: rgba(13, 31, 25, 0.72);
--surface-strong: rgba(14, 34, 28, 0.82);
--surface-hover: rgba(20, 48, 39, 0.9);
--surface-highlight: rgba(255, 255, 255, 0.08);
--surface-border-soft: rgba(255, 255, 255, 0.1);
--surface-muted: rgba(232, 246, 224, 0.08);
--panel-gradient:
linear-gradient(180deg, rgba(17, 40, 33, 0.94), rgba(9, 24, 19, 0.72)),
rgba(11, 28, 23, 0.78);
--card-gradient:
linear-gradient(180deg, rgba(17, 40, 33, 0.92), rgba(9, 24, 19, 0.74)),
rgba(11, 28, 23, 0.78);
--console-bg:
radial-gradient(circle at 18% 18%, rgba(183, 237, 42, 0.18), transparent 30%),
radial-gradient(circle at 86% 82%, rgba(24, 185, 199, 0.16), transparent 34%),
linear-gradient(180deg, rgba(14, 34, 28, 0.94), rgba(7, 19, 16, 0.76)),
rgba(6, 17, 14, 0.86);
--console-grid-y: rgba(215, 255, 77, 0.06);
--console-grid-x: rgba(116, 236, 247, 0.045);
--console-bar-bg:
linear-gradient(90deg, rgba(183, 237, 42, 0.16), rgba(12, 31, 26, 0.72) 42%, rgba(24, 185, 199, 0.1)),
rgba(13, 31, 25, 0.82);
--route-shine: linear-gradient(110deg, rgba(255, 255, 255, 0.08), transparent 28%, transparent 76%, rgba(183, 237, 42, 0.12));
--route-featured-bg:
linear-gradient(90deg, rgba(183, 237, 42, 0.18), rgba(15, 36, 30, 0.76) 42%, rgba(24, 185, 199, 0.12)),
rgba(14, 34, 28, 0.8);
--pill-featured-bg: rgba(183, 237, 42, 0.12);
--pill-featured-text: rgba(245, 255, 240, 0.88);
--node-fill: rgba(232, 246, 224, 0.08);
--wide-node-bg:
radial-gradient(circle at 80% 0%, rgba(183, 237, 42, 0.18), transparent 36%),
rgba(13, 31, 25, 0.78);
}
}
* {
box-sizing: border-box;
}
@@ -56,10 +192,7 @@ a {
position: relative;
min-height: 100dvh;
overflow: hidden;
background:
radial-gradient(circle at 8% 18%, rgba(183, 237, 42, 0.26), transparent 28%),
radial-gradient(circle at 88% 8%, rgba(24, 185, 199, 0.15), transparent 30%),
linear-gradient(145deg, #fbfff6 0%, #f3faec 46%, #e9f6ea 100%);
background: var(--shell-gradient);
}
.motion-root {
@@ -81,8 +214,8 @@ a {
pointer-events: none;
content: "";
background:
linear-gradient(rgba(32, 82, 66, 0.05) 1px, transparent 1px),
linear-gradient(90deg, rgba(32, 82, 66, 0.045) 1px, transparent 1px);
linear-gradient(var(--grid-line-y) 1px, transparent 1px),
linear-gradient(90deg, var(--grid-line-x) 1px, transparent 1px);
background-size: 82px 82px;
mask-image: linear-gradient(to bottom, black, transparent 78%);
}
@@ -94,8 +227,8 @@ a {
pointer-events: none;
opacity: 0.14;
background-image:
repeating-radial-gradient(circle at 30% 30%, rgba(10, 36, 28, 0.11) 0 1px, transparent 1px 4px);
mix-blend-mode: multiply;
repeating-radial-gradient(circle at 30% 30%, var(--noise-dot) 0 1px, transparent 1px 4px);
mix-blend-mode: var(--noise-blend);
}
.boot-screen {
@@ -106,10 +239,7 @@ a {
place-items: center;
padding: 28px;
pointer-events: none;
background:
radial-gradient(circle at 28% 34%, rgba(183, 237, 42, 0.28), transparent 30%),
radial-gradient(circle at 72% 60%, rgba(24, 185, 199, 0.16), transparent 32%),
rgba(247, 251, 242, 0.84);
background: var(--boot-bg);
backdrop-filter: blur(14px);
animation: boot-screen-fallback 3.2s 0.25s ease forwards;
}
@@ -123,14 +253,9 @@ a {
gap: 22px;
border: 1px solid rgba(11, 36, 28, 0.34);
border-radius: 6px;
background:
linear-gradient(135deg, rgba(255, 255, 255, 0.98), rgba(250, 255, 244, 0.9)),
#ffffff;
background: var(--boot-frame-bg);
padding: clamp(24px, 4vw, 34px);
box-shadow:
0 34px 120px rgba(28, 78, 60, 0.24),
0 0 0 1px rgba(255, 255, 255, 0.72),
inset 0 1px 0 rgba(255, 255, 255, 0.96);
box-shadow: var(--boot-shadow);
}
.boot-frame::before,
@@ -176,7 +301,7 @@ a {
.boot-rule {
width: 100%;
height: 1px;
background: linear-gradient(90deg, rgba(11, 36, 28, 0.22), rgba(24, 185, 199, 0.16), transparent);
background: var(--boot-rule-line);
transform-origin: left center;
animation: boot-rule-fallback 0.72s ease both;
}
@@ -191,7 +316,7 @@ a {
display: flex;
align-items: center;
gap: 10px;
color: rgba(22, 47, 39, 0.78);
color: var(--muted);
font-family: var(--font-geist-mono), monospace;
font-size: 12px;
}
@@ -212,7 +337,7 @@ a {
bottom: clamp(22px, 3vw, 28px);
height: 2px;
overflow: hidden;
background: rgba(11, 36, 28, 0.08);
background: var(--boot-progress-bg);
}
.boot-progress span {
@@ -264,6 +389,8 @@ a {
}
.brand-mark img {
width: 38px;
height: auto;
border-radius: 12px;
box-shadow: 0 12px 34px rgba(91, 166, 36, 0.16);
}
@@ -344,7 +471,7 @@ a {
.ghost-link,
.secondary-cta {
border-color: var(--line);
background: rgba(255, 255, 255, 0.62);
background: var(--surface);
color: var(--muted);
}
@@ -403,7 +530,7 @@ a {
gap: 9px;
border: 1px solid var(--line);
border-radius: 999px;
background: rgba(255, 255, 255, 0.68);
background: var(--surface);
color: var(--muted);
padding: 8px 12px;
font-size: 12px;
@@ -463,7 +590,7 @@ a {
gap: 7px;
border: 1px solid var(--line);
border-radius: 18px;
background: rgba(255, 255, 255, 0.7);
background: var(--surface);
padding: 14px;
}
@@ -500,17 +627,13 @@ a {
min-height: 520px;
border: 1px solid var(--line);
border-radius: 32px;
background:
radial-gradient(circle at 18% 18%, rgba(183, 237, 42, 0.26), transparent 30%),
radial-gradient(circle at 86% 82%, rgba(24, 185, 199, 0.15), transparent 34%),
linear-gradient(180deg, rgba(255, 255, 255, 0.92), rgba(247, 253, 241, 0.72)),
rgba(255, 255, 255, 0.82);
background: var(--console-bg);
padding: 18px;
overflow: hidden;
transform-style: preserve-3d;
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.9),
0 34px 90px rgba(18, 48, 38, 0.16);
inset 0 1px 0 var(--surface-highlight),
0 34px 90px var(--shadow);
}
.hero-console::before,
@@ -537,8 +660,8 @@ a {
z-index: 0;
inset-block: 72px 18px;
background:
linear-gradient(rgba(28, 78, 60, 0.06) 1px, transparent 1px),
linear-gradient(90deg, rgba(28, 78, 60, 0.05) 1px, transparent 1px);
linear-gradient(var(--console-grid-y) 1px, transparent 1px),
linear-gradient(90deg, var(--console-grid-x) 1px, transparent 1px);
background-size: 32px 32px;
mask-image: linear-gradient(to bottom, transparent, black 12%, black 72%, transparent);
opacity: var(--grid-opacity);
@@ -578,8 +701,8 @@ a {
.node-card,
.deploy-stack > div {
border: 1px solid var(--line);
background: rgba(255, 255, 255, 0.68);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.82);
background: var(--surface);
box-shadow: inset 0 1px 0 var(--surface-highlight);
}
.route-row::before,
@@ -602,9 +725,7 @@ a {
justify-content: flex-start;
border-radius: 18px;
border-color: rgba(215, 255, 77, 0.22);
background:
linear-gradient(90deg, rgba(183, 237, 42, 0.18), rgba(255, 255, 255, 0.72) 42%, rgba(24, 185, 199, 0.08)),
rgba(255, 255, 255, 0.72);
background: var(--console-bar-bg);
padding: 0 16px;
}
@@ -651,7 +772,7 @@ a {
inset: 0;
pointer-events: none;
content: "";
background: linear-gradient(110deg, rgba(255, 255, 255, 0.5), transparent 28%, transparent 76%, rgba(183, 237, 42, 0.1));
background: var(--route-shine);
opacity: 0;
transition: opacity 180ms ease;
}
@@ -685,9 +806,9 @@ a {
}
.route-row em {
border: 1px solid rgba(255, 255, 255, 0.09);
border: 1px solid var(--surface-border-soft);
border-radius: 999px;
background: rgba(12, 34, 28, 0.06);
background: var(--surface-muted);
padding: 5px 8px;
white-space: nowrap;
}
@@ -695,12 +816,10 @@ a {
.route-row[data-featured="true"] {
min-height: 58px;
border-color: rgba(215, 255, 77, 0.34);
background:
linear-gradient(90deg, rgba(183, 237, 42, 0.22), rgba(255, 255, 255, 0.74) 42%, rgba(24, 185, 199, 0.1)),
rgba(255, 255, 255, 0.76);
background: var(--route-featured-bg);
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.88),
0 18px 44px rgba(18, 48, 38, 0.12);
inset 0 1px 0 var(--surface-highlight),
0 18px 44px var(--shadow);
}
.route-row[data-featured="true"]::after {
@@ -715,16 +834,16 @@ a {
.route-row[data-featured="true"] em {
border-color: rgba(215, 255, 77, 0.22);
background: rgba(183, 237, 42, 0.16);
color: rgba(9, 23, 19, 0.82);
background: var(--pill-featured-bg);
color: var(--pill-featured-text);
}
.route-row[data-tone="hot"] span {
color: #ffec99;
color: var(--hot);
}
.route-row[data-tone="hot"]::before {
background: #ffec99;
background: var(--hot);
box-shadow: 0 0 20px rgba(255, 236, 153, 0.5);
}
@@ -747,21 +866,21 @@ a {
}
.route-row[data-tone="cyan"] span {
color: #71ffd2;
color: var(--cyan);
}
.route-row[data-tone="cyan"]::before {
background: #71ffd2;
background: var(--cyan);
box-shadow: 0 0 20px rgba(113, 255, 210, 0.48);
}
.route-row[data-tone="white"] span {
color: var(--ice);
.route-row[data-tone="claude"] span {
color: var(--claude);
}
.route-row[data-tone="white"]::before {
background: var(--ice);
box-shadow: 0 0 20px rgba(233, 247, 255, 0.42);
.route-row[data-tone="claude"]::before {
background: var(--claude);
box-shadow: 0 0 20px rgba(215, 186, 154, 0.42);
}
.route-row strong,
@@ -826,7 +945,7 @@ a {
opacity: 0.28;
pointer-events: none;
mask-image: linear-gradient(115deg, transparent 0%, black 22%, black 58%, transparent 88%);
mix-blend-mode: multiply;
mix-blend-mode: var(--noise-blend);
}
.flow-line {
@@ -855,7 +974,7 @@ a {
}
.node {
fill: rgba(255, 255, 255, 0.42);
fill: var(--node-fill);
stroke: rgba(215, 255, 77, 0.13);
}
@@ -927,9 +1046,7 @@ a {
gap: 24px;
border: 1px solid var(--line);
border-radius: var(--radius);
background:
linear-gradient(180deg, rgba(255, 255, 255, 0.92), rgba(250, 255, 245, 0.72)),
rgba(255, 255, 255, 0.76);
background: var(--card-gradient);
padding: 20px;
}
@@ -992,10 +1109,10 @@ a {
.module-strip span:hover {
transform: translateY(-3px);
border-color: var(--line-strong);
background-color: rgba(255, 255, 255, 0.88);
background-color: var(--surface-hover);
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.92),
0 22px 54px rgba(18, 48, 38, 0.13);
inset 0 1px 0 var(--surface-highlight),
0 22px 54px var(--shadow);
}
.api-section {
@@ -1015,10 +1132,8 @@ a {
.control-section {
border: 1px solid var(--line);
border-radius: 32px;
background:
linear-gradient(180deg, rgba(255, 255, 255, 0.94), rgba(250, 255, 245, 0.7)),
rgba(255, 255, 255, 0.76);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9);
background: var(--panel-gradient);
box-shadow: inset 0 1px 0 var(--surface-highlight);
}
.studio-copy {
@@ -1076,7 +1191,7 @@ a {
padding: 20px;
background:
linear-gradient(135deg, rgba(183, 237, 42, 0.13), transparent 34%),
rgba(255, 255, 255, 0.74);
var(--surface-strong);
}
.endpoint-line {
@@ -1126,10 +1241,8 @@ a {
.final-section {
border: 1px solid var(--line);
border-radius: 32px;
background:
linear-gradient(180deg, rgba(255, 255, 255, 0.94), rgba(250, 255, 245, 0.72)),
rgba(255, 255, 255, 0.76);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9);
background: var(--panel-gradient);
box-shadow: inset 0 1px 0 var(--surface-highlight);
}
.factory-section,
@@ -1186,9 +1299,7 @@ a {
.node-card.wide {
grid-column: 1 / -1;
min-height: 156px;
background:
radial-gradient(circle at 80% 0%, rgba(183, 237, 42, 0.22), transparent 36%),
rgba(255, 255, 255, 0.78);
background: var(--wide-node-bg);
}
.ops-section {
@@ -1202,10 +1313,8 @@ a {
.ops-grid {
border: 1px solid var(--line);
border-radius: 32px;
background:
linear-gradient(180deg, rgba(255, 255, 255, 0.94), rgba(250, 255, 245, 0.72)),
rgba(255, 255, 255, 0.76);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9);
background: var(--panel-gradient);
box-shadow: inset 0 1px 0 var(--surface-highlight);
}
.ops-copy {
@@ -1270,7 +1379,7 @@ a {
gap: 16px;
border: 1px solid var(--line);
border-radius: 22px;
background: rgba(255, 255, 255, 0.68);
background: var(--surface);
padding: 20px;
}
@@ -1297,7 +1406,7 @@ a {
.module-strip span {
border: 1px solid var(--line);
border-radius: 999px;
background: rgba(255, 255, 255, 0.7);
background: var(--surface);
color: var(--muted);
padding: 12px 16px;
font-size: 13px;
@@ -1404,7 +1513,7 @@ a {
.brand-mark img {
width: 34px;
height: 34px;
height: auto;
}
.ghost-link {
website/app/layout.tsx
+5 -2
View File
@@ -35,8 +35,11 @@ export const metadata: Metadata = {
export const viewport: Viewport = {
width: "device-width",
initialScale: 1,
colorScheme: "light",
themeColor: "#f7fbf2",
colorScheme: "light dark",
themeColor: [
{ media: "(prefers-color-scheme: light)", color: "#f7fbf2" },
{ media: "(prefers-color-scheme: dark)", color: "#06110e" },
],
};
export default function RootLayout({
website/app/page.tsx
+4 -4
View File
@@ -38,7 +38,7 @@ const heroStats = [
const routes = [
{ type: "GPT", model: "gpt-5.5", state: "深度推理", tone: "hot", featured: true },
{ type: "Image", model: "gpt-image-2", state: "图像生成", tone: "lime", featured: true },
{ type: "Claude", model: "claude-opus-4-8", state: "Messages", tone: "white" },
{ type: "Claude", model: "claude-opus-4-8", state: "Messages", tone: "claude" },
{ type: "Gemini", model: "gemini-3-pro-preview", state: "多模态", tone: "cyan" },
{ type: "Video", model: "doubao-seedance-2-0-260128", state: "视频队列", tone: "blue" },
];
@@ -176,9 +176,9 @@ function FlowGlyph() {
<svg className="flow-glyph" viewBox="0 0 520 360" aria-hidden="true">
<defs>
<linearGradient id="lineGradient" x1="0" x2="1" y1="0" y2="1">
<stop offset="0%" stopColor="#D7FF4D" />
<stop offset="55%" stopColor="#8BF6FF" />
<stop offset="100%" stopColor="#FFFFFF" />
<stop offset="0%" stopColor="var(--acid)" />
<stop offset="55%" stopColor="var(--blue)" />
<stop offset="100%" stopColor="var(--flow-end)" />
</linearGradient>
<filter id="softGlow" x="-30%" y="-30%" width="160%" height="160%">
<feGaussianBlur stdDeviation="6" result="blur" />