diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..6acfbf6 --- /dev/null +++ b/.gitignore @@ -0,0 +1 @@ +git仓库连接信息.txt diff --git a/oneinai.html b/oneinai.html index 97cebdf..8f314c7 100644 --- a/oneinai.html +++ b/oneinai.html @@ -2,17 +2,20 @@ /* New API renders custom HTML inside an isolated shadow root. Keep the page self-contained and avoid document-level selectors or scripts. */ .oneinai-root { - --page: #f7fbff; + --page: #f3f6fa; --paper: rgba(255, 255, 255, 0.86); --paper-solid: #ffffff; - --ink: #16213a; - --muted: #5d6b82; + --ink: #12223b; + --muted: #62718a; --soft: #8c98aa; --line: rgba(38, 63, 105, 0.14); --line-strong: rgba(38, 63, 105, 0.22); --blue: #1757c2; --cyan: #19b8ac; - --gold: #b88a32; + --gold: #c59a57; + --navy: #0c1a2f; + --navy-soft: #17304c; + --red: #ed1c24; --ice: #eef7ff; --mint: #eefbf8; --shadow: rgba(48, 72, 112, 0.16); @@ -23,15 +26,15 @@ :host { scroll-behavior: smooth; } .oneinai-root { + display: block; + width: 100%; min-height: 100vh; font-family: 'Manrope', 'Noto Serif SC', 'Microsoft YaHei', sans-serif; color: var(--ink); background: - linear-gradient(118deg, transparent 0%, transparent 34%, rgba(23, 87, 194, 0.075) 34.2%, rgba(23, 87, 194, 0.012) 47%, transparent 58%), - linear-gradient(215deg, transparent 0%, transparent 45%, rgba(25, 184, 172, 0.08) 45.2%, rgba(25, 184, 172, 0.012) 58%, transparent 68%), - repeating-linear-gradient(90deg, rgba(38, 63, 105, 0.055) 0, rgba(38, 63, 105, 0.055) 1px, transparent 1px, transparent 92px), - repeating-linear-gradient(0deg, rgba(38, 63, 105, 0.042) 0, rgba(38, 63, 105, 0.042) 1px, transparent 1px, transparent 92px), - linear-gradient(180deg, #fbfdff 0%, #f7fbff 38%, #f8fbf8 100%); + repeating-linear-gradient(90deg, rgba(38, 63, 105, 0.035) 0, rgba(38, 63, 105, 0.035) 1px, transparent 1px, transparent 96px), + repeating-linear-gradient(0deg, rgba(38, 63, 105, 0.028) 0, rgba(38, 63, 105, 0.028) 1px, transparent 1px, transparent 96px), + linear-gradient(180deg, #f6f8fb 0%, #f8fafc 58%, #f3f7f6 100%); line-height: 1.55; font-weight: 500; overflow-x: hidden; @@ -56,7 +59,7 @@ inset: 0; z-index: -1; pointer-events: none; - opacity: 0.36; + opacity: 0.2; background-image: linear-gradient(135deg, rgba(23,87,194,0.08) 0 1px, transparent 1px 14px), linear-gradient(45deg, rgba(184,138,50,0.07) 0 1px, transparent 1px 16px); @@ -74,13 +77,14 @@ } .hero { - min-height: 560px; + min-height: 640px; display: grid; grid-template-columns: minmax(0, 1.02fr) minmax(360px, 0.98fr); align-items: center; - gap: 56px; - padding: 18px 0 72px; + gap: 64px; + padding: 68px 0 92px; position: relative; + isolation: isolate; } .hero::before { @@ -89,47 +93,46 @@ left: -90px; right: -90px; top: 0; - height: 455px; - z-index: -1; - border: 1px solid rgba(23, 87, 194, 0.08); - border-radius: 8px; - background: - linear-gradient(90deg, rgba(255,255,255,0.72), transparent 16%, transparent 82%, rgba(255,255,255,0.68)), - linear-gradient(120deg, rgba(23,87,194,0.06), transparent 42%, rgba(25,184,172,0.055)), - rgba(255,255,255,0.38); - clip-path: polygon(0 0, 100% 0, 93% 100%, 4% 100%); - opacity: 0.94; + bottom: 30px; + z-index: 0; + border: 1px solid rgba(255,255,255,0.12); + border-radius: 0 0 26px 26px; + background: linear-gradient(118deg, #0b192e 0%, #112640 54%, #1b3a55 100%); + clip-path: polygon(0 0, 100% 0, 96% 92%, 4% 100%); + box-shadow: 0 34px 90px rgba(12, 26, 47, 0.24); } - .eyebrow { - display: inline-flex; + .hero-copy, + .logo-stage { + position: relative; + z-index: 1; + } + + .hero-kicker { + display: flex; align-items: center; - gap: 10px; - padding: 9px 12px; - margin-bottom: 24px; - border: 1px solid rgba(23, 87, 194, 0.16); - border-radius: 8px; - background: rgba(255, 255, 255, 0.74); - color: #315783; - font-size: 13px; + gap: 12px; + margin-bottom: 26px; + color: #dfb974; + font-size: 12px; font-weight: 800; - box-shadow: inset 0 1px 0 rgba(255,255,255,0.9), 0 14px 34px rgba(48,72,112,0.08); + letter-spacing: 2.2px; } - .status-dot { - width: 8px; - height: 8px; - border-radius: 50%; - background: var(--cyan); - box-shadow: 0 0 0 6px rgba(25, 184, 172, 0.1), 0 0 22px rgba(25, 184, 172, 0.36); + .hero-kicker::before { + content: ''; + width: 42px; + height: 1px; + background: #dfb974; + opacity: 0.9; } .hero h1 { font-family: 'Noto Serif SC', 'Manrope', serif; - font-size: 84px; + font-size: clamp(56px, 7vw, 84px); line-height: 0.98; font-weight: 900; - color: #142646; + color: #f8fbff; letter-spacing: 0; margin-bottom: 26px; max-width: 720px; @@ -138,17 +141,61 @@ .hero h1 span { display: block; color: transparent; - background: linear-gradient(92deg, #142646 0%, #1757c2 42%, #19b8ac 76%, #b88a32 100%); + background: linear-gradient(92deg, #f8fbff 0%, #8bd8d1 56%, #dfb974 100%); -webkit-background-clip: text; background-clip: text; } .lead { max-width: 660px; - color: #52637d; + color: rgba(233, 241, 250, 0.76); font-size: 19px; line-height: 1.78; - margin-bottom: 34px; + margin-bottom: 22px; + } + + .trust-strip { + display: grid; + grid-template-columns: repeat(2, minmax(0, 1fr)); + gap: 18px; + max-width: 680px; + margin-bottom: 30px; + } + + .trust-proof { + display: grid; + grid-template-columns: 34px minmax(0, 1fr); + gap: 12px; + align-items: center; + padding: 15px 0; + border-top: 1px solid rgba(255,255,255,0.2); + border-bottom: 1px solid rgba(255,255,255,0.1); + } + + .trust-proof-accent { + border-top-color: rgba(223,185,116,0.72); + } + + .trust-index { + color: #dfb974; + font-size: 11px; + font-weight: 800; + letter-spacing: 1px; + } + + .trust-proof strong { + display: block; + color: #f8fbff; + font-size: 15px; + line-height: 1.3; + margin-bottom: 4px; + } + + .trust-proof span:last-child { + display: block; + color: rgba(233,241,250,0.58); + font-size: 12px; + font-weight: 700; } .actions { @@ -174,8 +221,14 @@ white-space: nowrap; } + .btn:focus-visible, + .doc-action:focus-visible { + outline: 2px solid var(--gold); + outline-offset: 4px; + } + .btn-primary { - background: linear-gradient(135deg, #1f6eea, #19b8ac); + background: linear-gradient(135deg, #2778e6, #1db5ae); color: #ffffff; border-color: rgba(23, 87, 194, 0.22); box-shadow: 0 22px 54px rgba(23, 87, 194, 0.22); @@ -187,39 +240,45 @@ } .btn-secondary { - color: #174d9f; - background: rgba(255, 255, 255, 0.78); - border-color: rgba(23, 87, 194, 0.2); - box-shadow: 0 16px 40px rgba(48, 72, 112, 0.08); + color: #f8fbff; + background: rgba(255, 255, 255, 0.06); + border-color: rgba(255, 255, 255, 0.28); + box-shadow: 0 16px 40px rgba(5, 14, 28, 0.16); } .signal-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); - gap: 10px; - max-width: 600px; + gap: 12px; + max-width: 680px; } .signal { - min-height: 78px; - padding: 16px; - border: 1px solid var(--line); + min-height: 84px; + padding: 17px 18px; + border: 1px solid rgba(255,255,255,0.15); border-radius: 8px; - background: rgba(255, 255, 255, 0.78); - box-shadow: 0 14px 34px rgba(48, 72, 112, 0.08); + background: rgba(255, 255, 255, 0.07); + box-shadow: inset 0 1px 0 rgba(255,255,255,0.1), 0 16px 34px rgba(5, 14, 28, 0.14); + backdrop-filter: blur(16px); + } + + .signal:first-child { + border-color: rgba(223,185,116,0.58); + background: rgba(197,154,87,0.12); } .signal strong { display: block; - color: #152746; - font-size: 24px; + color: #f8fbff; + font-size: 20px; line-height: 1.1; margin-bottom: 7px; } .signal span { display: block; - color: var(--soft); + color: rgba(233,241,250,0.58); font-size: 12px; font-weight: 800; } @@ -329,8 +388,8 @@ .section { position: relative; - padding: 92px 0; - border-top: 1px solid rgba(38, 63, 105, 0.1); + padding: 108px 0; + border-top: 1px solid rgba(38, 63, 105, 0.08); } .section-head { @@ -345,6 +404,7 @@ color: var(--gold); font-size: 12px; font-weight: 800; + letter-spacing: 1.8px; margin-bottom: 12px; } @@ -377,9 +437,9 @@ padding: 28px; border-radius: 8px; border: 1px solid var(--line); - background: linear-gradient(180deg, rgba(255,255,255,0.95), rgba(250,253,255,0.82)); + background: rgba(255,255,255,0.78); overflow: hidden; - box-shadow: 0 18px 60px rgba(48,72,112,0.09), inset 0 1px 0 rgba(255,255,255,0.96); + box-shadow: 0 16px 44px rgba(48,72,112,0.06), inset 0 1px 0 rgba(255,255,255,0.96); transition: transform 0.24s ease, border-color 0.24s ease, background 0.24s ease, box-shadow 0.24s ease; } @@ -500,6 +560,7 @@ color: var(--gold); font-size: 13px; font-weight: 800; + letter-spacing: 1.8px; margin-bottom: 18px; } @@ -520,6 +581,11 @@ max-width: 560px; } + .price-note strong { + color: #1b3152; + font-weight: 900; + } + .pricing-aside { display: grid; gap: 12px; @@ -547,6 +613,37 @@ font-weight: 800; } + .provenance-bar { + display: grid; + grid-template-columns: auto minmax(0, 1fr); + gap: 4px 18px; + align-items: baseline; + margin-top: 18px; + padding: 18px 20px; + border: 1px solid rgba(197,154,87,0.3); + border-radius: 8px; + background: linear-gradient(100deg, rgba(255,250,239,0.82), rgba(255,255,255,0.62)); + } + + .provenance-label { + color: var(--gold); + font-size: 11px; + font-weight: 900; + letter-spacing: 1.6px; + } + + .provenance-bar strong { + color: #183252; + font-size: 16px; + } + + .provenance-bar p { + grid-column: 2; + color: var(--muted); + font-size: 13px; + line-height: 1.65; + } + .contact-panel { display: grid; grid-template-columns: minmax(0, 1fr) auto; @@ -645,7 +742,13 @@ padding: 10px 0 58px; min-height: auto; } - .hero::before { left: -20px; right: -20px; height: 430px; } + .hero::before { + left: -20px; + right: -20px; + bottom: 0; + height: auto; + clip-path: polygon(0 0, 100% 0, 100% 97%, 0 100%); + } .hero h1 { font-size: 64px; } .lead { font-size: 17px; } .logo-stage { min-height: 440px; order: -1; } @@ -667,33 +770,109 @@ .feature-card { min-height: 210px; } } + @media (max-width: 1100px) { + .pricing { grid-template-columns: 1fr; } + .price-main { font-size: clamp(48px, 6vw, 64px); } + .signal-row { grid-template-columns: repeat(2, minmax(0, 1fr)); } + .signal:first-child { grid-column: 1 / -1; } + } + + @media (max-width: 760px) { + .trust-strip { + grid-template-columns: 1fr; + gap: 0; + } + .signal-row { + grid-template-columns: 1fr; + } + } + @media (max-width: 620px) { + .page, + .hero, + .logo-stage { min-width: 0; } .page { width: calc(100% - 28px); } - .hero { padding-top: 6px; } + .hero { padding-top: 6px; padding-bottom: 32px; gap: 20px; } + .hero-kicker { gap: 8px; font-size: 10px; letter-spacing: 1.2px; } + .hero-kicker::before { width: 24px; } .hero h1 { font-size: 44px; } .lead { font-size: 16px; } - .actions { align-items: stretch; } + .actions { align-items: stretch; margin-bottom: 24px; } .btn { width: 100%; } .signal-row { grid-template-columns: 1fr; } .logo-stage { min-height: 380px; } - .stage-frame { width: min(330px, 92vw); } + .stage-frame { width: min(240px, 100%); max-width: 240px; min-width: 0; } .metric-chip { - min-width: 112px; + position: relative; + min-width: 0; + width: calc(100% - 12px); + justify-self: start; padding: 10px 12px; } .metric-chip strong { font-size: 16px; } - .chip-a { left: -2px; top: 72px; } - .chip-b { right: 64px; top: 28px; } - .chip-c { left: 10px; bottom: 36px; } + .trust-proof { padding: 11px 0; } + .logo-stage { + grid-template-columns: repeat(2, minmax(0, 1fr)); + display: grid; + gap: 10px 12px; + min-height: 0; + align-items: center; + } + .stage-frame { + grid-column: 1 / -1; + grid-row: 1; + justify-self: center; + } + .chip-a { + grid-column: 1; + grid-row: 2; + left: auto; + top: auto; + } + .chip-b { + grid-column: 2; + grid-row: 2; + right: auto; + top: auto; + justify-self: end; + } + .chip-c { + grid-column: 1 / -1; + grid-row: 3; + left: auto; + bottom: auto; + justify-self: center; + width: min(180px, 100%); + } + .stage-frame::after { filter: blur(8px); opacity: 0.5; } + .signal-row { display: none; } .section { padding: 68px 0; } .section-title { font-size: 32px; } .pricing-main { padding: 28px; min-height: 280px; } - .price-main { font-size: 42px; } + .price-main { font-size: clamp(28px, 10vw, 42px); white-space: nowrap; } + .provenance-bar { + grid-template-columns: 1fr; + gap: 8px; + } + .provenance-bar p { grid-column: 1; } .contact-panel { padding: 24px; } .doc-action { width: 100%; } .footer { flex-direction: column; } } + @media (max-width: 340px) { + .stage-frame { width: calc(100vw - 28px); } + .logo-stage { grid-template-columns: 1fr; } + .metric-chip { + grid-column: 1; + width: min(180px, 100%); + justify-self: center; + } + .chip-a { grid-row: 2; } + .chip-b { grid-row: 3; } + .chip-c { grid-row: 4; } + } + @media (prefers-reduced-motion: reduce) { *, *::before, @@ -709,25 +888,41 @@
-
OneinAI Enterprise Gateway
-

ONEINAI 智能 API 中枢

-

统一接入 Claude、OpenAI、Gemini 等主流模型,以稳定转发、透明计费和低延迟响应,为团队提供可长期依赖的 AI 基础设施。

+
MODEL SUPPLY / ENTERPRISE ACCESS
+

企业级 AI 模型网关

+

Claude、OpenAI、Gemini 等模型均通过一手正规渠道采购,来源清晰可追溯;充值按 1 CNY = 1 USD 计价,让企业从接入到对账都保持透明。

+
+
+ 01 +
+ 一手正规渠道采购 + 模型来源清晰,可追溯 +
+
+
+ 02 +
+ 1 CNY = 1 USD + 充值比例透明统一 +
+
+
- 1:1 - 全球同价汇率 + 1 CNY = 1 USD + 充值计价规则
- 99.9% - SLA 稳定性 + 多模型 + Claude / OpenAI / Gemini
- <200ms - 平均响应延迟 + 可追溯 + 采购与用量链路
@@ -741,16 +936,16 @@
- 0.5x - 限时费率优惠 + 一手 + 正规渠道采购
- 24/7 - 服务监控 + 1:1 + 充值计价比例
- 余额永久 - 长期有效 + 可追溯 + 模型来源链路
@@ -773,7 +968,7 @@
02

透明成本控制

-

真实汇率、清晰账单、余额长期有效,让团队可以按业务节奏规划模型预算。

+

统一计价规则、清晰账单与用量记录,让团队可以按业务节奏规划模型预算。

03
@@ -789,7 +984,7 @@
MODEL ACCESS

聚合顶尖模型能力

-

用一套 API 兼容多模型调用,在不同任务、成本与速度之间灵活切换。

+

用一套 API 兼容多模型调用;模型额度来自一手正规渠道采购,采购与使用链路清晰可追溯。

@@ -815,23 +1010,28 @@
+
+ SOURCE STANDARD + 一手正规渠道采购 +

从模型额度采购到接口使用,来源与用量保持清晰记录,便于企业预算、核验与长期管理。

+
-
LIMITED OFFER
-
¥1.00 = $1.00
-

打破行业溢价,按真实汇率使用模型能力。新用户享限时费率优惠,充值余额永久有效。

+
ENTERPRISE PRICING
+
1 CNY = 1 USD
+

充值按 1 CNY = 1 USD 统一计价;模型额度来自一手正规渠道采购,规则清晰、账单可核对。

- 1:1 汇率 - 美元对美元,投入直接转化为可用算力 + 一手采购 + 模型来源清晰可追溯,方便企业核验
- 0.5x 费率 - 限时活动期间享受更低调用成本 + 透明对账 + 统一计价规则,便于预算与用量管理