替换官网品牌Logo并完善WebGL资源
This commit is contained in:
Binary file not shown.
|
After Width: | Height: | Size: 428 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 369 KiB |
+437
-158
@@ -5,7 +5,21 @@
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<meta name="description" content="海南荣刻科技有限公司，专注数据治理、人工智能、垂类模型优化与模型私有化部署，为企业提供数据到 AI 落地的全链路解决方案。">
|
||||
<meta name="theme-color" content="#061018">
|
||||
<link rel="icon" type="image/png" href="./assets/brand-logo-final.png">
|
||||
<title data-i18n="title">海南荣刻科技有限公司 - 数据筑基 · AI 落地</title>
|
||||
<script>
|
||||
(function () {
|
||||
const validThemes = ['system', 'light', 'dark'];
|
||||
let preference = 'system';
|
||||
try { preference = localStorage.getItem('site_theme') || 'system'; } catch (error) { /* Storage may be disabled. */ }
|
||||
if (!validThemes.includes(preference)) preference = 'system';
|
||||
const resolved = preference === 'system'
|
||||
? (window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light')
|
||||
: preference;
|
||||
document.documentElement.dataset.themePreference = preference;
|
||||
document.documentElement.dataset.theme = resolved;
|
||||
})();
|
||||
</script>
|
||||
<style>
|
||||
*, *::before, *::after { box-sizing: border-box; }
|
||||
|
||||
@@ -42,6 +56,41 @@
|
||||
--mono: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
|
||||
}
|
||||
|
||||
:root[data-theme="light"] {
|
||||
color-scheme: light;
|
||||
--ink-1000: #071329;
|
||||
--ink-950: #f7faff;
|
||||
--ink-900: #eef4ff;
|
||||
--ink-850: #e8effb;
|
||||
--ink-800: #dce7f8;
|
||||
--paper: #eef4ff;
|
||||
--white: #071329;
|
||||
--text: #0b1830;
|
||||
--text-soft: #4d5d77;
|
||||
--text-faint: #75839a;
|
||||
--cyan: #146cf2;
|
||||
--cyan-bright: #0c55cf;
|
||||
--blue: #335cff;
|
||||
--violet: #8066e8;
|
||||
--success: #168b73;
|
||||
--warning: #c67a21;
|
||||
--line: rgba(19, 48, 96, .12);
|
||||
--line-strong: rgba(20, 108, 242, .32);
|
||||
--surface: rgba(255, 255, 255, .7);
|
||||
--surface-solid: #ffffff;
|
||||
--ambient: 0 28px 90px rgba(31, 67, 128, .13);
|
||||
--glow: 0 0 52px rgba(51, 92, 255, .09);
|
||||
}
|
||||
|
||||
:root[data-theme="dark"] {
|
||||
color-scheme: dark;
|
||||
--cyan: #47e5ef;
|
||||
--cyan-bright: #8bfbff;
|
||||
--blue: #42a5ff;
|
||||
--violet: #8982ff;
|
||||
--warning: #ff9b52;
|
||||
}
|
||||
|
||||
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--nav-height) + 20px); }
|
||||
body {
|
||||
margin: 0;
|
||||
@@ -50,7 +99,7 @@
|
||||
background: var(--ink-950);
|
||||
color: var(--text);
|
||||
font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
|
||||
font-size: 16px;
|
||||
font-size: 17px;
|
||||
line-height: 1.7;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
text-rendering: optimizeLegibility;
|
||||
@@ -116,15 +165,18 @@
|
||||
.brand-mark {
|
||||
display: grid;
|
||||
place-items: center;
|
||||
width: 34px;
|
||||
height: 34px;
|
||||
border: 1px solid var(--line-strong);
|
||||
border-radius: 9px;
|
||||
background: linear-gradient(145deg, rgba(54, 228, 218, .16), rgba(74, 141, 255, .05));
|
||||
color: var(--cyan-bright);
|
||||
font: 700 11px/1 var(--mono);
|
||||
box-shadow: inset 0 0 18px rgba(54, 228, 218, .08);
|
||||
width: 38px;
|
||||
height: 38px;
|
||||
flex: 0 0 38px;
|
||||
}
|
||||
.brand-mark img {
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: contain;
|
||||
transition: filter .35s ease, transform .35s var(--ease);
|
||||
}
|
||||
.brand:hover .brand-mark img { transform: rotate(-4deg) scale(1.04); }
|
||||
.brand-copy { display: flex; flex-direction: column; line-height: 1.15; }
|
||||
.brand-name { color: var(--white); font-weight: 750; letter-spacing: .04em; }
|
||||
.brand-en { margin-top: 4px; color: var(--text-faint); font: 500 8px/1 var(--mono); letter-spacing: .16em; }
|
||||
@@ -134,7 +186,7 @@
|
||||
position: relative;
|
||||
padding-block: 9px;
|
||||
color: var(--text-soft);
|
||||
font-size: 14px;
|
||||
font-size: 15px;
|
||||
font-weight: 550;
|
||||
transition: color .2s ease;
|
||||
}
|
||||
@@ -155,6 +207,39 @@
|
||||
.nav-link.active::after { opacity: 1; transform: translateX(-50%) scale(1); }
|
||||
|
||||
.nav-actions { display: flex; align-items: center; gap: 10px; }
|
||||
.theme-switch {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 3px;
|
||||
min-height: 38px;
|
||||
padding: 3px;
|
||||
border: 1px solid var(--line);
|
||||
border-radius: 9px;
|
||||
background: rgba(255, 255, 255, .025);
|
||||
transition: border-color .2s ease, background .2s ease;
|
||||
}
|
||||
.theme-switch:hover { border-color: var(--line-strong); background: rgba(54, 228, 218, .04); }
|
||||
.theme-option {
|
||||
position: relative;
|
||||
display: inline-grid;
|
||||
place-items: center;
|
||||
align-items: center;
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
padding: 0;
|
||||
border: 0;
|
||||
border-radius: 6px;
|
||||
background: transparent;
|
||||
color: var(--text-soft);
|
||||
cursor: pointer;
|
||||
transition: background .2s ease, box-shadow .2s ease, transform .2s ease;
|
||||
}
|
||||
.theme-option:hover { background: color-mix(in srgb, var(--cyan) 8%, transparent); transform: translateY(-1px); }
|
||||
.theme-option[aria-checked="true"] { background: color-mix(in srgb, var(--cyan) 14%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--cyan) 28%, transparent); }
|
||||
.theme-option-icon { width: 13px; height: 13px; border: 1px solid var(--line-strong); border-radius: 50%; box-shadow: 0 0 10px color-mix(in srgb, var(--cyan) 16%, transparent); }
|
||||
.theme-option-icon.system { background: linear-gradient(90deg, #f7fbff 0 49%, #0a1721 51% 100%); }
|
||||
.theme-option-icon.light { background: #eef7ff; box-shadow: 0 0 0 2px rgba(51, 92, 255, .11), 0 0 9px rgba(74, 141, 255, .22); }
|
||||
.theme-option-icon.dark { background: #07131d; box-shadow: inset -3px 0 0 #54ddea, 0 0 9px rgba(54, 228, 218, .18); }
|
||||
.lang-switch {
|
||||
display: inline-flex;
|
||||
padding: 3px;
|
||||
@@ -169,7 +254,7 @@
|
||||
border-radius: 6px;
|
||||
background: transparent;
|
||||
color: var(--text-faint);
|
||||
font: 650 11px/1.4 var(--mono);
|
||||
font: 650 12px/1.4 var(--mono);
|
||||
cursor: pointer;
|
||||
}
|
||||
.lang-btn.active { color: var(--ink-1000); background: var(--cyan); }
|
||||
@@ -179,11 +264,11 @@
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 10px;
|
||||
min-height: 46px;
|
||||
min-height: 50px;
|
||||
border: 1px solid transparent;
|
||||
border-radius: 10px;
|
||||
padding: 0 20px;
|
||||
font-size: 14px;
|
||||
font-size: 15px;
|
||||
font-weight: 700;
|
||||
cursor: pointer;
|
||||
transition: transform .25s var(--ease), box-shadow .25s ease, border-color .25s ease, background .25s ease;
|
||||
@@ -220,7 +305,7 @@
|
||||
content: "";
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
z-index: -2;
|
||||
z-index: 1;
|
||||
opacity: .45;
|
||||
background-image: linear-gradient(rgba(176, 235, 237, .045) 1px, transparent 1px), linear-gradient(90deg, rgba(176, 235, 237, .045) 1px, transparent 1px);
|
||||
background-size: 56px 56px;
|
||||
@@ -231,13 +316,81 @@
|
||||
content: "";
|
||||
position: absolute;
|
||||
inset: auto 0 0;
|
||||
z-index: -1;
|
||||
z-index: 1;
|
||||
height: 220px;
|
||||
background: linear-gradient(transparent, rgba(9, 23, 33, .96));
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.hero-webgl {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
z-index: 0;
|
||||
overflow: hidden;
|
||||
pointer-events: none;
|
||||
}
|
||||
.hero-webgl canvas { width: 100%; height: 100%; display: block; opacity: 0; transition: opacity .7s ease; }
|
||||
.hero-webgl.is-ready canvas { opacity: 1; }
|
||||
.webgl-fallback {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
background:
|
||||
radial-gradient(circle at 74% 34%, rgba(71, 229, 239, .2), transparent 19%),
|
||||
radial-gradient(ellipse at 82% 48%, rgba(225, 233, 238, .16), transparent 34%),
|
||||
linear-gradient(150deg, transparent 42%, rgba(255, 255, 255, .05) 58%, transparent 72%);
|
||||
transition: opacity .5s ease;
|
||||
}
|
||||
.hero-webgl.is-ready .webgl-fallback { opacity: 0; }
|
||||
.hero-webgl.has-error .webgl-fallback { opacity: 1; }
|
||||
|
||||
.hero-copy { position: relative; z-index: 2; }
|
||||
.hero-spatial {
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
min-height: 560px;
|
||||
pointer-events: none;
|
||||
}
|
||||
.scene-axis {
|
||||
position: absolute;
|
||||
color: var(--text-faint);
|
||||
font: 600 9px/1.45 var(--mono);
|
||||
letter-spacing: .12em;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
.scene-axis { top: 44px; right: 12px; writing-mode: vertical-rl; }
|
||||
.hero-capabilities { position: absolute; inset: 0; }
|
||||
.hero-capability {
|
||||
position: absolute;
|
||||
min-width: 128px;
|
||||
padding-top: 13px;
|
||||
color: var(--text);
|
||||
text-align: left;
|
||||
}
|
||||
.hero-capability::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 76px;
|
||||
height: 1px;
|
||||
background: linear-gradient(90deg, var(--cyan), transparent);
|
||||
box-shadow: 0 0 14px color-mix(in srgb, var(--cyan) 44%, transparent);
|
||||
}
|
||||
.hero-capability-code {
|
||||
display: block;
|
||||
margin-bottom: 6px;
|
||||
color: var(--cyan);
|
||||
font: 700 10px/1 var(--mono);
|
||||
letter-spacing: .16em;
|
||||
}
|
||||
.hero-capability strong { display: block; font-size: 16px; line-height: 1.35; letter-spacing: .015em; }
|
||||
.hero-capability--data { left: 2%; bottom: 11%; }
|
||||
.hero-capability--model { left: 27%; bottom: -12%; }
|
||||
.hero-capability--deploy { right: -70px; top: 45%; }
|
||||
|
||||
.hero-layout {
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
display: grid;
|
||||
grid-template-columns: minmax(0, .88fr) minmax(520px, 1.12fr);
|
||||
align-items: center;
|
||||
@@ -250,7 +403,7 @@
|
||||
gap: 10px;
|
||||
margin-bottom: 24px;
|
||||
color: var(--cyan);
|
||||
font: 650 11px/1.4 var(--mono);
|
||||
font: 650 12px/1.4 var(--mono);
|
||||
letter-spacing: .14em;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
@@ -261,13 +414,13 @@
|
||||
max-width: 660px;
|
||||
margin-bottom: 26px;
|
||||
color: var(--white);
|
||||
font-size: clamp(48px, 4.45vw, 64px);
|
||||
font-size: clamp(52px, 5.4vw, 76px);
|
||||
font-weight: 780;
|
||||
line-height: 1.06;
|
||||
letter-spacing: -.055em;
|
||||
}
|
||||
.hero h1 .accent { color: var(--cyan-bright); text-shadow: 0 0 36px rgba(114, 255, 241, .16); }
|
||||
.hero-description { max-width: 590px; margin-bottom: 36px; color: var(--text-soft); font-size: clamp(16px, 1.45vw, 18px); line-height: 1.85; }
|
||||
.hero-description { max-width: 620px; margin-bottom: 38px; color: var(--text-soft); font-size: clamp(18px, 1.5vw, 20px); line-height: 1.78; }
|
||||
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 44px; }
|
||||
.button-primary { color: var(--ink-1000); background: var(--cyan); }
|
||||
.button-secondary { border-color: var(--line); color: var(--text); background: rgba(255, 255, 255, .025); }
|
||||
@@ -275,7 +428,7 @@
|
||||
.button-arrow { font-family: var(--mono); transition: transform .2s ease; }
|
||||
.button:hover .button-arrow { transform: translateX(3px); }
|
||||
|
||||
.hero-proof { display: flex; flex-wrap: wrap; gap: 22px; color: var(--text-faint); font: 550 11px/1.4 var(--mono); letter-spacing: .06em; }
|
||||
.hero-proof { display: flex; flex-wrap: wrap; gap: 24px; color: var(--text-faint); font: 550 13px/1.5 var(--mono); letter-spacing: .045em; }
|
||||
.hero-proof span { display: inline-flex; align-items: center; gap: 8px; }
|
||||
.hero-proof span::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--success); box-shadow: 0 0 10px rgba(121, 239, 169, .6); }
|
||||
|
||||
@@ -406,34 +559,21 @@
|
||||
.console-progress { width: 96px; height: 3px; overflow: hidden; border-radius: 3px; background: rgba(255, 255, 255, .08); }
|
||||
.console-progress i { display: block; width: 76%; height: 100%; background: linear-gradient(90deg, var(--blue), var(--cyan)); box-shadow: 0 0 10px var(--cyan); }
|
||||
|
||||
.signal-bar {
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, 1fr);
|
||||
margin-top: 76px;
|
||||
border-block: 1px solid var(--line);
|
||||
}
|
||||
.signal-item { padding: 21px 24px; border-right: 1px solid var(--line); }
|
||||
.signal-item:last-child { border-right: 0; }
|
||||
.signal-index { display: block; margin-bottom: 6px; color: var(--cyan); font: 650 9px/1 var(--mono); letter-spacing: .12em; }
|
||||
.signal-name { color: var(--text-soft); font-size: 13px; font-weight: 600; }
|
||||
|
||||
.section { position: relative; padding: 124px 0; overflow: hidden; }
|
||||
.section-header { display: grid; grid-template-columns: minmax(0, .8fr) minmax(300px, .48fr); align-items: end; gap: 64px; margin-bottom: 60px; }
|
||||
.section-number { display: block; margin-bottom: 18px; color: var(--cyan); font: 650 10px/1 var(--mono); letter-spacing: .14em; }
|
||||
.section-number { display: block; margin-bottom: 18px; color: var(--cyan); font: 650 11px/1 var(--mono); letter-spacing: .14em; }
|
||||
.section-title { max-width: 760px; margin-bottom: 0; color: var(--white); font-size: clamp(38px, 4.25vw, 58px); font-weight: 750; line-height: 1.1; letter-spacing: -.045em; }
|
||||
.section-desc { max-width: 520px; margin-bottom: 0; color: var(--text-soft); font-size: 16px; line-height: 1.85; }
|
||||
.section-desc { max-width: 550px; margin-bottom: 0; color: var(--text-soft); font-size: 18px; line-height: 1.78; }
|
||||
|
||||
.about { background: #091721; }
|
||||
.about::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(circle at 88% 22%, rgba(74, 141, 255, .08), transparent 25%); }
|
||||
.about-grid { display: grid; grid-template-columns: minmax(0, .8fr) minmax(480px, 1.2fr); gap: 70px; align-items: start; }
|
||||
.about-copy p { color: var(--text-soft); font-size: 16px; line-height: 1.95; }
|
||||
.about-copy p { color: var(--text-soft); font-size: 17px; line-height: 1.9; }
|
||||
.about-copy p + p { margin-top: 20px; }
|
||||
.about-facts { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin-top: 34px; }
|
||||
.fact { padding: 20px; border-top: 1px solid var(--line-strong); background: linear-gradient(180deg, rgba(54, 228, 218, .04), transparent); }
|
||||
.fact strong { display: block; margin-bottom: 8px; color: var(--white); font: 700 28px/1 var(--mono); }
|
||||
.fact span { color: var(--text-faint); font-size: 12px; }
|
||||
.fact span { color: var(--text-faint); font-size: 14px; }
|
||||
|
||||
.capability-chain { position: relative; display: grid; gap: 10px; }
|
||||
.chain-card {
|
||||
@@ -450,8 +590,8 @@
|
||||
}
|
||||
.chain-card:hover { border-color: var(--line-strong); background: rgba(54, 228, 218, .035); transform: translateX(4px); }
|
||||
.chain-index { display: grid; place-items: center; width: 54px; height: 54px; border: 1px solid var(--line); border-radius: 12px; color: var(--cyan); font: 700 12px/1 var(--mono); }
|
||||
.chain-copy h3 { margin-bottom: 4px; color: var(--white); font-size: 17px; }
|
||||
.chain-copy p { margin-bottom: 0; color: var(--text-faint); font-size: 12px; line-height: 1.55; }
|
||||
.chain-copy h3 { margin-bottom: 6px; color: var(--white); font-size: 19px; }
|
||||
.chain-copy p { margin-bottom: 0; color: var(--text-faint); font-size: 14px; line-height: 1.65; }
|
||||
.chain-state { color: var(--success); font: 650 8px/1 var(--mono); letter-spacing: .1em; }
|
||||
|
||||
.services { background: var(--ink-950); }
|
||||
@@ -459,6 +599,8 @@
|
||||
.services-layout { position: relative; display: grid; grid-template-columns: 1.18fr .82fr .82fr; gap: 14px; }
|
||||
.service-card {
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
min-height: 280px;
|
||||
padding: 28px;
|
||||
border: 1px solid var(--line);
|
||||
@@ -471,57 +613,62 @@
|
||||
.service-card.featured { grid-row: span 2; min-height: 574px; padding: 34px; background: linear-gradient(155deg, rgba(54, 228, 218, .105), rgba(13, 29, 41, .72) 46%, rgba(74, 141, 255, .06)); }
|
||||
.service-card::after { content: ""; position: absolute; top: 0; left: 26px; right: 26px; height: 1px; background: linear-gradient(90deg, transparent, rgba(114, 255, 241, .46), transparent); opacity: 0; transition: opacity .3s; }
|
||||
.service-card:hover::after, .service-card.featured::after { opacity: 1; }
|
||||
.service-code { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 70px; color: var(--cyan); font: 650 9px/1 var(--mono); letter-spacing: .11em; }
|
||||
.featured .service-code { margin-bottom: 105px; }
|
||||
.service-code { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 42px; color: var(--cyan); font: 650 10px/1 var(--mono); letter-spacing: .11em; }
|
||||
.service-content { margin-top: auto; }
|
||||
.featured .service-code { margin-bottom: 72px; }
|
||||
.service-state { color: var(--text-faint); }
|
||||
.service-card h3 { max-width: 390px; margin-bottom: 14px; color: var(--white); font-size: 23px; line-height: 1.3; letter-spacing: -.025em; }
|
||||
.featured h3 { font-size: 34px; }
|
||||
.service-card p { margin-bottom: 0; color: var(--text-soft); font-size: 13px; line-height: 1.8; }
|
||||
.service-card h3 { max-width: 410px; margin-bottom: 14px; color: var(--white); font-size: 25px; line-height: 1.3; letter-spacing: -.025em; }
|
||||
.featured h3 { font-size: 36px; }
|
||||
.service-card p { margin-bottom: 0; color: var(--text-soft); font-size: 15px; line-height: 1.78; }
|
||||
.service-tags { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 32px; }
|
||||
.service-tag { padding: 7px 9px; border: 1px solid var(--line); border-radius: 7px; color: var(--text-faint); background: rgba(0, 0, 0, .12); font: 550 8px/1 var(--mono); letter-spacing: .06em; }
|
||||
.service-tag { padding: 8px 10px; border: 1px solid var(--line); border-radius: 7px; color: var(--text-faint); background: rgba(0, 0, 0, .12); font: 550 9px/1 var(--mono); letter-spacing: .06em; }
|
||||
|
||||
.advantages { background: var(--paper); color: #102129; }
|
||||
.advantages .section-number { color: #087c78; }
|
||||
.advantages .section-title { color: #07161c; }
|
||||
.advantages .section-desc { color: #52666d; }
|
||||
.proof-grid { display: grid; grid-template-columns: repeat(4, 1fr); border: 1px solid rgba(9, 50, 58, .13); border-radius: 20px; overflow: hidden; background: var(--white); box-shadow: 0 24px 80px rgba(8, 28, 34, .08); }
|
||||
.proof-card { min-height: 330px; padding: 28px; border-right: 1px solid rgba(9, 50, 58, .1); }
|
||||
.advantages { background: var(--ink-950); color: var(--text); }
|
||||
.advantages .section-number { color: var(--cyan); }
|
||||
.advantages .section-title { color: var(--white); }
|
||||
.advantages .section-desc { color: var(--text-soft); }
|
||||
.proof-grid { display: grid; grid-template-columns: repeat(4, 1fr); border: 1px solid var(--line); border-radius: 20px; overflow: hidden; background: var(--surface); box-shadow: var(--ambient); }
|
||||
.proof-card { min-height: 330px; padding: 28px; border-right: 1px solid var(--line); }
|
||||
.proof-card:last-child { border-right: 0; }
|
||||
.proof-code { display: block; margin-bottom: 92px; color: #168985; font: 700 10px/1 var(--mono); letter-spacing: .12em; }
|
||||
.proof-card h3 { margin-bottom: 14px; color: #0a1d24; font-size: 20px; line-height: 1.35; letter-spacing: -.02em; }
|
||||
.proof-card p { margin-bottom: 0; color: #667980; font-size: 13px; line-height: 1.8; }
|
||||
.proof-code { display: block; margin-bottom: 86px; color: var(--cyan); font: 700 11px/1 var(--mono); letter-spacing: .12em; }
|
||||
.proof-card h3 { margin-bottom: 14px; color: var(--white); font-size: 22px; line-height: 1.35; letter-spacing: -.02em; }
|
||||
.proof-card p { margin-bottom: 0; color: var(--text-soft); font-size: 15px; line-height: 1.78; }
|
||||
|
||||
.offices { background: #08141d; }
|
||||
.office-network { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
|
||||
.office-card { position: relative; min-height: 380px; padding: 34px; border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; background: linear-gradient(150deg, rgba(74, 141, 255, .07), rgba(13, 29, 41, .72)); }
|
||||
.office-card:last-child { background: linear-gradient(150deg, rgba(54, 228, 218, .07), rgba(13, 29, 41, .72)); }
|
||||
.office-coordinate { display: flex; align-items: center; justify-content: space-between; margin-bottom: 94px; color: var(--text-faint); font: 600 9px/1 var(--mono); letter-spacing: .11em; }
|
||||
.office-coordinate { display: flex; align-items: center; justify-content: space-between; margin-bottom: 90px; color: var(--text-faint); font: 600 10px/1 var(--mono); letter-spacing: .11em; }
|
||||
.office-live { display: inline-flex; align-items: center; gap: 7px; color: var(--success); }
|
||||
.office-live::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: currentColor; box-shadow: 0 0 8px currentColor; }
|
||||
.office-card h3 { margin-bottom: 14px; color: var(--white); font-size: 28px; letter-spacing: -.03em; }
|
||||
.office-card p { max-width: 470px; margin-bottom: 28px; color: var(--text-soft); font-size: 14px; line-height: 1.85; }
|
||||
.office-card h3 { margin-bottom: 14px; color: var(--white); font-size: 30px; letter-spacing: -.03em; }
|
||||
.office-card p { max-width: 500px; margin-bottom: 28px; color: var(--text-soft); font-size: 16px; line-height: 1.78; }
|
||||
.office-tags { display: flex; flex-wrap: wrap; gap: 8px; }
|
||||
.office-tag { padding: 7px 10px; border: 1px solid var(--line); border-radius: 7px; color: var(--text-faint); font: 550 8px/1 var(--mono); letter-spacing: .07em; }
|
||||
.office-tag { padding: 8px 11px; border: 1px solid var(--line); border-radius: 7px; color: var(--text-faint); font: 550 9px/1 var(--mono); letter-spacing: .07em; }
|
||||
|
||||
.contact { padding: 124px 0 70px; background: var(--ink-1000); }
|
||||
.contact-shell { position: relative; padding: clamp(34px, 5vw, 66px); border: 1px solid rgba(114, 255, 241, .2); border-radius: 28px; overflow: hidden; background: linear-gradient(135deg, rgba(54, 228, 218, .09), rgba(74, 141, 255, .045) 45%, rgba(146, 119, 255, .055)); box-shadow: var(--ambient); }
|
||||
.contact-shell::before { content: ""; position: absolute; width: 360px; height: 360px; right: -130px; top: -180px; border-radius: 50%; background: rgba(54, 228, 218, .1); filter: blur(65px); }
|
||||
.contact-head { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 40px; margin-bottom: 58px; }
|
||||
.contact h2 { max-width: 760px; margin-bottom: 0; color: var(--white); font-size: clamp(40px, 5vw, 68px); line-height: 1.08; letter-spacing: -.05em; }
|
||||
.contact-lead { max-width: 330px; margin-bottom: 4px; color: var(--text-soft); font-size: 14px; line-height: 1.8; }
|
||||
.contact-lead { max-width: 360px; margin-bottom: 4px; color: var(--text-soft); font-size: 16px; line-height: 1.78; }
|
||||
.contact-grid { position: relative; display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--line); }
|
||||
.contact-item { min-height: 160px; padding: 28px 26px 0 0; }
|
||||
.contact-item + .contact-item { padding-left: 26px; border-left: 1px solid var(--line); }
|
||||
.contact-label { display: block; margin-bottom: 22px; color: var(--cyan); font: 650 9px/1 var(--mono); letter-spacing: .11em; }
|
||||
.contact-item h3 { margin-bottom: 9px; color: var(--white); font-size: 17px; }
|
||||
.contact-value { display: inline-block; color: var(--text-soft); font-size: 14px; overflow-wrap: anywhere; transition: color .2s ease; }
|
||||
.contact-label { display: block; margin-bottom: 22px; color: var(--cyan); font: 650 10px/1 var(--mono); letter-spacing: .11em; }
|
||||
.contact-item h3 { margin-bottom: 9px; color: var(--white); font-size: 19px; }
|
||||
.contact-value { display: inline-block; color: var(--text-soft); font-size: 16px; overflow-wrap: anywhere; transition: color .2s ease; }
|
||||
a.contact-value:hover { color: var(--cyan-bright); }
|
||||
|
||||
footer { padding: 0 0 34px; background: var(--ink-1000); }
|
||||
.footer-inner { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding-top: 28px; border-top: 1px solid var(--line); color: var(--text-faint); font-size: 11px; }
|
||||
.footer-signal { color: var(--text-faint); font: 550 8px/1 var(--mono); letter-spacing: .1em; }
|
||||
.footer-inner { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding-top: 28px; border-top: 1px solid var(--line); color: var(--text-faint); font-size: 13px; }
|
||||
.footer-signal { color: var(--text-faint); font: 550 9px/1 var(--mono); letter-spacing: .1em; }
|
||||
|
||||
.reveal { opacity: 0; transform: translateY(26px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
|
||||
.reveal {
|
||||
opacity: 0;
|
||||
transform: translateY(26px);
|
||||
transition: opacity .7s var(--ease), transform .7s var(--ease);
|
||||
}
|
||||
.reveal.is-visible { opacity: 1; transform: translateY(0); }
|
||||
.delay-1 { transition-delay: .08s; }
|
||||
.delay-2 { transition-delay: .16s; }
|
||||
@@ -530,6 +677,90 @@
|
||||
@keyframes statusPulse { 0%, 100% { opacity: 1; } 50% { opacity: .38; } }
|
||||
@keyframes scan { from { left: -4%; } to { left: 104%; } }
|
||||
|
||||
body, .navbar, .nav-links, .hero, .section, .contact, footer, .service-card, .chain-card, .office-card, .contact-shell, .proof-grid {
|
||||
transition: color .35s ease, background-color .35s ease, border-color .35s ease, box-shadow .35s ease;
|
||||
}
|
||||
|
||||
:root[data-theme="dark"] .hero {
|
||||
background: radial-gradient(circle at 82% 28%, rgba(71, 229, 239, .08), transparent 24%), linear-gradient(180deg, #05070a 0%, #090d12 64%, #0a1118 100%);
|
||||
}
|
||||
:root[data-theme="dark"] .brand-mark img { filter: brightness(1.85) saturate(1.08) drop-shadow(0 0 9px rgba(71, 229, 239, .16)); }
|
||||
:root[data-theme="dark"] .hero::before { opacity: .2; }
|
||||
:root[data-theme="dark"] .hero::after { background: linear-gradient(transparent, rgba(9, 17, 24, .98)); }
|
||||
:root[data-theme="dark"] .hero h1 .accent { color: #87dfff; text-shadow: 0 0 34px rgba(71, 229, 239, .16); }
|
||||
:root[data-theme="dark"] .hero-capability { color: #edf4f7; }
|
||||
:root[data-theme="dark"] .contact-shell { border-color: rgba(71, 229, 239, .18); background: linear-gradient(135deg, rgba(225, 233, 238, .075), rgba(71, 229, 239, .04) 52%, rgba(255, 155, 82, .035)); }
|
||||
|
||||
:root[data-theme="light"] .navbar { background: rgba(250, 252, 255, .72); }
|
||||
:root[data-theme="light"] .navbar.scrolled { background: rgba(250, 252, 255, .93); box-shadow: 0 12px 40px rgba(35, 53, 87, .08); }
|
||||
:root[data-theme="light"] .lang-switch,
|
||||
:root[data-theme="light"] .theme-switch,
|
||||
:root[data-theme="light"] .menu-btn { background: rgba(255, 255, 255, .58); }
|
||||
:root[data-theme="light"] .nav-cta,
|
||||
:root[data-theme="light"] .button-primary,
|
||||
:root[data-theme="light"] .lang-btn.active { color: #fff; }
|
||||
:root[data-theme="light"] .button-secondary { background: rgba(255, 255, 255, .58); }
|
||||
|
||||
:root[data-theme="light"] .hero {
|
||||
background: radial-gradient(circle at 76% 34%, rgba(99, 205, 255, .16), transparent 24%), linear-gradient(180deg, #fbfdff 0%, #f4f8ff 72%, #eef4ff 100%);
|
||||
}
|
||||
:root[data-theme="light"] .hero::before { opacity: .28; background-image: linear-gradient(rgba(37, 84, 153, .055) 1px, transparent 1px), linear-gradient(90deg, rgba(37, 84, 153, .055) 1px, transparent 1px); }
|
||||
:root[data-theme="light"] .hero::after { background: linear-gradient(transparent, rgba(238, 244, 255, .98)); }
|
||||
:root[data-theme="light"] .hero h1 .accent { color: #125ad4; text-shadow: none; }
|
||||
:root[data-theme="light"] .webgl-fallback { background: radial-gradient(circle at 76% 36%, rgba(87, 204, 255, .34), transparent 18%), conic-gradient(from 205deg at 75% 42%, transparent, rgba(103, 103, 255, .18), rgba(255, 185, 102, .2), transparent 30%), linear-gradient(180deg, #fbfdff, #eef4ff); }
|
||||
|
||||
:root[data-theme="light"] .about,
|
||||
:root[data-theme="light"] .services,
|
||||
:root[data-theme="light"] .offices { background: var(--ink-900); }
|
||||
:root[data-theme="light"] .about::before { background: radial-gradient(circle at 88% 22%, color-mix(in srgb, var(--blue) 12%, transparent), transparent 28%); }
|
||||
:root[data-theme="light"] .chain-card { background: rgba(255, 255, 255, .58); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .62); }
|
||||
:root[data-theme="light"] .chain-card:hover { background: rgba(255, 255, 255, .86); }
|
||||
:root[data-theme="light"] .service-card { background: rgba(255, 255, 255, .66); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .72); }
|
||||
:root[data-theme="light"] .service-card:hover { background: rgba(255, 255, 255, .9); box-shadow: 0 24px 60px rgba(55, 70, 112, .12); }
|
||||
:root[data-theme="light"] .service-card.featured { background: linear-gradient(150deg, rgba(83, 177, 255, .16), rgba(255, 255, 255, .8) 45%, rgba(104, 93, 239, .08)); }
|
||||
:root[data-theme="light"] .service-tag { background: rgba(255, 255, 255, .5); }
|
||||
:root[data-theme="light"] .office-card,
|
||||
:root[data-theme="light"] .office-card:last-child { background: linear-gradient(150deg, rgba(255, 255, 255, .76), color-mix(in srgb, var(--blue) 7%, var(--ink-900))); }
|
||||
:root[data-theme="light"] .advantages { background: #f7faff; }
|
||||
:root[data-theme="light"] .proof-grid { background: rgba(255, 255, 255, .82); }
|
||||
:root[data-theme="light"] .contact,
|
||||
:root[data-theme="light"] footer { background: var(--ink-950); }
|
||||
:root[data-theme="light"] .contact-shell { border-color: rgba(20, 108, 242, .2); background: linear-gradient(135deg, rgba(70, 178, 255, .12), rgba(255, 255, 255, .7) 45%, rgba(123, 102, 232, .1)); }
|
||||
:root[data-theme="light"] .contact-shell::before { background: color-mix(in srgb, var(--cyan) 18%, transparent); }
|
||||
|
||||
@media (max-width: 1100px) {
|
||||
.hero-spatial { width: min(100%, 760px); min-height: 420px; margin-left: auto; }
|
||||
}
|
||||
|
||||
@media (max-width: 860px) {
|
||||
:root[data-theme="light"] .nav-links { background: rgba(250, 252, 255, .98); }
|
||||
}
|
||||
|
||||
@media (max-width: 620px) {
|
||||
.hero-layout { gap: 28px; }
|
||||
.hero-spatial { min-height: 280px; }
|
||||
.scene-axis { top: 18px; right: 4px; }
|
||||
.hero-capabilities {
|
||||
inset: auto 0 0;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, minmax(0, 1fr));
|
||||
gap: 8px;
|
||||
}
|
||||
.hero-capability {
|
||||
position: relative;
|
||||
inset: auto;
|
||||
min-width: 0;
|
||||
padding: 11px 8px 0;
|
||||
border-top: 1px solid var(--line);
|
||||
}
|
||||
.hero-capability::before { display: none; }
|
||||
.hero-capability-code { margin-bottom: 5px; font-size: 8px; }
|
||||
.hero-capability strong { font-size: 13px; white-space: nowrap; }
|
||||
.hero-webgl::after { content: ""; position: absolute; inset: 0; pointer-events: none; }
|
||||
:root[data-theme="dark"] .hero-webgl::after { background: linear-gradient(180deg, rgba(5, 7, 10, .74) 5%, rgba(5, 7, 10, .52) 42%, rgba(5, 7, 10, .12) 68%, transparent 86%); }
|
||||
:root[data-theme="light"] .hero-webgl::after { background: linear-gradient(180deg, rgba(250, 253, 255, .8) 5%, rgba(250, 253, 255, .52) 46%, rgba(250, 253, 255, .1) 74%, transparent); }
|
||||
}
|
||||
|
||||
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
|
||||
.navbar { background: rgba(6, 16, 24, .96); }
|
||||
.console { background: #07131c; }
|
||||
@@ -549,7 +780,7 @@
|
||||
.featured .service-code { margin-bottom: 110px; }
|
||||
.proof-grid { grid-template-columns: repeat(2, 1fr); }
|
||||
.proof-card:nth-child(2) { border-right: 0; }
|
||||
.proof-card:nth-child(-n+2) { border-bottom: 1px solid rgba(9, 50, 58, .1); }
|
||||
.proof-card:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
|
||||
}
|
||||
|
||||
@media (max-width: 860px) {
|
||||
@@ -577,9 +808,6 @@
|
||||
.hero { padding-top: 126px; }
|
||||
.hero-layout { gap: 58px; }
|
||||
.hero h1 { font-size: clamp(45px, 10vw, 68px); }
|
||||
.signal-bar { grid-template-columns: repeat(2, 1fr); }
|
||||
.signal-item:nth-child(2) { border-right: 0; }
|
||||
.signal-item:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
|
||||
.section { padding: 96px 0; }
|
||||
.section-header { grid-template-columns: 1fr; gap: 24px; margin-bottom: 46px; }
|
||||
.office-network { grid-template-columns: 1fr; }
|
||||
@@ -595,10 +823,21 @@
|
||||
.hero { padding: 112px 0 64px; background: radial-gradient(circle at 78% 18%, rgba(54, 228, 218, .11), transparent 25%), linear-gradient(180deg, #061018, #091721); }
|
||||
.hero::before { background-size: 42px 42px; }
|
||||
.hero h1 { font-size: clamp(40px, 13.5vw, 58px); }
|
||||
.hero-description { font-size: 15px; }
|
||||
.hero-description { font-size: 17px; line-height: 1.72; }
|
||||
.hero-actions { display: grid; }
|
||||
.button { width: 100%; }
|
||||
.hero-proof { display: grid; grid-template-columns: 1fr; gap: 10px; }
|
||||
.hero-proof {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr;
|
||||
gap: 10px;
|
||||
padding: 14px 16px;
|
||||
border: 1px solid var(--line);
|
||||
border-radius: 14px;
|
||||
background: color-mix(in srgb, var(--ink-950) 78%, transparent);
|
||||
color: var(--text-soft);
|
||||
backdrop-filter: blur(14px);
|
||||
-webkit-backdrop-filter: blur(14px);
|
||||
}
|
||||
.console-header { padding-inline: 14px; }
|
||||
.window-label { font-size: 8px; }
|
||||
.console-body { grid-template-columns: 1fr; }
|
||||
@@ -616,7 +855,6 @@
|
||||
.engine-node-name strong { font-size: 9px; }
|
||||
.metric { padding: 11px 8px; }
|
||||
.metric strong { font-size: 15px; }
|
||||
.signal-item { padding: 17px 14px; }
|
||||
.section-title { font-size: 38px; }
|
||||
.about-facts { grid-template-columns: 1fr; }
|
||||
.chain-card { grid-template-columns: 46px 1fr; padding: 16px; }
|
||||
@@ -628,7 +866,7 @@
|
||||
.service-code, .featured .service-code { margin-bottom: 70px; }
|
||||
.featured h3 { font-size: 28px; }
|
||||
.proof-grid { grid-template-columns: 1fr; }
|
||||
.proof-card { min-height: 250px; border-right: 0; border-bottom: 1px solid rgba(9, 50, 58, .1); }
|
||||
.proof-card { min-height: 250px; border-right: 0; border-bottom: 1px solid var(--line); }
|
||||
.proof-card:last-child { border-bottom: 0; }
|
||||
.proof-code { margin-bottom: 56px; }
|
||||
.office-card { min-height: 340px; padding: 26px; }
|
||||
@@ -653,7 +891,7 @@
|
||||
<nav class="navbar" id="navbar" aria-label="主导航" data-i18n-aria="nav_label">
|
||||
<div class="nav-inner">
|
||||
<a class="brand" href="#home" aria-label="荣刻科技首页" data-i18n-aria="home_label">
|
||||
<span class="brand-mark" aria-hidden="true">RK</span>
|
||||
<span class="brand-mark" aria-hidden="true"><img src="./assets/brand-logo-final.png" alt=""></span>
|
||||
<span class="brand-copy">
|
||||
<span class="brand-name" data-i18n="brand">荣刻科技</span>
|
||||
<span class="brand-en">RONCARVE TECHNOLOGY</span>
|
||||
@@ -666,6 +904,17 @@
|
||||
<a class="nav-link" href="#advantages" data-i18n="nav_advantages">核心优势</a>
|
||||
<a class="nav-link" href="#offices" data-i18n="nav_offices">交付网络</a>
|
||||
<div class="nav-actions">
|
||||
<div class="theme-switch" id="themeSwitch" role="radiogroup" aria-label="外观模式" data-i18n-aria="theme_label">
|
||||
<button class="theme-option" type="button" role="radio" aria-checked="true" data-theme-option="system" aria-label="跟随系统" data-i18n-aria="theme_system">
|
||||
<span class="theme-option-icon system" aria-hidden="true"></span>
|
||||
</button>
|
||||
<button class="theme-option" type="button" role="radio" aria-checked="false" data-theme-option="light" aria-label="浅色外观" data-i18n-aria="theme_light">
|
||||
<span class="theme-option-icon light" aria-hidden="true"></span>
|
||||
</button>
|
||||
<button class="theme-option" type="button" role="radio" aria-checked="false" data-theme-option="dark" aria-label="深色外观" data-i18n-aria="theme_dark">
|
||||
<span class="theme-option-icon dark" aria-hidden="true"></span>
|
||||
</button>
|
||||
</div>
|
||||
<div class="lang-switch" id="langSwitch" aria-label="语言切换" data-i18n-aria="lang_label">
|
||||
<button class="lang-btn active" type="button" data-lang="zh" aria-pressed="true">中</button>
|
||||
<button class="lang-btn" type="button" data-lang="en" aria-pressed="false">EN</button>
|
||||
@@ -682,10 +931,14 @@
|
||||
|
||||
<main id="main">
|
||||
<section class="hero" id="home">
|
||||
<div class="hero-webgl" id="heroWebgl" aria-hidden="true">
|
||||
<canvas id="heroWebglCanvas"></canvas>
|
||||
<div class="webgl-fallback"></div>
|
||||
</div>
|
||||
<div class="container">
|
||||
<div class="hero-layout">
|
||||
<div class="hero-copy reveal is-visible">
|
||||
<span class="eyebrow" data-i18n="hero_eyebrow">AI + DATA INFRASTRUCTURE</span>
|
||||
<span class="eyebrow" data-i18n="hero_eyebrow">AI 与数据基础设施</span>
|
||||
<h1><span data-i18n="hero_line1">让企业数据</span><br><span class="accent" data-i18n="hero_line2">成为 AI 生产力</span></h1>
|
||||
<p class="hero-description" data-i18n="hero_desc">从数据治理、模型优化到私有化部署，荣刻科技为企业构建可落地、可持续、可掌控的 AI 能力体系。</p>
|
||||
<div class="hero-actions">
|
||||
@@ -699,59 +952,22 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="control-room reveal delay-1" aria-label="AI 数据控制台示意">
|
||||
<div class="console">
|
||||
<div class="console-header">
|
||||
<div class="window-label"><span class="window-dots" aria-hidden="true"><i></i><i></i><i></i></span> RONCARVE / AI CONTROL ROOM</div>
|
||||
<span class="system-status" data-i18n="console_online">SYSTEM ONLINE</span>
|
||||
</div>
|
||||
<div class="console-body">
|
||||
<aside class="pipeline-nav" aria-label="AI 落地链路">
|
||||
<p class="pipeline-title">PIPELINE</p>
|
||||
<div class="pipeline-step active"><span class="step-index">01</span><span class="step-copy" data-i18n="pipe_data">数据接入<small>DATA INTAKE</small></span></div>
|
||||
<div class="pipeline-step"><span class="step-index">02</span><span class="step-copy" data-i18n="pipe_govern">治理加工<small>GOVERN</small></span></div>
|
||||
<div class="pipeline-step"><span class="step-index">03</span><span class="step-copy" data-i18n="pipe_model">模型编排<small>ORCHESTRATE</small></span></div>
|
||||
<div class="pipeline-step"><span class="step-index">04</span><span class="step-copy" data-i18n="pipe_deploy">安全部署<small>DEPLOY</small></span></div>
|
||||
</aside>
|
||||
<div class="orchestrator">
|
||||
<div class="orchestrator-head">
|
||||
<div>
|
||||
<p class="orchestrator-kicker">INTELLIGENCE ORCHESTRATOR</p>
|
||||
<h2 data-i18n="console_title">企业 AI 能力编排中枢</h2>
|
||||
</div>
|
||||
<span class="live-badge">LIVE</span>
|
||||
</div>
|
||||
<div class="engine-map">
|
||||
<div class="engine-node"><span class="engine-node-name"><strong data-i18n="node_data">企业数据底座</strong><small>DATA FOUNDATION</small></span><i class="node-state"></i></div>
|
||||
<div class="engine-node"><span class="engine-node-name"><strong data-i18n="node_knowledge">行业知识库</strong><small>KNOWLEDGE BASE</small></span><i class="node-state blue"></i></div>
|
||||
<div class="engine-node"><span class="engine-node-name"><strong data-i18n="node_model">垂类模型</strong><small>VERTICAL MODEL</small></span><i class="node-state violet"></i></div>
|
||||
<div class="engine-node"><span class="engine-node-name"><strong data-i18n="node_private">私有部署环境</strong><small>PRIVATE CLOUD</small></span><i class="node-state green"></i></div>
|
||||
</div>
|
||||
<div class="metric-grid">
|
||||
<div class="metric"><span class="metric-label" data-i18n="metric_data">DATA EXP.</span><strong>7<em> YRS</em></strong></div>
|
||||
<div class="metric"><span class="metric-label" data-i18n="metric_projects">DELIVERED</span><strong>30<em> +</em></strong></div>
|
||||
<div class="metric"><span class="metric-label" data-i18n="metric_clients">CLIENTS</span><strong>10<em> +</em></strong></div>
|
||||
</div>
|
||||
<div class="console-foot"><span>SECURE PIPELINE · FULL-CHAIN DELIVERY</span><span class="console-progress"><i></i></span></div>
|
||||
<div class="hero-spatial reveal delay-1" aria-hidden="true">
|
||||
<span class="scene-axis" data-i18n="scene_axis">THREE.JS / GPU 实时渲染</span>
|
||||
<div class="hero-capabilities">
|
||||
<div class="hero-capability hero-capability--data"><span class="hero-capability-code" data-i18n="signal_code_data">数据</span><strong data-i18n="signal1">数据治理</strong></div>
|
||||
<div class="hero-capability hero-capability--model"><span class="hero-capability-code" data-i18n="signal_code_model">模型</span><strong data-i18n="signal2">模型优化</strong></div>
|
||||
<div class="hero-capability hero-capability--deploy"><span class="hero-capability-code" data-i18n="signal_code_deploy">部署</span><strong data-i18n="signal3">私有化部署</strong></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="signal-bar reveal delay-2" aria-label="全链路能力">
|
||||
<div class="signal-item"><span class="signal-index">01 / DATA</span><span class="signal-name" data-i18n="signal1">数据治理</span></div>
|
||||
<div class="signal-item"><span class="signal-index">02 / MODEL</span><span class="signal-name" data-i18n="signal2">模型优化</span></div>
|
||||
<div class="signal-item"><span class="signal-index">03 / DEPLOY</span><span class="signal-name" data-i18n="signal3">私有部署</span></div>
|
||||
<div class="signal-item"><span class="signal-index">04 / OPERATE</span><span class="signal-name" data-i18n="signal4">持续运营</span></div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="section about" id="about">
|
||||
<div class="container">
|
||||
<div class="section-header reveal">
|
||||
<div><span class="section-number">01 / CAPABILITY CHAIN</span><h2 class="section-title" data-i18n="about_title">从数据底座到 AI 业务价值</h2></div>
|
||||
<div><span class="section-number" data-i18n="section_about">01 / 能力链路</span><h2 class="section-title" data-i18n="about_title">从数据底座到 AI 业务价值</h2></div>
|
||||
<p class="section-desc" data-i18n="about_desc">我们不是只交付一个模型，而是围绕企业数据、场景与安全边界，搭建完整的 AI 落地链路。</p>
|
||||
</div>
|
||||
<div class="about-grid">
|
||||
@@ -759,15 +975,15 @@
|
||||
<p data-i18n="about_p1">荣刻科技早年深耕数据治理与数据加工处理，形成了扎实的数据工程能力。伴随人工智能技术发展，公司进一步拓展 AI 业务，构建“数据 + 模型 + 部署 + 运营”的双轮驱动体系。</p>
|
||||
<p data-i18n="about_p2">核心团队汇聚国内顶尖高校人才与一线互联网企业资深从业者，在成都、海口设有办公场地，具备从技术研发到项目交付的完整服务能力。</p>
|
||||
<div class="about-facts">
|
||||
<div class="fact"><strong>7 YEARS</strong><span data-i18n="about_fact1">数据治理与加工经验</span></div>
|
||||
<div class="fact"><strong>2 CITIES</strong><span data-i18n="about_fact2">研发与运营协同网络</span></div>
|
||||
<div class="fact"><strong data-i18n="fact_years">7 年</strong><span data-i18n="about_fact1">数据治理与加工经验</span></div>
|
||||
<div class="fact"><strong data-i18n="fact_cities">2 城</strong><span data-i18n="about_fact2">研发与运营协同网络</span></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="capability-chain">
|
||||
<article class="chain-card reveal"><span class="chain-index">01</span><div class="chain-copy"><h3 data-i18n="chain1_title">数据治理</h3><p data-i18n="chain1_desc">清洗、标注、加工与知识资产沉淀</p></div><span class="chain-state">READY</span></article>
|
||||
<article class="chain-card reveal delay-1"><span class="chain-index">02</span><div class="chain-copy"><h3 data-i18n="chain2_title">模型与应用</h3><p data-i18n="chain2_desc">智能对话、客服、音频与行业模型优化</p></div><span class="chain-state">READY</span></article>
|
||||
<article class="chain-card reveal delay-2"><span class="chain-index">03</span><div class="chain-copy"><h3 data-i18n="chain3_title">安全部署</h3><p data-i18n="chain3_desc">私有环境交付，核心数据保持域内流转</p></div><span class="chain-state">SECURE</span></article>
|
||||
<article class="chain-card reveal delay-3"><span class="chain-index">04</span><div class="chain-copy"><h3 data-i18n="chain4_title">持续运营</h3><p data-i18n="chain4_desc">效果评估、流程优化与业务能力迭代</p></div><span class="chain-state">ACTIVE</span></article>
|
||||
<article class="chain-card reveal"><span class="chain-index">01</span><div class="chain-copy"><h3 data-i18n="chain1_title">数据治理</h3><p data-i18n="chain1_desc">清洗、标注、加工与知识资产沉淀</p></div><span class="chain-state" data-i18n="state_ready">就绪</span></article>
|
||||
<article class="chain-card reveal delay-1"><span class="chain-index">02</span><div class="chain-copy"><h3 data-i18n="chain2_title">模型与应用</h3><p data-i18n="chain2_desc">智能对话、客服、音频与行业模型优化</p></div><span class="chain-state" data-i18n="state_ready">就绪</span></article>
|
||||
<article class="chain-card reveal delay-2"><span class="chain-index">03</span><div class="chain-copy"><h3 data-i18n="chain3_title">安全部署</h3><p data-i18n="chain3_desc">私有环境交付，核心数据保持域内流转</p></div><span class="chain-state" data-i18n="state_secure">安全</span></article>
|
||||
<article class="chain-card reveal delay-3"><span class="chain-index">04</span><div class="chain-copy"><h3 data-i18n="chain4_title">持续运营</h3><p data-i18n="chain4_desc">效果评估、流程优化与业务能力迭代</p></div><span class="chain-state" data-i18n="state_active">运行中</span></article>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -776,21 +992,22 @@
|
||||
<section class="section services" id="services">
|
||||
<div class="container">
|
||||
<div class="section-header reveal">
|
||||
<div><span class="section-number">02 / SOLUTIONS</span><h2 class="section-title" data-i18n="services_title">让 AI 真正进入业务流程</h2></div>
|
||||
<div><span class="section-number" data-i18n="section_services">02 / 解决方案</span><h2 class="section-title" data-i18n="services_title">让 AI 真正进入业务流程</h2></div>
|
||||
<p class="section-desc" data-i18n="services_desc">从标准化产品到定制开发，以企业真实场景为起点，交付可验证、可迭代的 AI 能力。</p>
|
||||
</div>
|
||||
<div class="services-layout">
|
||||
<article class="service-card featured reveal">
|
||||
<div class="service-code"><span>SYSTEM / CORE</span><span class="service-state">PRIMARY CAPABILITY</span></div>
|
||||
<div class="service-code"><span data-i18n="service_core_code">系统 / 核心</span><span class="service-state" data-i18n="service_primary">核心能力</span></div>
|
||||
<div class="service-content">
|
||||
<h3 data-i18n="srv_core_title">企业 AI 中台与智能升级</h3>
|
||||
<p data-i18n="srv_core_desc">将知识、模型与业务流程统一编排，让 AI 能力稳定进入决策、运营、客服与内容生产环节。</p>
|
||||
<div class="service-tags"><span class="service-tag">WORKFLOW</span><span class="service-tag">KNOWLEDGE</span><span class="service-tag">AGENT</span><span class="service-tag">INSIGHT</span></div>
|
||||
<div class="service-tags"><span class="service-tag" data-i18n="tag_workflow">工作流</span><span class="service-tag" data-i18n="tag_knowledge">知识库</span><span class="service-tag" data-i18n="tag_agent">智能体</span><span class="service-tag" data-i18n="tag_insight">洞察</span></div>
|
||||
</div>
|
||||
</article>
|
||||
<article class="service-card reveal delay-1"><div class="service-code"><span>S01</span><span class="service-state">DIALOGUE</span></div><h3 data-i18n="srv1_title">智能对话助手</h3><p data-i18n="srv1_desc">支持多轮交互、知识库问答与情感识别，适配客服、办公和教育场景。</p></article>
|
||||
<article class="service-card reveal delay-2"><div class="service-code"><span>S02</span><span class="service-state">SERVICE</span></div><h3 data-i18n="srv2_title">企业智能客服</h3><p data-i18n="srv2_desc">覆盖售前咨询、售后支持与工单处理，提升响应效率与服务一致性。</p></article>
|
||||
<article class="service-card reveal delay-1"><div class="service-code"><span>S03</span><span class="service-state">AUDIO</span></div><h3 data-i18n="srv3_title">AI 音频生成</h3><p data-i18n="srv3_desc">支持多语种、多风格语音内容生产，服务于配音、播报与数字人场景。</p></article>
|
||||
<article class="service-card reveal delay-2"><div class="service-code"><span>S04</span><span class="service-state">MODEL</span></div><h3 data-i18n="srv4_title">垂类模型优化</h3><p data-i18n="srv4_desc">围绕金融、医疗、法律、制造等场景进行模型微调、评测和持续优化。</p></article>
|
||||
<article class="service-card reveal"><div class="service-code"><span>S05</span><span class="service-state">PRIVATE</span></div><h3 data-i18n="srv5_title">模型私有化部署</h3><p data-i18n="srv5_desc">构建安全可靠的企业专属模型环境，满足核心数据不出域与高标准合规需求。</p></article>
|
||||
<article class="service-card reveal delay-1"><div class="service-code"><span>S01</span><span class="service-state" data-i18n="service_dialogue">对话</span></div><div class="service-content"><h3 data-i18n="srv1_title">智能对话助手</h3><p data-i18n="srv1_desc">支持多轮交互、知识库问答与情感识别，适配客服、办公和教育场景。</p></div></article>
|
||||
<article class="service-card reveal delay-2"><div class="service-code"><span>S02</span><span class="service-state" data-i18n="service_service">服务</span></div><div class="service-content"><h3 data-i18n="srv2_title">企业智能客服</h3><p data-i18n="srv2_desc">覆盖售前咨询、售后支持与工单处理，提升响应效率与服务一致性。</p></div></article>
|
||||
<article class="service-card reveal delay-1"><div class="service-code"><span>S03</span><span class="service-state" data-i18n="service_audio">音频</span></div><div class="service-content"><h3 data-i18n="srv3_title">AI 音频生成</h3><p data-i18n="srv3_desc">支持多语种、多风格语音内容生产，服务于配音、播报与数字人场景。</p></div></article>
|
||||
<article class="service-card reveal delay-2"><div class="service-code"><span>S04</span><span class="service-state" data-i18n="service_model">模型</span></div><div class="service-content"><h3 data-i18n="srv4_title">垂类模型优化</h3><p data-i18n="srv4_desc">围绕金融、医疗、法律、制造等场景进行模型微调、评测和持续优化。</p></div></article>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
@@ -798,14 +1015,14 @@
|
||||
<section class="section advantages" id="advantages">
|
||||
<div class="container">
|
||||
<div class="section-header reveal">
|
||||
<div><span class="section-number">03 / PROOF</span><h2 class="section-title" data-i18n="adv_title">技术之外，更重视可靠交付</h2></div>
|
||||
<div><span class="section-number" data-i18n="section_advantages">03 / 交付实力</span><h2 class="section-title" data-i18n="adv_title">技术之外，更重视可靠交付</h2></div>
|
||||
<p class="section-desc" data-i18n="adv_desc">成熟的数据能力、跨领域团队和双城服务网络，让方案从概念验证走向长期运行。</p>
|
||||
</div>
|
||||
<div class="proof-grid">
|
||||
<article class="proof-card reveal"><span class="proof-code">P01 / TEAM</span><h3 data-i18n="adv1_title">复合型核心团队</h3><p data-i18n="adv1_desc">核心成员来自国内顶尖高校与一线互联网企业，兼具研发能力和项目经验。</p></article>
|
||||
<article class="proof-card reveal delay-1"><span class="proof-code">P02 / DATA</span><h3 data-i18n="adv2_title">扎实的数据底座</h3><p data-i18n="adv2_desc">长期的数据治理与加工实践，为知识库、模型训练和 AI 应用提供可靠基础。</p></article>
|
||||
<article class="proof-card reveal delay-2"><span class="proof-code">P03 / DELIVERY</span><h3 data-i18n="adv3_title">场景化项目交付</h3><p data-i18n="adv3_desc">根据行业、流程与安全边界灵活组合能力，以实际业务指标验证实施效果。</p></article>
|
||||
<article class="proof-card reveal delay-3"><span class="proof-code">P04 / SERVICE</span><h3 data-i18n="adv4_title">持续服务体系</h3><p data-i18n="adv4_desc">成都研发与海口运营协同，为全国客户提供及时、高效的项目支持。</p></article>
|
||||
<article class="proof-card reveal"><span class="proof-code" data-i18n="proof_team">P01 / 团队</span><h3 data-i18n="adv1_title">复合型核心团队</h3><p data-i18n="adv1_desc">核心成员来自国内顶尖高校与一线互联网企业，兼具研发能力和项目经验。</p></article>
|
||||
<article class="proof-card reveal delay-1"><span class="proof-code" data-i18n="proof_data_code">P02 / 数据</span><h3 data-i18n="adv2_title">扎实的数据底座</h3><p data-i18n="adv2_desc">长期的数据治理与加工实践，为知识库、模型训练和 AI 应用提供可靠基础。</p></article>
|
||||
<article class="proof-card reveal delay-2"><span class="proof-code" data-i18n="proof_delivery_code">P03 / 交付</span><h3 data-i18n="adv3_title">场景化项目交付</h3><p data-i18n="adv3_desc">根据行业、流程与安全边界灵活组合能力，以实际业务指标验证实施效果。</p></article>
|
||||
<article class="proof-card reveal delay-3"><span class="proof-code" data-i18n="proof_service_code">P04 / 服务</span><h3 data-i18n="adv4_title">持续服务体系</h3><p data-i18n="adv4_desc">成都研发与海口运营协同，为全国客户提供及时、高效的项目支持。</p></article>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
@@ -813,18 +1030,18 @@
|
||||
<section class="section offices" id="offices">
|
||||
<div class="container">
|
||||
<div class="section-header reveal">
|
||||
<div><span class="section-number">04 / DELIVERY NETWORK</span><h2 class="section-title" data-i18n="offices_title">双城协同，服务全国</h2></div>
|
||||
<div><span class="section-number" data-i18n="section_offices">04 / 交付网络</span><h2 class="section-title" data-i18n="offices_title">双城协同，服务全国</h2></div>
|
||||
<p class="section-desc" data-i18n="offices_desc">研发、交付、运营与客户服务相互协同，让项目推进保持清晰节奏与稳定响应。</p>
|
||||
</div>
|
||||
<div class="office-network">
|
||||
<article class="office-card reveal">
|
||||
<div class="office-coordinate"><span>30.5728° N · 104.0668° E</span><span class="office-live">ONLINE</span></div>
|
||||
<div class="office-coordinate"><span>30.5728° N · 104.0668° E</span><span class="office-live" data-i18n="office_online">在线</span></div>
|
||||
<h3 data-i18n="office1_title">成都 · 研发中心</h3>
|
||||
<p data-i18n="office1_desc">技术研发与项目交付核心基地，承担 AI 产品研发、模型训练、系统集成与项目实施。</p>
|
||||
<div class="office-tags"><span class="office-tag" data-i18n="office1_tag1">研发总部</span><span class="office-tag" data-i18n="office1_tag2">项目交付</span><span class="office-tag" data-i18n="office1_tag3">技术支持</span></div>
|
||||
</article>
|
||||
<article class="office-card reveal delay-1">
|
||||
<div class="office-coordinate"><span>20.0440° N · 110.1999° E</span><span class="office-live">ONLINE</span></div>
|
||||
<div class="office-coordinate"><span>20.0440° N · 110.1999° E</span><span class="office-live" data-i18n="office_online">在线</span></div>
|
||||
<h3 data-i18n="office2_title">海口 · 运营中心</h3>
|
||||
<p data-i18n="office2_desc">商务运营与客户服务基地，负责市场拓展、项目运营管理及华南区域客户服务。</p>
|
||||
<div class="office-tags"><span class="office-tag" data-i18n="office2_tag1">商务运营</span><span class="office-tag" data-i18n="office2_tag2">客户服务</span><span class="office-tag" data-i18n="office2_tag3">华南区域</span></div>
|
||||
@@ -837,13 +1054,13 @@
|
||||
<div class="container">
|
||||
<div class="contact-shell reveal">
|
||||
<div class="contact-head">
|
||||
<div><span class="section-number">05 / START A PROJECT</span><h2 data-i18n="contact_title">从真实业务场景开始</h2></div>
|
||||
<div><span class="section-number" data-i18n="section_contact">05 / 启动项目</span><h2 data-i18n="contact_title">从真实业务场景开始</h2></div>
|
||||
<p class="contact-lead" data-i18n="contact_desc">告诉我们你的数据基础、业务目标与安全要求，一起判断 AI 最值得从哪里落地。</p>
|
||||
</div>
|
||||
<div class="contact-grid">
|
||||
<div class="contact-item"><span class="contact-label">CHANNEL / PHONE</span><h3 data-i18n="contact_phone">电话沟通</h3><a class="contact-value" href="tel:+8618482223118">+86 184 8222 3118</a></div>
|
||||
<div class="contact-item"><span class="contact-label">CHANNEL / EMAIL</span><h3 data-i18n="contact_email">邮件咨询</h3><a class="contact-value" href="mailto:chermack@163.com">chermack@163.com</a></div>
|
||||
<div class="contact-item"><span class="contact-label">CHANNEL / WECHAT</span><h3 data-i18n="contact_wechat">微信联系</h3><span class="contact-value" data-i18n="contact_wechat_desc">来电或邮件后获取微信，添加时请备注“商务合作”</span></div>
|
||||
<div class="contact-item"><span class="contact-label" data-i18n="channel_phone">渠道 / 电话</span><h3 data-i18n="contact_phone">电话沟通</h3><a class="contact-value" href="tel:+8618482223118">+86 184 8222 3118</a></div>
|
||||
<div class="contact-item"><span class="contact-label" data-i18n="channel_email">渠道 / 邮件</span><h3 data-i18n="contact_email">邮件咨询</h3><a class="contact-value" href="mailto:chermack@163.com">chermack@163.com</a></div>
|
||||
<div class="contact-item"><span class="contact-label" data-i18n="channel_wechat">渠道 / 微信</span><h3 data-i18n="contact_wechat">微信联系</h3><span class="contact-value" data-i18n="contact_wechat_desc">来电或邮件后获取微信，添加时请备注“商务合作”</span></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -853,7 +1070,7 @@
|
||||
<footer>
|
||||
<div class="container footer-inner">
|
||||
<span>© <span id="year">2026</span> <span data-i18n="footer_company">海南荣刻科技有限公司</span></span>
|
||||
<span class="footer-signal">DATA-DRIVEN · AI-POWERED · SECURE DELIVERY</span>
|
||||
<span class="footer-signal" data-i18n="footer_signal">数据驱动 · AI 赋能 · 安全交付</span>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
@@ -864,53 +1081,67 @@
|
||||
const i18n = {
|
||||
zh: {
|
||||
title: '海南荣刻科技有限公司 - 数据筑基 · AI 落地', skip: '跳到主要内容', brand: '荣刻科技', nav_label: '主导航', home_label: '荣刻科技首页', lang_label: '语言切换', menu_open: '打开导航菜单', menu_close: '关闭导航菜单',
|
||||
theme_label: '外观模式选择', theme_system: '跟随系统', theme_light: '浅色外观', theme_dark: '深色外观',
|
||||
nav_about: '能力链路', nav_services: '解决方案', nav_advantages: '核心优势', nav_offices: '交付网络', nav_contact: '预约咨询',
|
||||
hero_eyebrow: 'AI + DATA INFRASTRUCTURE', hero_line1: '让企业数据', hero_line2: '成为 AI 生产力',
|
||||
hero_eyebrow: 'AI 与数据基础设施', hero_line1: '让企业数据', hero_line2: '成为 AI 生产力',
|
||||
hero_desc: '从数据治理、模型优化到私有化部署，荣刻科技为企业构建可落地、可持续、可掌控的 AI 能力体系。',
|
||||
hero_primary: '预约 AI 场景诊断', hero_secondary: '查看解决方案', proof_data: '7 年数据技术积累', proof_private: '支持私有化部署', proof_delivery: '成都 / 海口双城交付',
|
||||
scene_live: '实时生成系统', scene_title: '企业智能系统', scene_desc: '数据 · 模型 · 部署 · 运营', scene_axis: 'THREE.JS / GPU 实时渲染',
|
||||
console_online: '系统在线', pipe_data: '数据接入', pipe_govern: '治理加工', pipe_model: '模型编排', pipe_deploy: '安全部署', console_title: '企业 AI 能力编排中枢',
|
||||
node_data: '企业数据底座', node_knowledge: '行业知识库', node_model: '垂类模型', node_private: '私有部署环境', metric_data: '数据经验', metric_projects: '交付项目', metric_clients: '服务客户',
|
||||
signal1: '数据治理', signal2: '模型优化', signal3: '私有部署', signal4: '持续运营',
|
||||
signal1: '数据治理', signal2: '模型优化', signal3: '私有化部署', signal4: '持续运营', signal_code_data: '数据', signal_code_model: '模型', signal_code_deploy: '部署',
|
||||
section_about: '01 / 能力链路', section_services: '02 / 解决方案', section_advantages: '03 / 交付实力', section_offices: '04 / 交付网络', section_contact: '05 / 启动项目',
|
||||
about_title: '从数据底座到 AI 业务价值', about_desc: '我们不是只交付一个模型，而是围绕企业数据、场景与安全边界，搭建完整的 AI 落地链路。',
|
||||
about_p1: '荣刻科技早年深耕数据治理与数据加工处理，形成了扎实的数据工程能力。伴随人工智能技术发展，公司进一步拓展 AI 业务，构建“数据 + 模型 + 部署 + 运营”的双轮驱动体系。',
|
||||
about_p2: '核心团队汇聚国内顶尖高校人才与一线互联网企业资深从业者，在成都、海口设有办公场地，具备从技术研发到项目交付的完整服务能力。',
|
||||
about_fact1: '数据治理与加工经验', about_fact2: '研发与运营协同网络',
|
||||
about_fact1: '数据治理与加工经验', about_fact2: '研发与运营协同网络', fact_years: '7 年', fact_cities: '2 城',
|
||||
chain1_title: '数据治理', chain1_desc: '清洗、标注、加工与知识资产沉淀', chain2_title: '模型与应用', chain2_desc: '智能对话、客服、音频与行业模型优化', chain3_title: '安全部署', chain3_desc: '私有环境交付，核心数据保持域内流转', chain4_title: '持续运营', chain4_desc: '效果评估、流程优化与业务能力迭代',
|
||||
state_ready: '就绪', state_secure: '安全', state_active: '运行中',
|
||||
services_title: '让 AI 真正进入业务流程', services_desc: '从标准化产品到定制开发，以企业真实场景为起点，交付可验证、可迭代的 AI 能力。',
|
||||
srv_core_title: '企业 AI 中台与智能升级', srv_core_desc: '将知识、模型与业务流程统一编排，让 AI 能力稳定进入决策、运营、客服与内容生产环节。',
|
||||
service_core_code: '系统 / 核心', service_primary: '核心能力', tag_workflow: '工作流', tag_knowledge: '知识库', tag_agent: '智能体', tag_insight: '洞察',
|
||||
service_dialogue: '对话', service_service: '服务', service_audio: '音频', service_model: '模型',
|
||||
srv1_title: '智能对话助手', srv1_desc: '支持多轮交互、知识库问答与情感识别，适配客服、办公和教育场景。', srv2_title: '企业智能客服', srv2_desc: '覆盖售前咨询、售后支持与工单处理，提升响应效率与服务一致性。',
|
||||
srv3_title: 'AI 音频生成', srv3_desc: '支持多语种、多风格语音内容生产，服务于配音、播报与数字人场景。', srv4_title: '垂类模型优化', srv4_desc: '围绕金融、医疗、法律、制造等场景进行模型微调、评测和持续优化。', srv5_title: '模型私有化部署', srv5_desc: '构建安全可靠的企业专属模型环境，满足核心数据不出域与高标准合规需求。',
|
||||
srv3_title: 'AI 音频生成', srv3_desc: '支持多语种、多风格语音内容生产，服务于配音、播报与数字人场景。', srv4_title: '垂类模型优化', srv4_desc: '围绕金融、医疗、法律、制造等场景进行模型微调、评测和持续优化。',
|
||||
adv_title: '技术之外，更重视可靠交付', adv_desc: '成熟的数据能力、跨领域团队和双城服务网络，让方案从概念验证走向长期运行。',
|
||||
proof_team: 'P01 / 团队', proof_data_code: 'P02 / 数据', proof_delivery_code: 'P03 / 交付', proof_service_code: 'P04 / 服务',
|
||||
adv1_title: '复合型核心团队', adv1_desc: '核心成员来自国内顶尖高校与一线互联网企业，兼具研发能力和项目经验。', adv2_title: '扎实的数据底座', adv2_desc: '长期的数据治理与加工实践，为知识库、模型训练和 AI 应用提供可靠基础。', adv3_title: '场景化项目交付', adv3_desc: '根据行业、流程与安全边界灵活组合能力，以实际业务指标验证实施效果。', adv4_title: '持续服务体系', adv4_desc: '成都研发与海口运营协同，为全国客户提供及时、高效的项目支持。',
|
||||
offices_title: '双城协同，服务全国', offices_desc: '研发、交付、运营与客户服务相互协同，让项目推进保持清晰节奏与稳定响应。',
|
||||
office1_title: '成都 · 研发中心', office1_desc: '技术研发与项目交付核心基地，承担 AI 产品研发、模型训练、系统集成与项目实施。', office1_tag1: '研发总部', office1_tag2: '项目交付', office1_tag3: '技术支持',
|
||||
office2_title: '海口 · 运营中心', office2_desc: '商务运营与客户服务基地，负责市场拓展、项目运营管理及华南区域客户服务。', office2_tag1: '商务运营', office2_tag2: '客户服务', office2_tag3: '华南区域',
|
||||
contact_title: '从真实业务场景开始', contact_desc: '告诉我们你的数据基础、业务目标与安全要求，一起判断 AI 最值得从哪里落地。', contact_phone: '电话沟通', contact_email: '邮件咨询', contact_wechat: '微信联系', contact_wechat_desc: '来电或邮件后获取微信，添加时请备注“商务合作”', footer_company: '海南荣刻科技有限公司'
|
||||
office2_title: '海口 · 运营中心', office2_desc: '商务运营与客户服务基地，负责市场拓展、项目运营管理及华南区域客户服务。', office2_tag1: '商务运营', office2_tag2: '客户服务', office2_tag3: '华南区域', office_online: '在线',
|
||||
contact_title: '从真实业务场景开始', contact_desc: '告诉我们你的数据基础、业务目标与安全要求，一起判断 AI 最值得从哪里落地。', channel_phone: '渠道 / 电话', channel_email: '渠道 / 邮件', channel_wechat: '渠道 / 微信', contact_phone: '电话沟通', contact_email: '邮件咨询', contact_wechat: '微信联系', contact_wechat_desc: '来电或邮件后获取微信，添加时请备注“商务合作”', footer_company: '海南荣刻科技有限公司', footer_signal: '数据驱动 · AI 赋能 · 安全交付'
|
||||
},
|
||||
en: {
|
||||
title: 'Hainan Roncarve Technology - Data Foundation · AI Delivery', skip: 'Skip to main content', brand: 'Roncarve Tech', nav_label: 'Main navigation', home_label: 'Roncarve Tech home', lang_label: 'Language selector', menu_open: 'Open navigation menu', menu_close: 'Close navigation menu',
|
||||
theme_label: 'Appearance selector', theme_system: 'Follow System', theme_light: 'Light appearance', theme_dark: 'Dark appearance',
|
||||
nav_about: 'Capabilities', nav_services: 'Solutions', nav_advantages: 'Advantages', nav_offices: 'Delivery', nav_contact: 'Book a Call',
|
||||
hero_eyebrow: 'AI + DATA INFRASTRUCTURE', hero_line1: 'Turn enterprise data', hero_line2: 'into AI productivity',
|
||||
hero_desc: 'From data governance and model optimization to private deployment, Roncarve builds practical, sustainable and controllable enterprise AI systems.',
|
||||
hero_primary: 'Book an AI Discovery Call', hero_secondary: 'Explore Solutions', proof_data: '7 years in data technology', proof_private: 'Private deployment ready', proof_delivery: 'Chengdu / Haikou delivery',
|
||||
scene_live: 'LIVE GENERATIVE SYSTEM', scene_title: 'ENTERPRISE INTELLIGENCE', scene_desc: 'DATA · MODEL · DEPLOY · OPERATE', scene_axis: 'THREE.JS / GPU SHADER',
|
||||
console_online: 'SYSTEM ONLINE', pipe_data: 'Data Intake', pipe_govern: 'Govern', pipe_model: 'Orchestrate', pipe_deploy: 'Deploy', console_title: 'Enterprise AI Orchestration Hub',
|
||||
node_data: 'Enterprise Data', node_knowledge: 'Knowledge Base', node_model: 'Vertical Model', node_private: 'Private Environment', metric_data: 'DATA EXP.', metric_projects: 'DELIVERED', metric_clients: 'CLIENTS',
|
||||
signal1: 'Data Governance', signal2: 'Model Optimization', signal3: 'Private Deployment', signal4: 'Continuous Operations',
|
||||
signal1: 'Data Governance', signal2: 'Model Optimization', signal3: 'Private Deployment', signal4: 'Continuous Operations', signal_code_data: 'DATA', signal_code_model: 'MODEL', signal_code_deploy: 'DEPLOY',
|
||||
section_about: '01 / CAPABILITY CHAIN', section_services: '02 / SOLUTIONS', section_advantages: '03 / PROOF', section_offices: '04 / DELIVERY NETWORK', section_contact: '05 / START A PROJECT',
|
||||
about_title: 'From data foundation to AI business value', about_desc: 'We deliver more than a model. We build the complete path around your data, scenarios and security boundaries.',
|
||||
about_p1: 'Roncarve began with deep expertise in data governance and processing, building a strong data engineering foundation. As AI evolved, we expanded into a dual-engine system spanning data, models, deployment and operations.',
|
||||
about_p2: 'Our core team brings together talent from leading Chinese universities and experienced professionals from major internet companies. With offices in Chengdu and Haikou, we cover both R&D and project delivery.',
|
||||
about_fact1: 'Data governance and processing', about_fact2: 'R&D and operations network',
|
||||
about_fact1: 'Data governance and processing', about_fact2: 'R&D and operations network', fact_years: '7 YEARS', fact_cities: '2 CITIES',
|
||||
chain1_title: 'Data Governance', chain1_desc: 'Cleaning, labeling, processing and knowledge assets', chain2_title: 'Models & Apps', chain2_desc: 'Dialogue, service, audio and vertical model tuning', chain3_title: 'Secure Deployment', chain3_desc: 'Private delivery with core data remaining in-domain', chain4_title: 'Continuous Operations', chain4_desc: 'Evaluation, workflow optimization and iteration',
|
||||
state_ready: 'READY', state_secure: 'SECURE', state_active: 'ACTIVE',
|
||||
services_title: 'Put AI inside real business workflows', services_desc: 'From standardized products to custom development, we start with real enterprise scenarios and deliver measurable, iterative AI capabilities.',
|
||||
srv_core_title: 'Enterprise AI Platform & Transformation', srv_core_desc: 'Orchestrate knowledge, models and workflows so AI can reliably support decisions, operations, service and content production.',
|
||||
service_core_code: 'SYSTEM / CORE', service_primary: 'PRIMARY CAPABILITY', tag_workflow: 'WORKFLOW', tag_knowledge: 'KNOWLEDGE', tag_agent: 'AGENT', tag_insight: 'INSIGHT',
|
||||
service_dialogue: 'DIALOGUE', service_service: 'SERVICE', service_audio: 'AUDIO', service_model: 'MODEL',
|
||||
srv1_title: 'Conversational AI', srv1_desc: 'Multi-turn interaction, knowledge Q&A and sentiment recognition for service, office and education.', srv2_title: 'Enterprise AI Service', srv2_desc: 'Cover pre-sales, after-sales and ticket workflows to improve speed and consistency.',
|
||||
srv3_title: 'AI Audio Generation', srv3_desc: 'Multi-language, multi-style voice production for dubbing, broadcasting and digital humans.', srv4_title: 'Vertical Model Tuning', srv4_desc: 'Fine-tuning, evaluation and optimization for finance, healthcare, legal and manufacturing.', srv5_title: 'Private Model Deployment', srv5_desc: 'Secure, dedicated model environments for in-domain data and demanding compliance needs.',
|
||||
srv3_title: 'AI Audio Generation', srv3_desc: 'Multi-language, multi-style voice production for dubbing, broadcasting and digital humans.', srv4_title: 'Vertical Model Tuning', srv4_desc: 'Fine-tuning, evaluation and optimization for finance, healthcare, legal and manufacturing.',
|
||||
adv_title: 'Reliable delivery beyond technology', adv_desc: 'Mature data capabilities, a cross-functional team and a dual-city service network take solutions from proof of concept to long-term operation.',
|
||||
proof_team: 'P01 / TEAM', proof_data_code: 'P02 / DATA', proof_delivery_code: 'P03 / DELIVERY', proof_service_code: 'P04 / SERVICE',
|
||||
adv1_title: 'Cross-functional Core Team', adv1_desc: 'Talent from leading universities and internet companies combines strong R&D with delivery experience.', adv2_title: 'A Solid Data Foundation', adv2_desc: 'Long-term data governance and processing practices support knowledge, training and AI applications.', adv3_title: 'Scenario-based Delivery', adv3_desc: 'Capabilities are composed around industry, process and security needs, then validated by real metrics.', adv4_title: 'Continuous Service', adv4_desc: 'Chengdu R&D and Haikou operations provide responsive support for clients nationwide.',
|
||||
offices_title: 'Two cities, nationwide delivery', offices_desc: 'R&D, delivery, operations and client service work together to keep every project clear and responsive.',
|
||||
office1_title: 'Chengdu · R&D Center', office1_desc: 'Our core R&D and delivery base for AI products, model training, systems integration and implementation.', office1_tag1: 'R&D HQ', office1_tag2: 'Delivery', office1_tag3: 'Tech Support',
|
||||
office2_title: 'Haikou · Operations Center', office2_desc: 'Our business operations and client service base for market development, project operations and Southern China.', office2_tag1: 'Operations', office2_tag2: 'Client Service', office2_tag3: 'South China',
|
||||
contact_title: 'Start with one real business scenario', contact_desc: 'Tell us about your data foundation, business goal and security needs. We will identify where AI can create value first.', contact_phone: 'Call Us', contact_email: 'Email Us', contact_wechat: 'Connect on WeChat', contact_wechat_desc: 'Contact us by phone or email to receive our WeChat details.', footer_company: 'Hainan Roncarve Technology Co., Ltd.'
|
||||
office2_title: 'Haikou · Operations Center', office2_desc: 'Our business operations and client service base for market development, project operations and Southern China.', office2_tag1: 'Operations', office2_tag2: 'Client Service', office2_tag3: 'South China', office_online: 'ONLINE',
|
||||
contact_title: 'Start with one real business scenario', contact_desc: 'Tell us about your data foundation, business goal and security needs. We will identify where AI can create value first.', channel_phone: 'CHANNEL / PHONE', channel_email: 'CHANNEL / EMAIL', channel_wechat: 'CHANNEL / WECHAT', contact_phone: 'Call Us', contact_email: 'Email Us', contact_wechat: 'Connect on WeChat', contact_wechat_desc: 'Contact us by phone or email to receive our WeChat details.', footer_company: 'Hainan Roncarve Technology Co., Ltd.', footer_signal: 'DATA-DRIVEN · AI-POWERED · SECURE DELIVERY'
|
||||
}
|
||||
};
|
||||
|
||||
@@ -918,13 +1149,40 @@
|
||||
const menuBtn = document.getElementById('menuBtn');
|
||||
const navLinks = document.getElementById('navLinks');
|
||||
const langSwitch = document.getElementById('langSwitch');
|
||||
const themeSwitch = document.getElementById('themeSwitch');
|
||||
const themeQuery = window.matchMedia('(prefers-color-scheme: dark)');
|
||||
const validThemes = ['system', 'light', 'dark'];
|
||||
const reduceMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
|
||||
let currentLanguage = 'zh';
|
||||
let themePreference = document.documentElement.dataset.themePreference || 'system';
|
||||
|
||||
function resolvedTheme(preference) {
|
||||
return preference === 'system' ? (themeQuery.matches ? 'dark' : 'light') : preference;
|
||||
}
|
||||
|
||||
function applyTheme(preference, persist) {
|
||||
const selected = validThemes.includes(preference) ? preference : 'system';
|
||||
const resolved = resolvedTheme(selected);
|
||||
themePreference = selected;
|
||||
document.documentElement.dataset.themePreference = selected;
|
||||
document.documentElement.dataset.theme = resolved;
|
||||
document.querySelectorAll('[data-theme-option]').forEach(function (button) {
|
||||
button.setAttribute('aria-checked', String(button.dataset.themeOption === selected));
|
||||
});
|
||||
const themeColors = { light: '#f7faff', dark: '#05070a' };
|
||||
const themeMeta = document.querySelector('meta[name="theme-color"]');
|
||||
if (themeMeta) themeMeta.setAttribute('content', themeColors[resolved]);
|
||||
if (persist !== false) {
|
||||
try { localStorage.setItem('site_theme', selected); } catch (error) { /* Storage may be disabled. */ }
|
||||
}
|
||||
window.dispatchEvent(new CustomEvent('roncarve:themechange', { detail: { preference: selected, resolved: resolved } }));
|
||||
}
|
||||
|
||||
function applyLanguage(lang) {
|
||||
const selected = i18n[lang] ? lang : 'zh';
|
||||
currentLanguage = selected;
|
||||
document.documentElement.lang = selected === 'zh' ? 'zh-CN' : 'en';
|
||||
document.title = i18n[selected].title;
|
||||
document.querySelectorAll('[data-i18n]').forEach(function (element) {
|
||||
const key = element.dataset.i18n;
|
||||
if (i18n[selected][key]) element.textContent = i18n[selected][key];
|
||||
@@ -955,6 +1213,22 @@
|
||||
if (button) applyLanguage(button.dataset.lang);
|
||||
});
|
||||
|
||||
themeSwitch.addEventListener('click', function (event) {
|
||||
const button = event.target.closest('[data-theme-option]');
|
||||
if (!button) return;
|
||||
applyTheme(button.dataset.themeOption, true);
|
||||
if (window.matchMedia('(max-width: 860px)').matches) {
|
||||
closeMenu();
|
||||
menuBtn.focus();
|
||||
}
|
||||
});
|
||||
|
||||
const handleSystemTheme = function () {
|
||||
if (themePreference === 'system') applyTheme('system', false);
|
||||
};
|
||||
if (themeQuery.addEventListener) themeQuery.addEventListener('change', handleSystemTheme);
|
||||
else if (themeQuery.addListener) themeQuery.addListener(handleSystemTheme);
|
||||
|
||||
menuBtn.addEventListener('click', function () {
|
||||
const open = !navLinks.classList.contains('open');
|
||||
menuBtn.classList.toggle('open', open);
|
||||
@@ -965,12 +1239,15 @@
|
||||
});
|
||||
|
||||
navLinks.querySelectorAll('a').forEach(function (link) { link.addEventListener('click', closeMenu); });
|
||||
document.addEventListener('keydown', function (event) { if (event.key === 'Escape') closeMenu(); });
|
||||
document.addEventListener('keydown', function (event) {
|
||||
if (event.key === 'Escape') closeMenu();
|
||||
});
|
||||
|
||||
window.addEventListener('scroll', function () { navbar.classList.toggle('scrolled', window.scrollY > 24); }, { passive: true });
|
||||
|
||||
const observedSections = document.querySelectorAll('main section[id]');
|
||||
const observedSections = Array.from(document.querySelectorAll('main section[id]'));
|
||||
const navAnchors = document.querySelectorAll('.nav-link');
|
||||
|
||||
const sectionObserver = new IntersectionObserver(function (entries) {
|
||||
entries.forEach(function (entry) {
|
||||
if (!entry.isIntersecting) return;
|
||||
@@ -1006,6 +1283,7 @@
|
||||
});
|
||||
}
|
||||
|
||||
applyTheme(themePreference, false);
|
||||
let savedLang = 'zh';
|
||||
try { savedLang = localStorage.getItem('site_lang') || 'zh'; } catch (error) { /* Storage may be disabled. */ }
|
||||
applyLanguage(savedLang);
|
||||
@@ -1013,5 +1291,6 @@
|
||||
navbar.classList.toggle('scrolled', window.scrollY > 24);
|
||||
})();
|
||||
</script>
|
||||
<script type="module" src="./theme-webgl.js?v=20260813h"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
+852
@@ -0,0 +1,852 @@
|
||||
import * as THREE from './vendor/three.module.min.js';
|
||||
|
||||
const root = document.getElementById('heroWebgl');
|
||||
const canvas = document.getElementById('heroWebglCanvas');
|
||||
|
||||
if (root && canvas) {
|
||||
const reducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
|
||||
const connection = navigator.connection || navigator.mozConnection || navigator.webkitConnection;
|
||||
const lowPower = window.innerWidth < 640 || Boolean(connection && connection.saveData) || (navigator.deviceMemory && navigator.deviceMemory <= 2);
|
||||
const staticMode = reducedMotion || lowPower;
|
||||
let renderer;
|
||||
|
||||
try {
|
||||
renderer = new THREE.WebGLRenderer({
|
||||
canvas,
|
||||
alpha: false,
|
||||
antialias: !lowPower,
|
||||
depth: true,
|
||||
stencil: false,
|
||||
powerPreference: staticMode ? 'low-power' : 'high-performance'
|
||||
});
|
||||
} catch (error) {
|
||||
root.classList.add('has-error');
|
||||
}
|
||||
|
||||
if (renderer) {
|
||||
renderer.outputColorSpace = THREE.SRGBColorSpace;
|
||||
renderer.toneMapping = THREE.ACESFilmicToneMapping;
|
||||
renderer.toneMappingExposure = 0.96;
|
||||
renderer.shadowMap.enabled = !lowPower;
|
||||
renderer.shadowMap.type = THREE.PCFShadowMap;
|
||||
renderer.autoClear = false;
|
||||
|
||||
const resolvedTheme = document.documentElement.dataset.theme || 'light';
|
||||
const initialDark = resolvedTheme === 'dark' ? 1 : 0;
|
||||
const uniforms = {
|
||||
uTime: { value: 0 },
|
||||
uDark: { value: initialDark },
|
||||
uResolution: { value: new THREE.Vector2(1, 1) },
|
||||
uMouse: { value: new THREE.Vector2(0.72, 0.4) }
|
||||
};
|
||||
|
||||
const backgroundScene = new THREE.Scene();
|
||||
const backgroundCamera = new THREE.OrthographicCamera(-1, 1, 1, -1, 0, 1);
|
||||
const backgroundMaterial = new THREE.ShaderMaterial({
|
||||
uniforms,
|
||||
depthTest: false,
|
||||
depthWrite: false,
|
||||
toneMapped: false,
|
||||
vertexShader: `
|
||||
varying vec2 vUv;
|
||||
void main() {
|
||||
vUv = uv;
|
||||
gl_Position = vec4(position, 1.0);
|
||||
}
|
||||
`,
|
||||
fragmentShader: `
|
||||
precision highp float;
|
||||
varying vec2 vUv;
|
||||
uniform float uTime;
|
||||
uniform float uDark;
|
||||
uniform vec2 uResolution;
|
||||
uniform vec2 uMouse;
|
||||
|
||||
float hash21(vec2 p) {
|
||||
p = fract(p * vec2(123.34, 456.21));
|
||||
p += dot(p, p + 45.32);
|
||||
return fract(p.x * p.y);
|
||||
}
|
||||
|
||||
float segmentDistance(vec2 p, vec2 a, vec2 b) {
|
||||
vec2 pa = p - a;
|
||||
vec2 ba = b - a;
|
||||
float h = clamp(dot(pa, ba) / dot(ba, ba), 0.0, 1.0);
|
||||
return length(pa - ba * h);
|
||||
}
|
||||
|
||||
float beam(vec2 p, vec2 a, vec2 b, float width) {
|
||||
return exp(-segmentDistance(p, a, b) / width);
|
||||
}
|
||||
|
||||
void main() {
|
||||
vec2 uv = vUv;
|
||||
float aspect = uResolution.x / max(uResolution.y, 1.0);
|
||||
vec2 p = uv - 0.5;
|
||||
p.x *= aspect;
|
||||
float t = uTime;
|
||||
|
||||
vec3 lightTop = vec3(0.992, 0.997, 1.0);
|
||||
vec3 lightBottom = vec3(0.88, 0.93, 1.0);
|
||||
vec3 darkTop = vec3(0.016, 0.027, 0.044);
|
||||
vec3 darkBottom = vec3(0.025, 0.055, 0.08);
|
||||
vec3 color = mix(mix(lightBottom, lightTop, uv.y), mix(darkBottom, darkTop, uv.y), uDark);
|
||||
|
||||
vec2 focus = vec2(aspect * 0.18 + (uMouse.x - 0.5) * 0.035, -0.12 + (0.5 - uMouse.y) * 0.025);
|
||||
float halo = exp(-length((p - focus) / vec2(0.48, 0.42)) * 2.2);
|
||||
color += mix(vec3(0.19, 0.52, 1.0), vec3(0.06, 0.42, 0.72), uDark) * halo * mix(0.12, 0.23, uDark);
|
||||
|
||||
float skyWash = exp(-length((p - vec2(aspect * 0.37, 0.39)) / vec2(0.52, 0.34)) * 2.0);
|
||||
color += mix(vec3(0.2, 0.43, 0.78), vec3(0.04, 0.18, 0.36), uDark) * skyWash * mix(0.11, 0.14, uDark);
|
||||
|
||||
vec2 leftSource = vec2(-aspect * 0.58, -0.38);
|
||||
vec2 rightTarget = vec2(aspect * 0.62, -0.19);
|
||||
float cyanBeam = beam(p, leftSource, focus + vec2(-0.06, -0.08), 0.009);
|
||||
float cyanGlow = beam(p, leftSource, focus + vec2(-0.06, -0.08), 0.055);
|
||||
float warmBeam = beam(p, focus + vec2(0.04, 0.02), rightTarget, 0.008);
|
||||
float warmGlow = beam(p, focus + vec2(0.04, 0.02), rightTarget, 0.052);
|
||||
color += vec3(0.18, 0.88, 1.0) * (cyanBeam * 1.48 + cyanGlow * 0.34);
|
||||
color += vec3(1.0, 0.58, 0.18) * (warmBeam * 2.05 + warmGlow * 0.4);
|
||||
|
||||
float spectrumA = beam(p, leftSource + vec2(0.0, 0.025), focus + vec2(0.1, -0.025), 0.0045);
|
||||
float spectrumB = beam(p, focus + vec2(-0.02, -0.03), rightTarget + vec2(0.0, -0.045), 0.0045);
|
||||
color += vec3(0.55, 0.42, 1.0) * spectrumA * 0.24;
|
||||
color += vec3(0.96, 0.35, 0.72) * spectrumB * 0.18;
|
||||
|
||||
float fiberFlow = 0.0;
|
||||
for (int index = 0; index < 7; index++) {
|
||||
float offset = (float(index) - 3.0) * 0.012;
|
||||
fiberFlow += beam(
|
||||
p,
|
||||
leftSource + vec2(0.0, offset),
|
||||
focus + vec2(-0.07, -0.075 + offset * 0.45),
|
||||
0.0022
|
||||
);
|
||||
}
|
||||
color += vec3(0.22, 0.92, 1.0) * fiberFlow * mix(0.12, 0.2, uDark);
|
||||
|
||||
vec2 causticOrigin = focus + vec2(-0.055, -0.16);
|
||||
vec2 causticVector = p - causticOrigin;
|
||||
float causticDistance = length(causticVector);
|
||||
float causticAngle = atan(causticVector.y, causticVector.x);
|
||||
float causticBands = pow(max(0.0, sin(causticAngle * 18.0 + causticDistance * 5.0 - t * 0.18)), 18.0);
|
||||
float causticMask = smoothstep(0.05, 0.22, causticDistance) * exp(-causticDistance * 1.75) * smoothstep(0.1, -0.25, p.y);
|
||||
color += mix(vec3(0.36, 0.78, 1.0), vec3(0.68, 0.34, 1.0), smoothstep(-1.2, 0.5, causticAngle)) * causticBands * causticMask * mix(0.34, 0.44, uDark);
|
||||
|
||||
float floorMask = smoothstep(0.06, -0.28, p.y);
|
||||
vec2 gp = p - vec2(0.0, -0.24);
|
||||
float horizontal = 1.0 - smoothstep(0.0, 0.018, abs(fract((gp.y + 0.55) * 18.0) - 0.5));
|
||||
float perspectiveX = gp.x / max(0.12, abs(gp.y - 0.34));
|
||||
float vertical = 1.0 - smoothstep(0.0, 0.025, abs(fract(perspectiveX * 3.2) - 0.5));
|
||||
float grid = (horizontal * 0.48 + vertical * 0.35) * floorMask;
|
||||
color += mix(vec3(0.12, 0.34, 0.68), vec3(0.08, 0.48, 0.58), uDark) * grid * mix(0.2, 0.22, uDark);
|
||||
|
||||
float dust = step(0.993, hash21(floor(p * 190.0 + t * 0.4))) * floorMask;
|
||||
color += vec3(0.35, 0.9, 1.0) * dust * 0.28;
|
||||
color += (hash21(p * 210.0) - 0.5) * mix(0.008, 0.014, uDark);
|
||||
|
||||
float vignette = smoothstep(1.25, 0.2, length((uv - 0.5) * vec2(0.82, 1.0)));
|
||||
color *= mix(0.95, 1.0, vignette);
|
||||
gl_FragColor = vec4(color, 1.0);
|
||||
}
|
||||
`
|
||||
});
|
||||
const backgroundGeometry = new THREE.PlaneGeometry(2, 2);
|
||||
backgroundScene.add(new THREE.Mesh(backgroundGeometry, backgroundMaterial));
|
||||
|
||||
const worldScene = new THREE.Scene();
|
||||
const worldCamera = new THREE.PerspectiveCamera(33, 1, 0.1, 50);
|
||||
worldCamera.position.set(0, 0.12, 9.4);
|
||||
|
||||
const hemisphereLight = new THREE.HemisphereLight(0xe8f8ff, 0x0c1830, 1.8);
|
||||
const keyLight = new THREE.DirectionalLight(0xffffff, 5.2);
|
||||
keyLight.position.set(-3.8, 5.6, 5.8);
|
||||
keyLight.castShadow = !lowPower;
|
||||
keyLight.shadow.mapSize.set(lowPower ? 512 : 1024, lowPower ? 512 : 1024);
|
||||
keyLight.shadow.camera.near = 0.5;
|
||||
keyLight.shadow.camera.far = 20;
|
||||
keyLight.shadow.camera.left = -5;
|
||||
keyLight.shadow.camera.right = 5;
|
||||
keyLight.shadow.camera.top = 5;
|
||||
keyLight.shadow.camera.bottom = -5;
|
||||
|
||||
const cyanLight = new THREE.PointLight(0x62dfff, 22, 15, 2);
|
||||
cyanLight.position.set(-3.2, -0.5, 4.4);
|
||||
const blueLight = new THREE.PointLight(0x4e78ff, 16, 13, 2);
|
||||
blueLight.position.set(3.5, 2.1, 3.2);
|
||||
const warmLight = new THREE.PointLight(0xffb75e, 12, 12, 2);
|
||||
warmLight.position.set(3.2, -1.0, 4.8);
|
||||
worldScene.add(hemisphereLight, keyLight, cyanLight, blueLight, warmLight);
|
||||
|
||||
const disposableGeometries = [];
|
||||
const disposableMaterials = [];
|
||||
const trackGeometry = function (geometry) {
|
||||
disposableGeometries.push(geometry);
|
||||
return geometry;
|
||||
};
|
||||
const trackMaterial = function (material) {
|
||||
disposableMaterials.push(material);
|
||||
return material;
|
||||
};
|
||||
|
||||
const environmentScene = new THREE.Scene();
|
||||
environmentScene.background = new THREE.Color(0x06162d);
|
||||
|
||||
function addEnvironmentPanel(color, position, rotation, scale, intensity) {
|
||||
const panelGeometry = trackGeometry(new THREE.PlaneGeometry(scale[0], scale[1]));
|
||||
const panelMaterial = trackMaterial(new THREE.MeshBasicMaterial({
|
||||
color: new THREE.Color(color).multiplyScalar(intensity || 1),
|
||||
side: THREE.DoubleSide
|
||||
}));
|
||||
const panel = new THREE.Mesh(panelGeometry, panelMaterial);
|
||||
panel.position.set(position[0], position[1], position[2]);
|
||||
panel.rotation.set(rotation[0], rotation[1], rotation[2]);
|
||||
environmentScene.add(panel);
|
||||
}
|
||||
|
||||
addEnvironmentPanel(0xffffff, [0, 5.6, 0], [Math.PI / 2, 0, 0], [14, 14], 1.15);
|
||||
addEnvironmentPanel(0x3ceaff, [-5.4, -0.6, 0], [0, Math.PI / 2, 0], [4.2, 13], 1.55);
|
||||
addEnvironmentPanel(0x1e55cf, [5.2, 0.8, -0.8], [0, -Math.PI / 2, 0], [5, 12], 1.45);
|
||||
addEnvironmentPanel(0xffb663, [2.6, -1.2, 5], [0, 0, 0], [3.2, 9], 1.5);
|
||||
addEnvironmentPanel(0x7b62ff, [-2.2, 0.2, -5], [0, 0, 0], [4, 10], 1.35);
|
||||
addEnvironmentPanel(0xffffff, [-1.8, 1.2, 4.8], [0, 0, 0], [0.8, 9], 1.65);
|
||||
const pmremGenerator = new THREE.PMREMGenerator(renderer);
|
||||
pmremGenerator.compileCubemapShader();
|
||||
const environmentTarget = pmremGenerator.fromScene(environmentScene, lowPower ? 0.035 : 0.025, 0.1, 30);
|
||||
pmremGenerator.dispose();
|
||||
worldScene.environment = environmentTarget.texture;
|
||||
|
||||
const crystalShape = new THREE.Shape();
|
||||
crystalShape.moveTo(-1.43, -1.48);
|
||||
crystalShape.lineTo(1.36, -1.48);
|
||||
crystalShape.lineTo(0.06, 2.08);
|
||||
crystalShape.closePath();
|
||||
|
||||
const crystalGeometry = trackGeometry(new THREE.ExtrudeGeometry(crystalShape, {
|
||||
depth: 1.02,
|
||||
bevelEnabled: true,
|
||||
bevelSegments: lowPower ? 1 : 4,
|
||||
bevelSize: 0.065,
|
||||
bevelThickness: 0.1,
|
||||
curveSegments: 1,
|
||||
steps: 1
|
||||
}));
|
||||
crystalGeometry.translate(0, -0.22, -0.51);
|
||||
|
||||
const glassFrontMaterial = trackMaterial(new THREE.MeshPhysicalMaterial({
|
||||
color: 0xc8eaff,
|
||||
roughness: 0.008,
|
||||
metalness: 0,
|
||||
transmission: 0,
|
||||
thickness: 2.8,
|
||||
ior: 1.54,
|
||||
dispersion: lowPower ? 0.06 : 0.19,
|
||||
attenuationColor: new THREE.Color(0x62b8ef),
|
||||
attenuationDistance: 2.6,
|
||||
clearcoat: 1,
|
||||
clearcoatRoughness: 0.006,
|
||||
iridescence: lowPower ? 0.08 : 0.24,
|
||||
iridescenceIOR: 1.34,
|
||||
envMapIntensity: 0.65,
|
||||
specularIntensity: 1,
|
||||
specularColor: new THREE.Color(0xffffff),
|
||||
transparent: true,
|
||||
opacity: 0.055,
|
||||
side: THREE.DoubleSide,
|
||||
depthWrite: false
|
||||
}));
|
||||
glassFrontMaterial.userData.lightColor = new THREE.Color(0xc8eaff);
|
||||
glassFrontMaterial.userData.darkColor = new THREE.Color(0x8ed2f4);
|
||||
glassFrontMaterial.userData.lightOpacity = 0.055;
|
||||
glassFrontMaterial.userData.darkOpacity = 0.1;
|
||||
glassFrontMaterial.userData.lightEnv = 0.65;
|
||||
glassFrontMaterial.userData.darkEnv = 1.1;
|
||||
|
||||
const glassSideMaterial = trackMaterial(new THREE.MeshPhysicalMaterial({
|
||||
color: 0x2766ad,
|
||||
roughness: 0.015,
|
||||
metalness: 0.06,
|
||||
transmission: 0.4,
|
||||
thickness: 3.2,
|
||||
ior: 1.52,
|
||||
dispersion: lowPower ? 0.04 : 0.13,
|
||||
attenuationColor: new THREE.Color(0x164998),
|
||||
attenuationDistance: 1.45,
|
||||
clearcoat: 1,
|
||||
clearcoatRoughness: 0.008,
|
||||
iridescence: lowPower ? 0.04 : 0.16,
|
||||
iridescenceIOR: 1.3,
|
||||
envMapIntensity: 4.5,
|
||||
emissive: new THREE.Color(0x0d2e78),
|
||||
emissiveIntensity: 0.12,
|
||||
transparent: true,
|
||||
opacity: 0.94,
|
||||
side: THREE.DoubleSide,
|
||||
depthWrite: false
|
||||
}));
|
||||
glassSideMaterial.userData.lightColor = new THREE.Color(0x2766ad);
|
||||
glassSideMaterial.userData.darkColor = new THREE.Color(0x1d57a6);
|
||||
glassSideMaterial.userData.lightOpacity = 0.94;
|
||||
glassSideMaterial.userData.darkOpacity = 0.97;
|
||||
glassSideMaterial.userData.lightEnv = 4.5;
|
||||
glassSideMaterial.userData.darkEnv = 5.3;
|
||||
const crystalMaterials = [glassFrontMaterial, glassSideMaterial];
|
||||
|
||||
const crystalMesh = new THREE.Mesh(crystalGeometry, crystalMaterials);
|
||||
crystalMesh.castShadow = !lowPower;
|
||||
crystalMesh.receiveShadow = true;
|
||||
crystalMesh.renderOrder = 1;
|
||||
|
||||
function createCrystalFacet(points, color, opacity, additive, z) {
|
||||
const shape = new THREE.Shape();
|
||||
shape.moveTo(points[0][0], points[0][1]);
|
||||
points.slice(1).forEach(function (point) { shape.lineTo(point[0], point[1]); });
|
||||
shape.closePath();
|
||||
const geometry = trackGeometry(new THREE.ShapeGeometry(shape));
|
||||
const material = trackMaterial(new THREE.MeshBasicMaterial({
|
||||
color,
|
||||
transparent: true,
|
||||
opacity,
|
||||
side: THREE.DoubleSide,
|
||||
depthTest: false,
|
||||
depthWrite: false,
|
||||
toneMapped: false,
|
||||
blending: additive ? THREE.AdditiveBlending : THREE.NormalBlending
|
||||
}));
|
||||
material.userData.lightOpacity = opacity;
|
||||
material.userData.darkOpacity = Math.min(0.68, opacity * 1.28);
|
||||
const facet = new THREE.Mesh(geometry, material);
|
||||
facet.position.z = z || 0.625;
|
||||
facet.renderOrder = additive ? 4 : 3;
|
||||
return { facet, material };
|
||||
}
|
||||
|
||||
const crystalFacets = [
|
||||
createCrystalFacet([[-1.39, -1.65], [1.31, -1.65], [0.05, 1.86]], 0x93d7f1, 0.23, false, 0.615),
|
||||
createCrystalFacet([[-1.36, -1.68], [-0.9, -1.68], [0.05, 1.83], [-0.17, 1.44]], 0x129fd8, 0.42, false),
|
||||
createCrystalFacet([[0.05, 1.83], [0.3, 1.32], [1.29, -1.68], [0.84, -1.68]], 0x082f76, 0.6, false),
|
||||
createCrystalFacet([[-1.36, -1.68], [1.29, -1.68], [0.92, -1.23], [-1.02, -1.23]], 0x2d6fae, 0.38, false),
|
||||
createCrystalFacet([[0.02, 1.68], [0.25, 1.22], [-0.1, 0.84], [-0.25, 1.27]], 0xf8fdff, 0.18, true, 0.64),
|
||||
createCrystalFacet([[-0.25, 1.27], [-1.2, -1.34], [-0.56, -0.61], [-0.1, 0.84]], 0x17a9df, 0.48, false),
|
||||
createCrystalFacet([[-1.23, -1.36], [-0.56, -0.61], [0.18, -1.38]], 0x168bc9, 0.44, false, 0.646),
|
||||
createCrystalFacet([[-0.1, 0.84], [-0.56, -0.61], [0.2, -1.39], [0.46, -0.02]], 0x4ba9dd, 0.46, false),
|
||||
createCrystalFacet([[-0.56, -0.61], [0.46, -0.02], [0.18, -1.38]], 0xbfefff, 0.28, false, 0.648),
|
||||
createCrystalFacet([[-0.72, -0.82], [0.04, 0.74], [0.38, 0.04], [-0.02, -0.72]], 0xd5f5ff, 0.34, false, 0.638),
|
||||
createCrystalFacet([[0.25, 1.22], [0.64, 0.55], [0.46, -0.02], [-0.1, 0.84]], 0xfff8e8, 0.18, true, 0.64),
|
||||
createCrystalFacet([[0.46, -0.02], [0.64, 0.55], [1.12, -1.34], [0.2, -1.39]], 0x0a376e, 0.54, false),
|
||||
createCrystalFacet([[-1.2, -1.34], [0.2, -1.39], [1.12, -1.34], [0.82, -1.04], [-0.86, -1.02]], 0x5acff4, 0.25, true, 0.64),
|
||||
createCrystalFacet([[0.3, 1.32], [0.64, 0.55], [1.12, -1.34], [1.29, -1.68]], 0x06265b, 0.44, false),
|
||||
createCrystalFacet([[0.38, 0.04], [0.72, -0.36], [1.04, -1.2], [0.18, -1.32]], 0xffc982, 0.13, true, 0.644),
|
||||
createCrystalFacet([[-0.17, 1.44], [-0.1, 0.84], [-0.56, -0.61], [-0.9, -1.68]], 0xa7edff, 0.16, true, 0.64),
|
||||
createCrystalFacet([[0.02, 1.68], [0.3, 1.32], [0.25, 1.22]], 0xffffff, 0.25, true, 0.645),
|
||||
createCrystalFacet([[0.02, 1.7], [0.29, 1.31], [0.13, 1.04], [-0.06, 1.35]], 0xff82c8, 0.16, true, 0.65),
|
||||
createCrystalFacet([[0.38, -0.03], [0.83, -0.54], [1.03, -1.16], [0.64, -0.8]], 0xffb867, 0.13, true, 0.651)
|
||||
];
|
||||
const reflectionMaterials = crystalFacets.map(function (entry) { return entry.material; });
|
||||
|
||||
const spectrumGeometry = trackGeometry(new THREE.ShapeGeometry(crystalShape));
|
||||
spectrumGeometry.translate(0, -0.22, 0);
|
||||
const spectrumMaterial = trackMaterial(new THREE.ShaderMaterial({
|
||||
uniforms: {
|
||||
uTime: uniforms.uTime,
|
||||
uDark: uniforms.uDark
|
||||
},
|
||||
transparent: true,
|
||||
depthTest: false,
|
||||
depthWrite: false,
|
||||
blending: THREE.AdditiveBlending,
|
||||
vertexShader: `
|
||||
varying vec2 vUv;
|
||||
varying vec3 vLocal;
|
||||
void main() {
|
||||
vUv = uv;
|
||||
vLocal = position;
|
||||
gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
|
||||
}
|
||||
`,
|
||||
fragmentShader: `
|
||||
precision highp float;
|
||||
varying vec2 vUv;
|
||||
varying vec3 vLocal;
|
||||
uniform float uTime;
|
||||
uniform float uDark;
|
||||
|
||||
vec3 spectrum(float t) {
|
||||
return 0.56 + 0.44 * cos(6.28318 * (vec3(0.02, 0.35, 0.68) + t));
|
||||
}
|
||||
|
||||
void main() {
|
||||
float diagonalA = exp(-abs(vLocal.y - (0.37 * vLocal.x - 0.64)) * 24.0);
|
||||
float diagonalB = exp(-abs(vLocal.y - (-0.22 * vLocal.x - 0.22)) * 34.0);
|
||||
float spectralShard = pow(max(0.0, sin(vLocal.x * 8.4 - vLocal.y * 5.7 + uTime * 0.42)), 44.0);
|
||||
float strength = diagonalA * 0.2 + diagonalB * 0.12 + spectralShard * 0.075;
|
||||
vec3 color = spectrum(vLocal.x * 0.16 + vLocal.y * 0.08 + uTime * 0.018);
|
||||
color += vec3(0.76, 0.94, 1.0) * diagonalA * 0.42;
|
||||
gl_FragColor = vec4(color * strength, strength * mix(0.66, 0.9, uDark));
|
||||
}
|
||||
`
|
||||
}));
|
||||
const spectrumMesh = new THREE.Mesh(spectrumGeometry, spectrumMaterial);
|
||||
spectrumMesh.position.z = 0.655;
|
||||
spectrumMesh.renderOrder = 5;
|
||||
spectrumMesh.userData.noReflection = true;
|
||||
|
||||
function createLightStreak(start, end, color, width, opacity, z) {
|
||||
const deltaX = end[0] - start[0];
|
||||
const deltaY = end[1] - start[1];
|
||||
const length = Math.hypot(deltaX, deltaY);
|
||||
const group = new THREE.Group();
|
||||
[
|
||||
{ scale: 7.2, alpha: opacity * 0.12, z: (z || 0.67) - 0.006 },
|
||||
{ scale: 2.8, alpha: opacity * 0.28, z: (z || 0.67) - 0.002 },
|
||||
{ scale: 1, alpha: opacity, z: z || 0.67 }
|
||||
].forEach(function (layer) {
|
||||
const geometry = trackGeometry(new THREE.PlaneGeometry(length, width * layer.scale));
|
||||
const material = trackMaterial(new THREE.MeshBasicMaterial({
|
||||
color,
|
||||
transparent: true,
|
||||
opacity: layer.alpha,
|
||||
depthTest: false,
|
||||
depthWrite: false,
|
||||
blending: THREE.AdditiveBlending,
|
||||
side: THREE.DoubleSide
|
||||
}));
|
||||
const beam = new THREE.Mesh(geometry, material);
|
||||
beam.position.set((start[0] + end[0]) * 0.5, (start[1] + end[1]) * 0.5, layer.z);
|
||||
beam.rotation.z = Math.atan2(deltaY, deltaX);
|
||||
beam.renderOrder = 6;
|
||||
group.add(beam);
|
||||
});
|
||||
group.userData.noReflection = true;
|
||||
return group;
|
||||
}
|
||||
|
||||
const cyanStreak = createLightStreak([-1.42, -1.03], [1.32, -0.16], 0x8df6ff, 0.011, 0.92);
|
||||
const warmStreak = createLightStreak([0.24, -0.13], [1.47, -0.4], 0xffc36c, 0.012, 0.82, 0.69);
|
||||
const violetStreak = createLightStreak([-0.38, -0.52], [0.64, -0.75], 0xb478ff, 0.009, 0.68, 0.69);
|
||||
const rainbowStreak = createLightStreak([-0.08, 0.42], [0.62, 0.04], 0xff78d7, 0.007, 0.48, 0.695);
|
||||
|
||||
const sparklePositions = [];
|
||||
const sparkleCount = lowPower ? 26 : 74;
|
||||
for (let index = 0; index < sparkleCount; index += 1) {
|
||||
const seedA = Math.abs(Math.sin(index * 91.73 + 0.47));
|
||||
const seedB = Math.abs(Math.sin(index * 37.19 + 1.21));
|
||||
const y = -1.57 + seedA * 2.28;
|
||||
const widthAtY = Math.max(0.08, 1.18 * (1 - (y + 1.57) / 3.4));
|
||||
sparklePositions.push((seedB * 2 - 1) * widthAtY, y, 0.69 + (index % 5) * 0.001);
|
||||
}
|
||||
const sparkleGeometry = trackGeometry(new THREE.BufferGeometry());
|
||||
sparkleGeometry.setAttribute('position', new THREE.Float32BufferAttribute(sparklePositions, 3));
|
||||
const sparkleMaterial = trackMaterial(new THREE.ShaderMaterial({
|
||||
uniforms: { uTime: uniforms.uTime, uDark: uniforms.uDark },
|
||||
transparent: true,
|
||||
depthTest: false,
|
||||
depthWrite: false,
|
||||
blending: THREE.AdditiveBlending,
|
||||
vertexShader: `
|
||||
uniform float uTime;
|
||||
varying float vPulse;
|
||||
void main() {
|
||||
vec4 mvPosition = modelViewMatrix * vec4(position, 1.0);
|
||||
vPulse = 0.55 + 0.45 * sin(uTime * 1.9 + position.x * 11.0 + position.y * 7.0);
|
||||
gl_PointSize = (0.075 + vPulse * 0.085) * (260.0 / -mvPosition.z);
|
||||
gl_Position = projectionMatrix * mvPosition;
|
||||
}
|
||||
`,
|
||||
fragmentShader: `
|
||||
precision highp float;
|
||||
varying float vPulse;
|
||||
uniform float uDark;
|
||||
void main() {
|
||||
float d = length(gl_PointCoord - 0.5);
|
||||
float alpha = smoothstep(0.5, 0.06, d) * vPulse * mix(0.34, 0.72, uDark);
|
||||
vec3 color = mix(vec3(0.48, 0.88, 1.0), vec3(1.0, 0.72, 0.48), vPulse * 0.34);
|
||||
gl_FragColor = vec4(color, alpha);
|
||||
}
|
||||
`
|
||||
}));
|
||||
const crystalSparkles = new THREE.Points(sparkleGeometry, sparkleMaterial);
|
||||
crystalSparkles.renderOrder = 7;
|
||||
crystalSparkles.userData.noReflection = true;
|
||||
|
||||
const edgeGeometry = trackGeometry(new THREE.EdgesGeometry(crystalGeometry, 16));
|
||||
const edgeMaterial = trackMaterial(new THREE.LineBasicMaterial({
|
||||
color: 0xc5f3ff,
|
||||
transparent: true,
|
||||
depthTest: false,
|
||||
opacity: 0.72
|
||||
}));
|
||||
const crystalEdges = new THREE.LineSegments(edgeGeometry, edgeMaterial);
|
||||
crystalEdges.renderOrder = 7;
|
||||
|
||||
const glintGeometry = trackGeometry(new THREE.PlaneGeometry(1.15, 1.15));
|
||||
const glintMaterial = trackMaterial(new THREE.ShaderMaterial({
|
||||
uniforms: { uTime: uniforms.uTime, uDark: uniforms.uDark },
|
||||
transparent: true,
|
||||
depthTest: false,
|
||||
depthWrite: false,
|
||||
blending: THREE.AdditiveBlending,
|
||||
vertexShader: `varying vec2 vUv; void main(){vUv=uv;gl_Position=projectionMatrix*modelViewMatrix*vec4(position,1.0);}`,
|
||||
fragmentShader: `
|
||||
precision highp float;
|
||||
varying vec2 vUv;
|
||||
uniform float uTime;
|
||||
uniform float uDark;
|
||||
void main(){
|
||||
vec2 p=vUv-0.5;
|
||||
float core=exp(-length(p)*24.0);
|
||||
float cross=exp(-abs(p.x)*95.0)*exp(-abs(p.y)*4.5)+exp(-abs(p.y)*95.0)*exp(-abs(p.x)*4.5);
|
||||
float pulse=0.86+0.14*sin(uTime*1.6);
|
||||
vec3 color=mix(vec3(0.42,0.86,1.0),vec3(1.0,0.42,0.92),smoothstep(-0.2,0.18,p.x));
|
||||
gl_FragColor=vec4(color*(core*1.7+cross*0.72)*pulse,(core+cross*0.54)*mix(0.72,1.0,uDark));
|
||||
}
|
||||
`
|
||||
}));
|
||||
const baseGlint = new THREE.Mesh(glintGeometry, glintMaterial);
|
||||
baseGlint.position.set(-0.18, -1.6, 0.86);
|
||||
baseGlint.scale.setScalar(0.94);
|
||||
baseGlint.renderOrder = 8;
|
||||
|
||||
const crystalGroup = new THREE.Group();
|
||||
crystalGroup.add(
|
||||
crystalMesh,
|
||||
...crystalFacets.map(function (entry) { return entry.facet; }),
|
||||
spectrumMesh,
|
||||
cyanStreak,
|
||||
warmStreak,
|
||||
violetStreak,
|
||||
rainbowStreak,
|
||||
crystalSparkles,
|
||||
crystalEdges,
|
||||
baseGlint
|
||||
);
|
||||
crystalGroup.rotation.set(0.045, -0.44, -0.018);
|
||||
|
||||
// Preserve the authored, high-frequency refraction from the approved visual
|
||||
// while keeping it inside the live Three.js composition. The procedural
|
||||
// crystal underneath supplies parallax, glow, reflection and the dark theme.
|
||||
let referenceTexture = null;
|
||||
const referenceGeometry = trackGeometry(new THREE.PlaneGeometry(3.29, 3.7));
|
||||
const referenceMaterial = trackMaterial(new THREE.MeshBasicMaterial({
|
||||
transparent: true,
|
||||
opacity: initialDark ? 0.92 : 0.97,
|
||||
depthTest: false,
|
||||
depthWrite: false,
|
||||
toneMapped: false
|
||||
}));
|
||||
const referenceCrystal = new THREE.Mesh(referenceGeometry, referenceMaterial);
|
||||
referenceCrystal.position.set(-0.29, 0.05, 1.28);
|
||||
referenceCrystal.renderOrder = 24;
|
||||
referenceCrystal.userData.noReflection = true;
|
||||
|
||||
const referenceReflectionMaterial = trackMaterial(new THREE.ShaderMaterial({
|
||||
uniforms: {
|
||||
uMap: { value: null },
|
||||
uOpacity: { value: initialDark ? 0.14 : 0.22 }
|
||||
},
|
||||
transparent: true,
|
||||
depthTest: false,
|
||||
depthWrite: false,
|
||||
toneMapped: false,
|
||||
vertexShader: `
|
||||
varying vec2 vUv;
|
||||
void main() {
|
||||
vUv = uv;
|
||||
gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
|
||||
}
|
||||
`,
|
||||
fragmentShader: `
|
||||
precision highp float;
|
||||
varying vec2 vUv;
|
||||
uniform sampler2D uMap;
|
||||
uniform float uOpacity;
|
||||
void main() {
|
||||
vec4 sampleColor = texture2D(uMap, vUv);
|
||||
float fade = pow(clamp(1.0 - vUv.y, 0.0, 1.0), 2.1);
|
||||
vec3 reflected = mix(sampleColor.rgb, vec3(0.56, 0.76, 1.0), 0.38);
|
||||
gl_FragColor = vec4(reflected, sampleColor.a * fade * uOpacity);
|
||||
}
|
||||
`
|
||||
}));
|
||||
const referenceReflection = new THREE.Mesh(referenceGeometry, referenceReflectionMaterial);
|
||||
referenceReflection.position.set(-0.29, -3.06, 0.96);
|
||||
referenceReflection.scale.set(1, -0.68, 1);
|
||||
referenceReflection.renderOrder = 2;
|
||||
referenceReflection.visible = false;
|
||||
|
||||
new THREE.TextureLoader().load(
|
||||
'./assets/prism-reference-light.png',
|
||||
function (texture) {
|
||||
referenceTexture = texture;
|
||||
texture.colorSpace = THREE.SRGBColorSpace;
|
||||
texture.minFilter = THREE.LinearMipmapLinearFilter;
|
||||
texture.magFilter = THREE.LinearFilter;
|
||||
referenceMaterial.map = texture;
|
||||
referenceMaterial.needsUpdate = true;
|
||||
referenceReflectionMaterial.uniforms.uMap.value = texture;
|
||||
referenceReflection.visible = true;
|
||||
root.dataset.referenceCrystal = 'loaded';
|
||||
renderFrame(performance.now());
|
||||
},
|
||||
undefined,
|
||||
function () {
|
||||
referenceCrystal.visible = false;
|
||||
root.dataset.referenceCrystal = 'error';
|
||||
}
|
||||
);
|
||||
|
||||
const crystalReflection = crystalGroup.clone(true);
|
||||
crystalReflection.traverse(function (object) {
|
||||
if (object.userData.noReflection) {
|
||||
object.visible = false;
|
||||
return;
|
||||
}
|
||||
if (!object.material) return;
|
||||
const materials = Array.isArray(object.material) ? object.material : [object.material];
|
||||
const clonedMaterials = materials.map(function (material) {
|
||||
const clone = trackMaterial(material.clone());
|
||||
clone.transparent = true;
|
||||
clone.depthWrite = false;
|
||||
clone.depthTest = false;
|
||||
clone.opacity = material.isLineBasicMaterial ? 0.08 : Math.min(0.14, (material.opacity || 1) * 0.16);
|
||||
if (clone.isMeshPhysicalMaterial) {
|
||||
clone.transmission = 0;
|
||||
clone.roughness = 0.24;
|
||||
clone.metalness = 0.08;
|
||||
clone.color = new THREE.Color(0x5ba8ff);
|
||||
}
|
||||
return clone;
|
||||
});
|
||||
object.material = Array.isArray(object.material) ? clonedMaterials : clonedMaterials[0];
|
||||
object.renderOrder = 0;
|
||||
});
|
||||
crystalReflection.scale.set(1, -1, 1);
|
||||
crystalReflection.position.y = -3.42;
|
||||
|
||||
const floorEffects = new THREE.Group();
|
||||
function createFloorRay(points, color, opacity) {
|
||||
const geometry = trackGeometry(new THREE.BufferGeometry());
|
||||
const positions = [];
|
||||
points.forEach(function (point) { positions.push(point[0], -1.705, point[1]); });
|
||||
geometry.setAttribute('position', new THREE.Float32BufferAttribute(positions, 3));
|
||||
geometry.computeVertexNormals();
|
||||
const material = trackMaterial(new THREE.MeshBasicMaterial({
|
||||
color,
|
||||
transparent: true,
|
||||
opacity,
|
||||
side: THREE.DoubleSide,
|
||||
depthWrite: false,
|
||||
blending: THREE.AdditiveBlending
|
||||
}));
|
||||
material.userData.lightOpacity = opacity;
|
||||
material.userData.darkOpacity = opacity * 1.35;
|
||||
const ray = new THREE.Mesh(geometry, material);
|
||||
floorEffects.add(ray);
|
||||
return material;
|
||||
}
|
||||
const floorRayMaterials = [
|
||||
createFloorRay([[-0.95, 0.2], [-5.6, 4.8], [-2.7, 4.8]], 0x6cecff, 0.2),
|
||||
createFloorRay([[-0.2, 0.3], [-2.2, 5.4], [-0.55, 5.4]], 0x7f6dff, 0.14),
|
||||
createFloorRay([[0.54, 0.14], [1.2, 5.5], [3.6, 5.5]], 0xffd58b, 0.16),
|
||||
createFloorRay([[0.72, 0.12], [3.4, 4.6], [5.4, 4.6]], 0x4f83ff, 0.12)
|
||||
];
|
||||
|
||||
const worldRoot = new THREE.Group();
|
||||
worldRoot.add(floorEffects, crystalReflection, referenceReflection, crystalGroup, referenceCrystal);
|
||||
worldScene.add(worldRoot);
|
||||
|
||||
const floorGeometry = trackGeometry(new THREE.PlaneGeometry(10, 10));
|
||||
const floorMaterial = trackMaterial(new THREE.MeshPhysicalMaterial({
|
||||
color: 0xd8e8ff,
|
||||
roughness: 0.2,
|
||||
metalness: 0.08,
|
||||
envMapIntensity: 1.6,
|
||||
transparent: true,
|
||||
opacity: 0.22,
|
||||
depthWrite: false,
|
||||
side: THREE.DoubleSide
|
||||
}));
|
||||
const floor = new THREE.Mesh(floorGeometry, floorMaterial);
|
||||
floor.rotation.x = -Math.PI / 2;
|
||||
floor.position.set(0, -1.71, 0);
|
||||
floor.receiveShadow = !lowPower;
|
||||
worldScene.add(floor);
|
||||
|
||||
const floorShadowMaterial = trackMaterial(new THREE.ShadowMaterial({ color: 0x0b3472, opacity: 0.18 }));
|
||||
const floorShadow = new THREE.Mesh(floorGeometry, floorShadowMaterial);
|
||||
floorShadow.rotation.x = -Math.PI / 2;
|
||||
floorShadow.position.set(0, -1.695, 0);
|
||||
floorShadow.receiveShadow = !lowPower;
|
||||
worldScene.add(floorShadow);
|
||||
|
||||
const restPointer = new THREE.Vector2(0.58, 0.44);
|
||||
const targetMouse = restPointer.clone();
|
||||
const currentMouse = targetMouse.clone();
|
||||
const lightEdgeColor = new THREE.Color(0xbfeeff);
|
||||
const darkEdgeColor = new THREE.Color(0x73e9ff);
|
||||
const lightFloorColor = new THREE.Color(0xd9eaff);
|
||||
const darkFloorColor = new THREE.Color(0x0b2746);
|
||||
const lightReferenceColor = new THREE.Color(0xffffff);
|
||||
const darkReferenceColor = new THREE.Color(0xb7dbff);
|
||||
const currentColor = new THREE.Color();
|
||||
let targetDark = initialDark;
|
||||
let heroVisible = true;
|
||||
let lastFrame = 0;
|
||||
let frameInterval = staticMode ? Infinity : (window.innerWidth < 900 ? 1000 / 30 : 1000 / 45);
|
||||
const startTime = performance.now();
|
||||
|
||||
function updateWorld(elapsed) {
|
||||
const dark = uniforms.uDark.value;
|
||||
const floatOffset = staticMode ? 0 : Math.sin(elapsed * 0.48) * 0.075;
|
||||
crystalGroup.position.y = floatOffset;
|
||||
crystalGroup.rotation.x = 0.02 + Math.sin(elapsed * 0.28) * 0.025 + (currentMouse.y - 0.5) * 0.1;
|
||||
crystalGroup.rotation.y = -0.44 + Math.sin(elapsed * 0.18) * 0.035 + (currentMouse.x - 0.5) * 0.1;
|
||||
crystalGroup.rotation.z = -0.018 + Math.sin(elapsed * 0.22) * 0.012;
|
||||
const pointerTiltX = (0.5 - currentMouse.y) * 0.16;
|
||||
const pointerTiltY = (currentMouse.x - 0.5) * 0.28;
|
||||
const pointerShiftX = (currentMouse.x - 0.5) * 0.11;
|
||||
const pointerShiftY = (0.5 - currentMouse.y) * 0.06;
|
||||
referenceCrystal.position.x = -0.29 + pointerShiftX;
|
||||
referenceCrystal.position.y = 0.05 + floatOffset * 0.72 + pointerShiftY;
|
||||
referenceCrystal.rotation.x = pointerTiltX;
|
||||
referenceCrystal.rotation.y = pointerTiltY;
|
||||
referenceCrystal.rotation.z = staticMode ? 0 : Math.sin(elapsed * 0.22) * 0.0035;
|
||||
referenceReflection.position.x = -0.29 + pointerShiftX * 0.7;
|
||||
referenceReflection.position.y = -3.06 - floatOffset * 0.46;
|
||||
referenceReflection.rotation.x = -pointerTiltX * 0.48;
|
||||
referenceReflection.rotation.y = pointerTiltY * 0.62;
|
||||
referenceReflection.rotation.z = -referenceCrystal.rotation.z * 0.5;
|
||||
referenceMaterial.opacity = THREE.MathUtils.lerp(0.97, 0.92, dark);
|
||||
referenceMaterial.color.copy(currentColor.copy(lightReferenceColor).lerp(darkReferenceColor, dark));
|
||||
referenceCrystal.visible = Boolean(referenceMaterial.map);
|
||||
referenceReflectionMaterial.uniforms.uOpacity.value = THREE.MathUtils.lerp(0.22, 0.14, dark);
|
||||
referenceReflection.visible = Boolean(referenceMaterial.map);
|
||||
crystalGroup.visible = false;
|
||||
crystalReflection.visible = false;
|
||||
crystalReflection.rotation.copy(crystalGroup.rotation);
|
||||
crystalReflection.position.y = -3.42 - floatOffset;
|
||||
worldRoot.rotation.y = (currentMouse.x - 0.5) * 0.03;
|
||||
worldRoot.rotation.x = (0.5 - currentMouse.y) * 0.02;
|
||||
|
||||
crystalMaterials.forEach(function (material) {
|
||||
material.color.copy(currentColor.copy(material.userData.lightColor).lerp(material.userData.darkColor, dark));
|
||||
material.opacity = THREE.MathUtils.lerp(material.userData.lightOpacity, material.userData.darkOpacity, dark);
|
||||
material.envMapIntensity = THREE.MathUtils.lerp(material.userData.lightEnv, material.userData.darkEnv, dark);
|
||||
});
|
||||
glassSideMaterial.emissiveIntensity = THREE.MathUtils.lerp(0.12, 0.2, dark);
|
||||
reflectionMaterials.forEach(function (material) {
|
||||
material.opacity = THREE.MathUtils.lerp(material.userData.lightOpacity, material.userData.darkOpacity, dark);
|
||||
});
|
||||
floorRayMaterials.forEach(function (material) {
|
||||
material.opacity = THREE.MathUtils.lerp(material.userData.lightOpacity, material.userData.darkOpacity, dark);
|
||||
});
|
||||
edgeMaterial.color.copy(currentColor.copy(lightEdgeColor).lerp(darkEdgeColor, dark));
|
||||
edgeMaterial.opacity = THREE.MathUtils.lerp(0.72, 0.9, dark);
|
||||
floorMaterial.color.copy(currentColor.copy(lightFloorColor).lerp(darkFloorColor, dark));
|
||||
floorMaterial.opacity = THREE.MathUtils.lerp(0.22, 0.13, dark);
|
||||
floorMaterial.envMapIntensity = THREE.MathUtils.lerp(1.6, 2.4, dark);
|
||||
floorShadowMaterial.opacity = THREE.MathUtils.lerp(0.16, 0.3, dark);
|
||||
hemisphereLight.intensity = THREE.MathUtils.lerp(1.8, 1.25, dark);
|
||||
keyLight.intensity = THREE.MathUtils.lerp(2.4, 2.6, dark);
|
||||
cyanLight.intensity = THREE.MathUtils.lerp(18, 26, dark);
|
||||
warmLight.intensity = THREE.MathUtils.lerp(13, 20, dark);
|
||||
}
|
||||
|
||||
function renderFrame(now) {
|
||||
if (!staticMode && (!heroVisible || document.hidden || now - lastFrame < frameInterval)) return;
|
||||
lastFrame = now;
|
||||
const elapsed = staticMode ? 1.4 : (now - startTime) / 1000;
|
||||
if (staticMode) {
|
||||
uniforms.uDark.value = targetDark;
|
||||
uniforms.uTime.value = 1.4;
|
||||
} else {
|
||||
uniforms.uDark.value += (targetDark - uniforms.uDark.value) * 0.085;
|
||||
currentMouse.lerp(targetMouse, 0.055);
|
||||
uniforms.uMouse.value.copy(currentMouse);
|
||||
uniforms.uTime.value = elapsed;
|
||||
}
|
||||
updateWorld(elapsed);
|
||||
renderer.clear(true, true, true);
|
||||
renderer.render(backgroundScene, backgroundCamera);
|
||||
renderer.clearDepth();
|
||||
renderer.render(worldScene, worldCamera);
|
||||
}
|
||||
|
||||
function resize() {
|
||||
const rect = root.getBoundingClientRect();
|
||||
const width = Math.max(1, Math.round(rect.width));
|
||||
const height = Math.max(1, Math.round(rect.height));
|
||||
const maxDpr = window.innerWidth < 900 ? 1 : 1.5;
|
||||
renderer.setPixelRatio(Math.min(window.devicePixelRatio || 1, maxDpr));
|
||||
renderer.setSize(width, height, false);
|
||||
uniforms.uResolution.value.set(width * renderer.getPixelRatio(), height * renderer.getPixelRatio());
|
||||
|
||||
const aspect = width / height;
|
||||
worldCamera.aspect = aspect;
|
||||
worldCamera.fov = aspect < 0.75 ? 38 : 33;
|
||||
worldCamera.updateProjectionMatrix();
|
||||
if (aspect > 1.1) {
|
||||
worldRoot.position.set(Math.min(1.92, aspect * 1.15), -0.02, 0);
|
||||
worldRoot.scale.setScalar(0.9);
|
||||
} else {
|
||||
worldRoot.position.set(0.08, -1.55, 0);
|
||||
worldRoot.scale.setScalar(0.56);
|
||||
}
|
||||
floor.position.set(worldRoot.position.x, worldRoot.position.y - 1.71 * worldRoot.scale.x, 0);
|
||||
floorShadow.position.set(worldRoot.position.x, worldRoot.position.y - 1.695 * worldRoot.scale.x, 0);
|
||||
frameInterval = staticMode ? Infinity : (width < 900 ? 1000 / 30 : 1000 / 45);
|
||||
renderFrame(performance.now());
|
||||
}
|
||||
|
||||
const resizeObserver = new ResizeObserver(resize);
|
||||
resizeObserver.observe(root);
|
||||
|
||||
const hero = document.getElementById('home');
|
||||
if (hero) {
|
||||
hero.addEventListener('pointermove', function (event) {
|
||||
if (staticMode) return;
|
||||
const rect = hero.getBoundingClientRect();
|
||||
targetMouse.set(
|
||||
THREE.MathUtils.clamp((event.clientX - rect.left) / rect.width, 0, 1),
|
||||
THREE.MathUtils.clamp((event.clientY - rect.top) / rect.height, 0, 1)
|
||||
);
|
||||
}, { passive: true });
|
||||
hero.addEventListener('pointerleave', function () { targetMouse.copy(restPointer); }, { passive: true });
|
||||
|
||||
const visibilityObserver = new IntersectionObserver(function (entries) {
|
||||
heroVisible = entries[0] ? entries[0].isIntersecting : true;
|
||||
if (heroVisible && staticMode) renderFrame(performance.now());
|
||||
}, { rootMargin: '120px 0px' });
|
||||
visibilityObserver.observe(hero);
|
||||
}
|
||||
|
||||
window.addEventListener('roncarve:themechange', function (event) {
|
||||
targetDark = event.detail.resolved === 'dark' ? 1 : 0;
|
||||
if (staticMode) renderFrame(performance.now());
|
||||
});
|
||||
|
||||
canvas.addEventListener('webglcontextlost', function (event) {
|
||||
event.preventDefault();
|
||||
root.classList.remove('is-ready');
|
||||
root.classList.add('has-error');
|
||||
renderer.setAnimationLoop(null);
|
||||
});
|
||||
|
||||
resize();
|
||||
renderFrame(performance.now());
|
||||
root.classList.add('is-ready');
|
||||
if (!staticMode) renderer.setAnimationLoop(renderFrame);
|
||||
|
||||
window.addEventListener('beforeunload', function () {
|
||||
renderer.setAnimationLoop(null);
|
||||
resizeObserver.disconnect();
|
||||
backgroundGeometry.dispose();
|
||||
backgroundMaterial.dispose();
|
||||
disposableGeometries.forEach(function (geometry) { geometry.dispose(); });
|
||||
disposableMaterials.forEach(function (material) { material.dispose(); });
|
||||
if (referenceTexture) referenceTexture.dispose();
|
||||
environmentTarget.dispose();
|
||||
renderer.dispose();
|
||||
}, { once: true });
|
||||
}
|
||||
}
|
||||
Vendored
+6
File diff suppressed because one or more lines are too long
Vendored
+6
File diff suppressed because one or more lines are too long
Reference in New Issue
Block a user