diff --git a/static/heaven-loading.js b/static/heaven-loading.js index ce816a7..022f244 100644 --- a/static/heaven-loading.js +++ b/static/heaven-loading.js @@ -1,20 +1,23 @@ (function exposeHeavenLoading(global) { "use strict"; - const DARK_INK = "#0b0e1e"; - const INK = "#e6c37a"; - const INK_BRIGHT = "#f7e3b4"; - const GOLD = "#e6c37a"; - const GOLD_BRIGHT = "#f7e3b4"; - const CINNABAR = "#d8564a"; - const DIM = "rgba(216,205,180,0.55)"; + const PAPER = "#fdfcf8"; + const PAPER_CENTER = "#f1e8d9"; + const NODE_TEXT = "#fffaf0"; + const INK = "#68493d"; + const INK_BRIGHT = "#963f37"; + const GOLD = "#80533e"; + const GOLD_BRIGHT = "#b64e43"; + const CINNABAR = "#b94038"; + const DIM = "rgba(68,57,49,0.62)"; + const PARTICLE_COLORS = ["#a94b42", "#456b62", "#506b85"]; const SERIF = '"Noto Serif SC","Songti SC","STSong","SimSun",serif'; const ELEMENT_COLORS = { - 木: "#7fb069", - 火: "#d8564a", - 土: "#d9a441", - 金: "#e6dec4", - 水: "#5b84b8", + 木: "#4f7a4a", + 火: "#b3483d", + 土: "#96702c", + 金: "#70685b", + 水: "#496d92", }; const QI6 = [ { name: "厥阴风木", element: "木" }, @@ -101,6 +104,7 @@ radius: 0.3 + random() * 1.3, phase: random() * Math.PI * 2, speed: 0.00015 + random() * 0.0004, + colorIndex: Math.floor(random() * PARTICLE_COLORS.length), })); } @@ -202,16 +206,16 @@ const cx = width / 2; const cy = height * 0.44; const gradient = ctx.createRadialGradient(cx, cy, 0, cx, cy, Math.max(width, height) * 0.75); - gradient.addColorStop(0, "#10142a"); - gradient.addColorStop(0.45, "#0b0e1e"); - gradient.addColorStop(1, "#05060d"); + gradient.addColorStop(0, PAPER_CENTER); + gradient.addColorStop(0.52, "#faf7ef"); + gradient.addColorStop(1, PAPER); ctx.fillStyle = gradient; ctx.fillRect(0, 0, width, height); for (const star of this.stars) { const twinkle = 0.35 + 0.65 * (0.5 + 0.5 * Math.sin(star.phase + now * 0.0012)); const alpha = twinkle * 0.5; ctx.globalAlpha = alpha; - ctx.fillStyle = GOLD; + ctx.fillStyle = PARTICLE_COLORS[star.colorIndex]; const y = ((star.y + now * star.speed) % 1) * height; ctx.fillRect(star.x * width, y, star.radius, star.radius); } @@ -459,7 +463,7 @@ if (freshness > 0) { const ctx = this.context; const gradient = ctx.createLinearGradient(cx, cy, x, y); - gradient.addColorStop(0, "rgba(230,195,122,0)"); + gradient.addColorStop(0, "rgba(128,83,62,0)"); gradient.addColorStop(1, GOLD); this.line(cx, cy, x, y, gradient, alpha * freshness * 0.35); } @@ -527,7 +531,7 @@ const y = degrees === null ? cy : cy + Math.sin(degrees * Math.PI / 180) * radius * progress; positions[element] = [x, y]; this.node(x, y, nodeRadius * progress, ELEMENT_COLORS[element], alpha * progress, 16); - this.label(element, x, y + 0.5, Math.round(nodeRadius * 1.15), DARK_INK, alpha * progress, "600"); + this.label(element, x, y + 0.5, Math.round(nodeRadius * 1.15), NODE_TEXT, alpha * progress, "600"); const direction = element === "土" ? "中央土" : { 木: "东方木", 火: "南方火", 金: "西方金", 水: "北方水" }[element]; this.label(direction, x, y + nodeRadius + 14, 12, ELEMENT_COLORS[element], alpha * progress * 0.75); }); diff --git a/static/styles.css b/static/styles.css index 723c2ef..8495e7b 100644 --- a/static/styles.css +++ b/static/styles.css @@ -11825,7 +11825,7 @@ button.account-role-badge:focus-visible { outline: 2px solid var(--blue); outlin min-height: 360px; position: relative; overflow: hidden; - background: #05060d; + background: #fdfcf8; } .heaven-reading-loading[hidden] { display: none; } .heaven-reading-loading canvas {