1010 lines
22 KiB
HTML
1010 lines
22 KiB
HTML
<style>
|
||
/* Self-contained styles for NewAPI's custom HTML shadow root. */
|
||
:host {
|
||
scroll-behavior: smooth;
|
||
}
|
||
|
||
.oneinai-root {
|
||
--paper: #f2efe8;
|
||
--paper-light: #f8f6f1;
|
||
--ink: #1d1c1a;
|
||
--muted: #706d67;
|
||
--faint: #9c9890;
|
||
--line: rgba(29, 28, 26, 0.18);
|
||
--line-soft: rgba(29, 28, 26, 0.09);
|
||
--red: #ee342d;
|
||
--red-dark: #b92924;
|
||
--green: #54715a;
|
||
display: block;
|
||
width: 100%;
|
||
min-height: 100vh;
|
||
overflow: hidden;
|
||
color: var(--ink);
|
||
background: var(--paper);
|
||
font-family: 'Noto Sans SC', 'PingFang SC', 'Microsoft YaHei', sans-serif;
|
||
font-size: 16px;
|
||
font-weight: 500;
|
||
line-height: 1.6;
|
||
text-rendering: optimizeLegibility;
|
||
-webkit-font-smoothing: antialiased;
|
||
}
|
||
|
||
.oneinai-root::before {
|
||
content: '';
|
||
position: fixed;
|
||
inset: 0;
|
||
z-index: 0;
|
||
pointer-events: none;
|
||
opacity: 0.25;
|
||
background-image: repeating-linear-gradient(
|
||
0deg,
|
||
rgba(29, 28, 26, 0.035) 0,
|
||
rgba(29, 28, 26, 0.035) 1px,
|
||
transparent 1px,
|
||
transparent 7px
|
||
);
|
||
mix-blend-mode: multiply;
|
||
}
|
||
|
||
.oneinai-root * {
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
.oneinai-root a {
|
||
color: inherit;
|
||
text-decoration: none;
|
||
}
|
||
|
||
.page {
|
||
position: relative;
|
||
z-index: 1;
|
||
width: min(1260px, calc(100% - 56px));
|
||
margin: 0 auto;
|
||
}
|
||
|
||
.masthead {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
min-height: 72px;
|
||
border-bottom: 1px solid var(--line);
|
||
gap: 32px;
|
||
}
|
||
|
||
.brand-lockup {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
gap: 12px;
|
||
color: var(--ink);
|
||
font-size: 14px;
|
||
font-weight: 900;
|
||
letter-spacing: 0.12em;
|
||
}
|
||
|
||
.brand-mark {
|
||
width: 12px;
|
||
height: 12px;
|
||
background: var(--red);
|
||
}
|
||
|
||
.masthead-note {
|
||
color: var(--muted);
|
||
font-size: 12px;
|
||
letter-spacing: 0.08em;
|
||
}
|
||
|
||
.masthead-nav {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 26px;
|
||
color: var(--muted);
|
||
font-size: 13px;
|
||
}
|
||
|
||
.masthead-nav a {
|
||
position: relative;
|
||
padding: 8px 0;
|
||
transition: color 180ms ease;
|
||
}
|
||
|
||
.masthead-nav a::after {
|
||
content: '';
|
||
position: absolute;
|
||
right: 0;
|
||
bottom: 2px;
|
||
left: 0;
|
||
height: 1px;
|
||
background: var(--red);
|
||
transform: scaleX(0);
|
||
transform-origin: right center;
|
||
transition: transform 180ms ease;
|
||
}
|
||
|
||
.masthead-nav a:hover,
|
||
.masthead-nav a:focus-visible {
|
||
color: var(--ink);
|
||
}
|
||
|
||
.masthead-nav a:hover::after,
|
||
.masthead-nav a:focus-visible::after {
|
||
transform: scaleX(1);
|
||
transform-origin: left center;
|
||
}
|
||
|
||
.hero {
|
||
display: grid;
|
||
grid-template-columns: minmax(0, 1.22fr) minmax(330px, 0.78fr);
|
||
gap: clamp(42px, 8vw, 130px);
|
||
align-items: end;
|
||
min-height: min(790px, calc(100vh - 72px));
|
||
padding: clamp(76px, 10vw, 136px) 0 clamp(92px, 12vw, 156px);
|
||
border-bottom: 1px solid var(--line);
|
||
}
|
||
|
||
.hero-copy {
|
||
max-width: 760px;
|
||
animation: rise-in 720ms cubic-bezier(0.2, 0.8, 0.2, 1) both;
|
||
}
|
||
|
||
.eyebrow,
|
||
.section-kicker,
|
||
.proof-label,
|
||
.price-label {
|
||
color: var(--red-dark);
|
||
font-size: 11px;
|
||
font-weight: 900;
|
||
letter-spacing: 0.18em;
|
||
line-height: 1.3;
|
||
text-transform: uppercase;
|
||
}
|
||
|
||
.eyebrow {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
gap: 12px;
|
||
margin-bottom: 30px;
|
||
}
|
||
|
||
.eyebrow::before {
|
||
content: '';
|
||
width: 42px;
|
||
height: 1px;
|
||
background: var(--red);
|
||
}
|
||
|
||
.hero h1 {
|
||
max-width: 760px;
|
||
margin: 0 0 32px;
|
||
color: var(--ink);
|
||
font-family: 'Noto Serif SC', 'Songti SC', 'STSong', serif;
|
||
font-size: clamp(56px, 8.2vw, 124px);
|
||
font-weight: 900;
|
||
letter-spacing: 0;
|
||
line-height: 0.98;
|
||
}
|
||
|
||
.hero h1 span {
|
||
display: block;
|
||
color: var(--red);
|
||
}
|
||
|
||
.hero-lead {
|
||
max-width: 550px;
|
||
margin: 0 0 32px;
|
||
color: var(--muted);
|
||
font-size: clamp(16px, 1.5vw, 19px);
|
||
line-height: 1.8;
|
||
}
|
||
|
||
.hero-lead strong {
|
||
color: var(--ink);
|
||
font-weight: 800;
|
||
}
|
||
|
||
.hero-actions {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
align-items: center;
|
||
gap: 12px;
|
||
margin-bottom: 60px;
|
||
}
|
||
|
||
.btn {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
gap: 12px;
|
||
min-height: 48px;
|
||
padding: 0 18px;
|
||
border: 1px solid var(--ink);
|
||
border-radius: 0;
|
||
cursor: pointer;
|
||
font-size: 14px;
|
||
font-weight: 800;
|
||
line-height: 1;
|
||
transition: background 180ms ease, color 180ms ease, border-color 180ms ease, transform 180ms ease;
|
||
}
|
||
|
||
.btn:hover,
|
||
.btn:focus-visible {
|
||
transform: translateY(-2px);
|
||
}
|
||
|
||
.btn-primary {
|
||
color: var(--paper-light);
|
||
background: var(--ink);
|
||
}
|
||
|
||
.btn-primary:hover,
|
||
.btn-primary:focus-visible {
|
||
border-color: var(--red);
|
||
background: var(--red);
|
||
}
|
||
|
||
.btn-secondary {
|
||
color: var(--ink);
|
||
background: transparent;
|
||
}
|
||
|
||
.btn-secondary:hover,
|
||
.btn-secondary:focus-visible {
|
||
color: var(--red-dark);
|
||
border-color: var(--red);
|
||
}
|
||
|
||
.icon {
|
||
width: 16px;
|
||
height: 16px;
|
||
flex: 0 0 16px;
|
||
}
|
||
|
||
.trust-grid {
|
||
display: grid;
|
||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||
max-width: 650px;
|
||
border-top: 1px solid var(--line);
|
||
}
|
||
|
||
.trust-item {
|
||
display: grid;
|
||
grid-template-columns: 34px minmax(0, 1fr);
|
||
gap: 12px;
|
||
min-height: 88px;
|
||
padding: 18px 18px 0 0;
|
||
}
|
||
|
||
.trust-item + .trust-item {
|
||
padding-left: 18px;
|
||
border-left: 1px solid var(--line);
|
||
}
|
||
|
||
.trust-index {
|
||
color: var(--red);
|
||
font-size: 12px;
|
||
font-weight: 900;
|
||
letter-spacing: 0.08em;
|
||
}
|
||
|
||
.trust-item strong {
|
||
display: block;
|
||
margin-bottom: 5px;
|
||
color: var(--ink);
|
||
font-size: 15px;
|
||
line-height: 1.35;
|
||
}
|
||
|
||
.trust-item span:last-child {
|
||
display: block;
|
||
color: var(--muted);
|
||
font-size: 12px;
|
||
line-height: 1.55;
|
||
}
|
||
|
||
.hero-proof {
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: flex-end;
|
||
min-width: 0;
|
||
padding-left: clamp(24px, 4vw, 58px);
|
||
border-left: 1px solid var(--line);
|
||
animation: rise-in 720ms 120ms cubic-bezier(0.2, 0.8, 0.2, 1) both;
|
||
}
|
||
|
||
.proof-art {
|
||
position: relative;
|
||
display: grid;
|
||
place-items: center;
|
||
width: 100%;
|
||
max-width: 430px;
|
||
aspect-ratio: 1 / 0.94;
|
||
overflow: hidden;
|
||
background: var(--ink);
|
||
}
|
||
|
||
.proof-art::before,
|
||
.proof-art::after {
|
||
content: '';
|
||
position: absolute;
|
||
pointer-events: none;
|
||
}
|
||
|
||
.proof-art::before {
|
||
inset: 20px;
|
||
border: 1px solid rgba(242, 239, 232, 0.22);
|
||
}
|
||
|
||
.proof-art::after {
|
||
top: -18%;
|
||
right: 16%;
|
||
width: 1px;
|
||
height: 136%;
|
||
background: var(--red);
|
||
transform: rotate(36deg);
|
||
opacity: 0.9;
|
||
}
|
||
|
||
.proof-art img {
|
||
position: relative;
|
||
z-index: 1;
|
||
width: 70%;
|
||
height: auto;
|
||
object-fit: contain;
|
||
filter: drop-shadow(0 18px 28px rgba(0, 0, 0, 0.32));
|
||
transition: transform 320ms cubic-bezier(0.2, 0.8, 0.2, 1);
|
||
}
|
||
|
||
.proof-art:hover img {
|
||
transform: scale(1.04);
|
||
}
|
||
|
||
.proof-label {
|
||
position: absolute;
|
||
top: 34px;
|
||
left: 34px;
|
||
z-index: 2;
|
||
color: var(--paper-light);
|
||
font-size: 10px;
|
||
}
|
||
|
||
.proof-caption {
|
||
display: grid;
|
||
grid-template-columns: auto minmax(0, 1fr);
|
||
gap: 16px;
|
||
max-width: 430px;
|
||
padding-top: 16px;
|
||
border-bottom: 1px solid var(--line);
|
||
color: var(--muted);
|
||
font-size: 13px;
|
||
}
|
||
|
||
.proof-caption strong {
|
||
color: var(--ink);
|
||
font-weight: 800;
|
||
}
|
||
|
||
.proof-caption p {
|
||
margin: 0 0 16px;
|
||
line-height: 1.7;
|
||
}
|
||
|
||
.proof-caption .proof-count {
|
||
color: var(--red);
|
||
font-size: 12px;
|
||
font-weight: 900;
|
||
letter-spacing: 0.12em;
|
||
}
|
||
|
||
.section {
|
||
padding: clamp(84px, 11vw, 148px) 0;
|
||
border-bottom: 1px solid var(--line);
|
||
}
|
||
|
||
.section-heading {
|
||
display: grid;
|
||
grid-template-columns: minmax(0, 1fr) minmax(280px, 0.72fr);
|
||
gap: 48px;
|
||
align-items: end;
|
||
margin-bottom: 48px;
|
||
}
|
||
|
||
.section-kicker {
|
||
margin-bottom: 18px;
|
||
}
|
||
|
||
.section-title {
|
||
max-width: 700px;
|
||
margin: 0;
|
||
color: var(--ink);
|
||
font-family: 'Noto Serif SC', 'Songti SC', 'STSong', serif;
|
||
font-size: clamp(34px, 5vw, 66px);
|
||
font-weight: 900;
|
||
letter-spacing: 0;
|
||
line-height: 1.08;
|
||
}
|
||
|
||
.section-description {
|
||
max-width: 430px;
|
||
margin: 0 0 4px;
|
||
color: var(--muted);
|
||
font-size: 15px;
|
||
line-height: 1.85;
|
||
}
|
||
|
||
.capability-list {
|
||
border-top: 1px solid var(--ink);
|
||
}
|
||
|
||
.capability-row {
|
||
display: grid;
|
||
grid-template-columns: 64px minmax(180px, 0.72fr) minmax(0, 1.5fr) 120px;
|
||
gap: 28px;
|
||
align-items: center;
|
||
min-height: 116px;
|
||
padding: 20px 0;
|
||
border-bottom: 1px solid var(--line);
|
||
transition: padding 220ms ease, background 220ms ease;
|
||
}
|
||
|
||
.capability-row:hover {
|
||
padding-right: 14px;
|
||
padding-left: 14px;
|
||
background: rgba(238, 52, 45, 0.055);
|
||
}
|
||
|
||
.row-index {
|
||
color: var(--red);
|
||
font-size: 12px;
|
||
font-weight: 900;
|
||
letter-spacing: 0.12em;
|
||
}
|
||
|
||
.row-title {
|
||
color: var(--ink);
|
||
font-family: 'Noto Serif SC', 'Songti SC', 'STSong', serif;
|
||
font-size: 21px;
|
||
font-weight: 900;
|
||
}
|
||
|
||
.row-detail {
|
||
max-width: 580px;
|
||
color: var(--muted);
|
||
font-size: 14px;
|
||
line-height: 1.75;
|
||
}
|
||
|
||
.row-tag {
|
||
justify-self: end;
|
||
color: var(--red-dark);
|
||
font-size: 10px;
|
||
font-weight: 900;
|
||
letter-spacing: 0.14em;
|
||
text-transform: uppercase;
|
||
}
|
||
|
||
.pricing-section {
|
||
padding-top: clamp(80px, 10vw, 126px);
|
||
}
|
||
|
||
.pricing-layout {
|
||
display: grid;
|
||
grid-template-columns: minmax(0, 1.2fr) minmax(260px, 0.8fr);
|
||
gap: clamp(38px, 9vw, 140px);
|
||
align-items: end;
|
||
}
|
||
|
||
.price-label {
|
||
margin-bottom: 18px;
|
||
}
|
||
|
||
.price-main {
|
||
margin: 0 0 22px;
|
||
color: var(--ink);
|
||
font-family: 'Noto Serif SC', 'Songti SC', 'STSong', serif;
|
||
font-size: clamp(54px, 8.6vw, 116px);
|
||
font-weight: 900;
|
||
letter-spacing: 0;
|
||
line-height: 0.98;
|
||
white-space: nowrap;
|
||
}
|
||
|
||
.price-note {
|
||
max-width: 600px;
|
||
margin: 0;
|
||
color: var(--muted);
|
||
font-size: 16px;
|
||
line-height: 1.85;
|
||
}
|
||
|
||
.price-note strong {
|
||
color: var(--ink);
|
||
font-weight: 900;
|
||
}
|
||
|
||
.price-facts {
|
||
border-top: 1px solid var(--ink);
|
||
}
|
||
|
||
.price-fact {
|
||
display: grid;
|
||
grid-template-columns: 92px minmax(0, 1fr);
|
||
gap: 20px;
|
||
padding: 18px 0;
|
||
border-bottom: 1px solid var(--line);
|
||
}
|
||
|
||
.price-fact strong {
|
||
color: var(--ink);
|
||
font-size: 14px;
|
||
font-weight: 900;
|
||
}
|
||
|
||
.price-fact span {
|
||
color: var(--muted);
|
||
font-size: 13px;
|
||
line-height: 1.65;
|
||
}
|
||
|
||
.docs-section {
|
||
padding-bottom: clamp(76px, 10vw, 124px);
|
||
}
|
||
|
||
.docs-panel {
|
||
display: grid;
|
||
grid-template-columns: minmax(0, 1fr) auto;
|
||
gap: 48px;
|
||
align-items: end;
|
||
padding: clamp(32px, 5vw, 66px);
|
||
color: var(--paper-light);
|
||
background: var(--ink);
|
||
}
|
||
|
||
.docs-panel .section-kicker {
|
||
color: var(--red);
|
||
}
|
||
|
||
.docs-panel .section-title {
|
||
color: var(--paper-light);
|
||
font-size: clamp(34px, 5vw, 62px);
|
||
}
|
||
|
||
.docs-panel .section-description {
|
||
margin-top: 22px;
|
||
color: rgba(248, 246, 241, 0.64);
|
||
}
|
||
|
||
.doc-link {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
gap: 18px;
|
||
min-width: 242px;
|
||
padding: 18px 0;
|
||
border-top: 1px solid rgba(248, 246, 241, 0.5);
|
||
border-bottom: 1px solid rgba(248, 246, 241, 0.5);
|
||
color: var(--paper-light);
|
||
font-size: 15px;
|
||
font-weight: 800;
|
||
transition: color 180ms ease, border-color 180ms ease, gap 180ms ease;
|
||
}
|
||
|
||
.doc-link:hover,
|
||
.doc-link:focus-visible {
|
||
gap: 24px;
|
||
color: var(--red);
|
||
border-color: var(--red);
|
||
}
|
||
|
||
.doc-link small {
|
||
display: block;
|
||
margin-bottom: 5px;
|
||
color: rgba(248, 246, 241, 0.54);
|
||
font-size: 10px;
|
||
font-weight: 900;
|
||
letter-spacing: 0.14em;
|
||
text-transform: uppercase;
|
||
}
|
||
|
||
.doc-link span {
|
||
display: block;
|
||
}
|
||
|
||
.footer {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
gap: 24px;
|
||
padding: 24px 0 42px;
|
||
color: var(--faint);
|
||
font-size: 12px;
|
||
}
|
||
|
||
.footer p {
|
||
margin: 0;
|
||
}
|
||
|
||
.btn:focus-visible,
|
||
.masthead-nav a:focus-visible,
|
||
.doc-link:focus-visible {
|
||
outline: 2px solid var(--red);
|
||
outline-offset: 5px;
|
||
}
|
||
|
||
@keyframes rise-in {
|
||
from {
|
||
opacity: 0;
|
||
transform: translateY(20px);
|
||
}
|
||
to {
|
||
opacity: 1;
|
||
transform: translateY(0);
|
||
}
|
||
}
|
||
|
||
@media (max-width: 920px) {
|
||
.page {
|
||
width: min(100% - 40px, 720px);
|
||
}
|
||
|
||
.masthead-note {
|
||
display: none;
|
||
}
|
||
|
||
.hero {
|
||
grid-template-columns: 1fr;
|
||
gap: 68px;
|
||
min-height: auto;
|
||
}
|
||
|
||
.hero-proof {
|
||
max-width: 520px;
|
||
padding-left: 0;
|
||
border-left: 0;
|
||
}
|
||
|
||
.proof-art,
|
||
.proof-caption {
|
||
max-width: 520px;
|
||
}
|
||
|
||
.section-heading,
|
||
.pricing-layout {
|
||
grid-template-columns: 1fr;
|
||
gap: 24px;
|
||
}
|
||
|
||
.section-heading {
|
||
margin-bottom: 36px;
|
||
}
|
||
|
||
.capability-row {
|
||
grid-template-columns: 52px minmax(0, 1fr) 100px;
|
||
gap: 18px;
|
||
}
|
||
|
||
.row-detail {
|
||
grid-column: 2 / -1;
|
||
grid-row: 2;
|
||
}
|
||
|
||
.row-tag {
|
||
grid-column: 3;
|
||
grid-row: 1;
|
||
}
|
||
|
||
.docs-panel {
|
||
grid-template-columns: 1fr;
|
||
gap: 34px;
|
||
}
|
||
}
|
||
|
||
@media (max-width: 620px) {
|
||
.page {
|
||
width: calc(100% - 28px);
|
||
}
|
||
|
||
.masthead {
|
||
min-height: 64px;
|
||
}
|
||
|
||
.brand-lockup {
|
||
font-size: 13px;
|
||
}
|
||
|
||
.masthead-nav {
|
||
gap: 14px;
|
||
font-size: 12px;
|
||
}
|
||
|
||
.masthead-nav a:nth-child(2) {
|
||
display: none;
|
||
}
|
||
|
||
.hero {
|
||
gap: 54px;
|
||
padding-top: 64px;
|
||
padding-bottom: 82px;
|
||
}
|
||
|
||
.eyebrow {
|
||
margin-bottom: 24px;
|
||
font-size: 10px;
|
||
letter-spacing: 0.12em;
|
||
}
|
||
|
||
.eyebrow::before {
|
||
width: 26px;
|
||
}
|
||
|
||
.hero h1 {
|
||
margin-bottom: 24px;
|
||
font-size: clamp(48px, 14vw, 76px);
|
||
}
|
||
|
||
.hero-lead {
|
||
font-size: 15px;
|
||
line-height: 1.78;
|
||
}
|
||
|
||
.hero-actions {
|
||
align-items: stretch;
|
||
margin-bottom: 42px;
|
||
}
|
||
|
||
.btn {
|
||
flex: 1 1 100%;
|
||
width: 100%;
|
||
}
|
||
|
||
.trust-grid {
|
||
grid-template-columns: 1fr;
|
||
}
|
||
|
||
.trust-item {
|
||
min-height: 76px;
|
||
padding: 16px 0;
|
||
}
|
||
|
||
.trust-item + .trust-item {
|
||
padding-left: 0;
|
||
border-top: 1px solid var(--line);
|
||
border-left: 0;
|
||
}
|
||
|
||
.proof-art::before {
|
||
inset: 14px;
|
||
}
|
||
|
||
.proof-label {
|
||
top: 26px;
|
||
left: 26px;
|
||
}
|
||
|
||
.section {
|
||
padding: 76px 0;
|
||
}
|
||
|
||
.section-heading {
|
||
margin-bottom: 32px;
|
||
}
|
||
|
||
.section-title {
|
||
font-size: 37px;
|
||
}
|
||
|
||
.section-description {
|
||
font-size: 14px;
|
||
}
|
||
|
||
.capability-row {
|
||
grid-template-columns: 38px minmax(0, 1fr);
|
||
gap: 12px;
|
||
padding: 18px 0;
|
||
}
|
||
|
||
.row-title {
|
||
font-size: 19px;
|
||
}
|
||
|
||
.row-detail {
|
||
grid-column: 2;
|
||
grid-row: 2;
|
||
font-size: 13px;
|
||
}
|
||
|
||
.row-tag {
|
||
display: none;
|
||
}
|
||
|
||
.price-main {
|
||
overflow-wrap: anywhere;
|
||
font-size: clamp(48px, 14vw, 70px);
|
||
white-space: normal;
|
||
}
|
||
|
||
.price-note {
|
||
font-size: 14px;
|
||
}
|
||
|
||
.price-fact {
|
||
grid-template-columns: 82px minmax(0, 1fr);
|
||
gap: 14px;
|
||
}
|
||
|
||
.docs-panel {
|
||
padding: 30px 24px;
|
||
}
|
||
|
||
.docs-panel .section-title {
|
||
font-size: 38px;
|
||
}
|
||
|
||
.doc-link {
|
||
min-width: 0;
|
||
width: 100%;
|
||
}
|
||
|
||
.footer {
|
||
flex-direction: column;
|
||
gap: 8px;
|
||
}
|
||
}
|
||
|
||
@media (prefers-reduced-motion: reduce) {
|
||
.oneinai-root *,
|
||
.oneinai-root *::before,
|
||
.oneinai-root *::after {
|
||
animation-duration: 0.01ms !important;
|
||
animation-iteration-count: 1 !important;
|
||
scroll-behavior: auto !important;
|
||
transition-duration: 0.01ms !important;
|
||
}
|
||
}
|
||
</style>
|
||
|
||
<div class='oneinai-root'>
|
||
<main class='page' id='top'>
|
||
<header class='masthead'>
|
||
<a class='brand-lockup' href='https://www.oneinai.com/' target='_blank' rel='noopener'>
|
||
<span class='brand-mark' aria-hidden='true'></span>
|
||
<span>ONEINAI</span>
|
||
</a>
|
||
<span class='masthead-note'>MODEL ACCESS / PRODUCTION READY</span>
|
||
<nav class='masthead-nav' aria-label='页面导航'>
|
||
<a href='#capability'>能力</a>
|
||
<a href='#pricing'>计价</a>
|
||
<a href='#docs'>文档</a>
|
||
</nav>
|
||
</header>
|
||
|
||
<section class='hero'>
|
||
<div class='hero-copy'>
|
||
<div class='eyebrow'>ONEINAI / API GATEWAY</div>
|
||
<h1>模型接入，<span>回到基础设施。</span></h1>
|
||
<p class='hero-lead'><strong>一个入口，连接多种模型。</strong> 从请求转发、密钥管理到用量对账，把复杂的模型调用交给一套清晰、稳定、可追溯的基础设施。</p>
|
||
<div class='hero-actions'>
|
||
<a href='https://api.oneinai.com/register' target='_blank' rel='noopener' class='btn btn-primary'>
|
||
<span>开始使用</span>
|
||
<svg class='icon' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round' aria-hidden='true'>
|
||
<path d='M5 12h14'></path>
|
||
<path d='m13 6 6 6-6 6'></path>
|
||
</svg>
|
||
</a>
|
||
<a href='https://www.oneinai.com/' target='_blank' rel='noopener' class='btn btn-secondary'>
|
||
<span>了解 ONEINAI</span>
|
||
<svg class='icon' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round' aria-hidden='true'>
|
||
<path d='M14 3h7v7'></path>
|
||
<path d='M10 14 21 3'></path>
|
||
<path d='M21 14v5a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5'></path>
|
||
</svg>
|
||
</a>
|
||
</div>
|
||
<div class='trust-grid'>
|
||
<div class='trust-item'>
|
||
<span class='trust-index'>01</span>
|
||
<div>
|
||
<strong>一手正规渠道采购</strong>
|
||
<span>模型来源清晰，可追溯</span>
|
||
</div>
|
||
</div>
|
||
<div class='trust-item'>
|
||
<span class='trust-index'>02</span>
|
||
<div>
|
||
<strong>1 CNY = 1 USD</strong>
|
||
<span>充值比例透明统一</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class='hero-proof'>
|
||
<div class='proof-art' aria-label='ONEINAI 品牌标识'>
|
||
<span class='proof-label'>ONEINAI / 2026</span>
|
||
<img src='https://minio.oneinai.com/oneinai/images/logo/oneinai(800x800).png' alt='ONEINAI Logo' loading='eager'>
|
||
</div>
|
||
<div class='proof-caption'>
|
||
<span class='proof-count'>01—03</span>
|
||
<p><strong>同一套入口，三件事被放回秩序里：</strong>接入、计价、追踪。</p>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section class='section' id='capability'>
|
||
<div class='section-heading'>
|
||
<div>
|
||
<div class='section-kicker'>CAPABILITY / 01</div>
|
||
<h2 class='section-title'>把复杂调用，压缩成一个入口。</h2>
|
||
</div>
|
||
<p class='section-description'>从账户、额度、密钥到请求转发，ONEINAI 将分散的模型能力整理为一套更适合生产环境的调用路径。</p>
|
||
</div>
|
||
|
||
<div class='capability-list'>
|
||
<article class='capability-row'>
|
||
<span class='row-index'>01</span>
|
||
<h3 class='row-title'>全球边缘加速</h3>
|
||
<p class='row-detail'>将请求路由至更近、更稳的线路，降低跨境调用中的抖动，让关键业务保持连续响应。</p>
|
||
<span class='row-tag'>ROUTING</span>
|
||
</article>
|
||
<article class='capability-row'>
|
||
<span class='row-index'>02</span>
|
||
<h3 class='row-title'>透明成本控制</h3>
|
||
<p class='row-detail'>统一计价规则、清晰账单与用量记录，让模型预算可以被看见、被核对，也被持续规划。</p>
|
||
<span class='row-tag'>BILLING</span>
|
||
</article>
|
||
<article class='capability-row'>
|
||
<span class='row-index'>03</span>
|
||
<h3 class='row-title'>企业级安全</h3>
|
||
<p class='row-detail'>密钥分层管理、请求链路加密与服务状态监控，减少集成风险，支撑稳定上线。</p>
|
||
<span class='row-tag'>CONTROL</span>
|
||
</article>
|
||
</div>
|
||
</section>
|
||
|
||
<section class='section pricing-section' id='pricing'>
|
||
<div class='pricing-layout'>
|
||
<div>
|
||
<div class='price-label'>PRICING / CLEAR BY DESIGN</div>
|
||
<div class='price-main'>1 CNY = 1 USD</div>
|
||
<p class='price-note'>充值按 <strong>1 CNY = 1 USD</strong> 统一计价；模型额度来自一手正规渠道采购，规则清晰，账单可核对。</p>
|
||
</div>
|
||
<div class='price-facts'>
|
||
<div class='price-fact'>
|
||
<strong>一手采购</strong>
|
||
<span>模型来源清晰可追溯，方便企业核验。</span>
|
||
</div>
|
||
<div class='price-fact'>
|
||
<strong>透明对账</strong>
|
||
<span>统一计价规则，便于预算与用量管理。</span>
|
||
</div>
|
||
<div class='price-fact'>
|
||
<strong>统一入口</strong>
|
||
<span>接入路径保持一致，迁移成本更低。</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section class='section docs-section' id='docs'>
|
||
<div class='docs-panel'>
|
||
<div>
|
||
<div class='section-kicker'>DOCUMENTATION / NEXT STEP</div>
|
||
<h2 class='section-title'>从文档开始，<br>让系统开始工作。</h2>
|
||
<p class='section-description'>查看模型接入、密钥配置、接口调用和迁移说明，快速完成 NewAPI 生产环境集成。</p>
|
||
</div>
|
||
<a class='doc-link' href='https://docs.oneinai.com/' target='_blank' rel='noopener'>
|
||
<span>
|
||
<small>文档地址</small>
|
||
<span>docs.oneinai.com</span>
|
||
</span>
|
||
<svg class='icon' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round' aria-hidden='true'>
|
||
<path d='M7 17 17 7'></path>
|
||
<path d='M7 7h10v10'></path>
|
||
</svg>
|
||
</a>
|
||
</div>
|
||
</section>
|
||
|
||
<footer class='footer'>
|
||
<p>© 2026 ONEINAI Inc.</p>
|
||
<p>High-Performance API Infrastructure</p>
|
||
</footer>
|
||
</main>
|
||
</div>
|