From 2f165fbd4253fee14e9216efc77e247b83268734 Mon Sep 17 00:00:00 2001 From: NowScott Date: Tue, 17 Mar 2026 23:58:26 +0800 Subject: [PATCH 1/5] =?UTF-8?q?fix:=20=E7=A7=BB=E9=99=A4=E9=87=8D=E5=A4=8D?= =?UTF-8?q?=E7=9A=84favicon=E9=93=BE=E6=8E=A5=E5=B9=B6=E4=BF=AE=E5=A4=8D?= =?UTF-8?q?=E6=9A=97=E8=89=B2=E6=A8=A1=E5=BC=8F=E8=83=8C=E6=99=AF?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 将背景样式移至伪元素以修复暗色模式下的叠加问题，同时删除冗余的favicon链接 --- pages/_document.js | 1 - styles/globals.css | 15 +++++++++++++++ 2 files changed, 15 insertions(+), 1 deletion(-) diff --git a/pages/_document.js b/pages/_document.js index 4c3f0d3..876fd8d 100644 --- a/pages/_document.js +++ b/pages/_document.js @@ -7,7 +7,6 @@ class MyDocument extends Document { - {/* warm-neutral */} diff --git a/styles/globals.css b/styles/globals.css index a4cf14a..aaac219 100644 --- a/styles/globals.css +++ b/styles/globals.css @@ -46,6 +46,16 @@ html, body { } .app-background { + position: relative; + isolation: isolate; +} + +.app-background::before { + content: ""; + position: fixed; + inset: 0; + z-index: -1; + pointer-events: none; background-color: #faf6ef; background-image: radial-gradient(1100px 760px at var(--paper-glow-x, 14%) var(--paper-glow-y, 8%), rgb(255 255 255 / var(--paper-glow-alpha, 0.62)) 0%, transparent 64%), @@ -57,6 +67,11 @@ html, body { } .dark .app-background { + /* Remove background from the element itself in dark mode */ + background: transparent; +} + +.dark .app-background::before { background-color: #000000; background-image: radial-gradient(1080px 760px at var(--shadow-glow-x, 18%) var(--shadow-glow-y, 8%), rgb(56 189 248 / var(--shadow-glow-alpha, 0.18)) 0%, transparent 64%), From 4f23b13561f0e6491dc496183f37ee6355d07bbf Mon Sep 17 00:00:00 2001 From: NowScott Date: Wed, 18 Mar 2026 00:05:04 +0800 Subject: [PATCH 2/5] =?UTF-8?q?style:=20=E4=BC=98=E5=8C=96=E6=9A=97?= =?UTF-8?q?=E8=89=B2=E6=A8=A1=E5=BC=8F=E8=83=8C=E6=99=AF=E5=8A=A8=E7=94=BB?= =?UTF-8?q?=E7=9A=84=E9=9A=8F=E6=9C=BA=E5=8C=96=E8=8C=83=E5=9B=B4=E5=92=8C?= =?UTF-8?q?=E9=80=BB=E8=BE=91?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 调整暗色模式背景动画的CSS变量随机化范围，使其覆盖整个屏幕 - 将主辉光、补丁和锥形渐变焦点的位置随机范围扩展为全屏 (0-100%) - 微调光束角度和线条间隙的随机范围，使变化更自然 - 为锥形渐变焦点添加垂直方向随机偏移，增强动态效果 - 在代码中添加注释以明确各变量的作用 --- pages/_app.js | 29 ++++++++++++++++++++++------- styles/globals.css | 2 +- 2 files changed, 23 insertions(+), 8 deletions(-) diff --git a/pages/_app.js b/pages/_app.js index 174493f..7a4823e 100644 --- a/pages/_app.js +++ b/pages/_app.js @@ -21,15 +21,30 @@ function MyApp({ Component, pageProps }) { root.style.setProperty('--paper-glow-y', `${randomInt(2, 24)}%`); root.style.setProperty('--paper-patch-x', `${randomInt(46, 92)}%`); root.style.setProperty('--paper-patch-y', `${randomInt(36, 92)}%`); - root.style.setProperty('--shadow-beam-angle', `${randomInt(104, 156)}deg`); + + // Dark mode background position randomization + // Beam angle: 100-160 deg + root.style.setProperty('--shadow-beam-angle', `${randomInt(100, 160)}deg`); root.style.setProperty('--shadow-beam-alpha', random(0.08, 0.2).toFixed(3)); - root.style.setProperty('--shadow-line-gap', `${randomInt(26, 56)}px`); + + // Line gap: 20-60px + root.style.setProperty('--shadow-line-gap', `${randomInt(20, 60)}px`); root.style.setProperty('--shadow-line-alpha', random(0.14, 0.3).toFixed(3)); - root.style.setProperty('--shadow-glow-alpha', random(0.12, 0.28).toFixed(3)); - root.style.setProperty('--shadow-glow-x', `${randomInt(6, 36)}%`); - root.style.setProperty('--shadow-glow-y', `${randomInt(2, 30)}%`); - root.style.setProperty('--shadow-patch-x', `${randomInt(52, 94)}%`); - root.style.setProperty('--shadow-patch-y', `${randomInt(34, 92)}%`); + + // Glow alpha: 0.1-0.3 + root.style.setProperty('--shadow-glow-alpha', random(0.1, 0.3).toFixed(3)); + + // Main Glow Position (Full Screen Random): X: 0-100%, Y: 0-100% + root.style.setProperty('--shadow-glow-x', `${randomInt(0, 100)}%`); + root.style.setProperty('--shadow-glow-y', `${randomInt(0, 100)}%`); + + // Patch Position (Full Screen Random): X: 0-100%, Y: 0-100% + root.style.setProperty('--shadow-patch-x', `${randomInt(0, 100)}%`); + root.style.setProperty('--shadow-patch-y', `${randomInt(0, 100)}%`); + + // Conic Gradient Focal Point (Randomized along top edge): X: 10-90%, Y: -10-40% + root.style.setProperty('--shadow-conic-x', `${randomInt(10, 90)}%`); + root.style.setProperty('--shadow-conic-y', `${randomInt(-10, 40)}%`); }, []); return ( diff --git a/styles/globals.css b/styles/globals.css index aaac219..5a191d8 100644 --- a/styles/globals.css +++ b/styles/globals.css @@ -78,7 +78,7 @@ html, body { radial-gradient(980px 640px at var(--shadow-patch-x, 82%) var(--shadow-patch-y, 70%), rgb(30 64 175 / 0.24) 0%, transparent 72%), linear-gradient(var(--shadow-beam-angle, 128deg), rgb(255 255 255 / var(--shadow-beam-alpha, 0.14)) 0%, rgb(255 255 255 / 0) 36%, rgb(59 130 246 / 0.24) 68%, rgb(255 255 255 / 0) 100%), repeating-linear-gradient(calc(var(--shadow-beam-angle, 128deg) + 90deg), rgb(63 63 70 / var(--shadow-line-alpha, 0.22)) 0 2px, transparent 2px var(--shadow-line-gap, 42px)), - conic-gradient(from calc(var(--shadow-beam-angle, 128deg) * 0.62) at 76% 12%, rgb(34 197 94 / 0.16), transparent 28%, rgb(59 130 246 / 0.18) 52%, transparent 74%, rgb(255 255 255 / 0.12) 92%, transparent 100%), + conic-gradient(from calc(var(--shadow-beam-angle, 128deg) * 0.62) at var(--shadow-conic-x, 76%) var(--shadow-conic-y, 12%), rgb(34 197 94 / 0.16), transparent 28%, rgb(59 130 246 / 0.18) 52%, transparent 74%, rgb(255 255 255 / 0.12) 92%, transparent 100%), linear-gradient(180deg, rgba(9, 9, 11, 0.92) 0%, rgba(0, 0, 0, 1) 100%); } From 7f4ee51fcf1555522e14bd7a20b92dd96ff0aec8 Mon Sep 17 00:00:00 2001 From: NowScott Date: Wed, 18 Mar 2026 00:05:43 +0800 Subject: [PATCH 3/5] =?UTF-8?q?feat:=20=E4=B8=BA=E8=83=8C=E6=99=AF?= =?UTF-8?q?=E6=B8=90=E5=8F=98=E6=B7=BB=E5=8A=A0=E9=9A=8F=E6=9C=BA=E5=BD=A9?= =?UTF-8?q?=E8=99=B9=E8=89=B2=E5=BD=A9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 在背景的锥形渐变中引入随机彩虹色彩，提升视觉多样性。从预定义的七种鲜艳颜色中随机选择三种，每次页面加载时生成不同的色彩组合，增强动态效果。 --- pages/_app.js | 18 ++++++++++++++++++ styles/globals.css | 2 +- 2 files changed, 19 insertions(+), 1 deletion(-) diff --git a/pages/_app.js b/pages/_app.js index 7a4823e..2251759 100644 --- a/pages/_app.js +++ b/pages/_app.js @@ -45,6 +45,24 @@ function MyApp({ Component, pageProps }) { // Conic Gradient Focal Point (Randomized along top edge): X: 10-90%, Y: -10-40% root.style.setProperty('--shadow-conic-x', `${randomInt(10, 90)}%`); root.style.setProperty('--shadow-conic-y', `${randomInt(-10, 40)}%`); + + // Random Rainbow Colors for Conic Gradient + // Define a palette of 7 vivid colors with low opacity for subtle glow + const rainbowColors = [ + 'rgb(239 68 68 / 0.16)', // Red + 'rgb(249 115 22 / 0.16)', // Orange + 'rgb(234 179 8 / 0.16)', // Yellow + 'rgb(34 197 94 / 0.16)', // Green + 'rgb(59 130 246 / 0.16)', // Blue + 'rgb(99 102 241 / 0.16)', // Indigo + 'rgb(168 85 247 / 0.16)', // Violet + ]; + + // Pick 3 distinct colors randomly + const shuffled = rainbowColors.sort(() => 0.5 - Math.random()); + root.style.setProperty('--shadow-rainbow-1', shuffled[0]); + root.style.setProperty('--shadow-rainbow-2', shuffled[1]); + root.style.setProperty('--shadow-rainbow-3', shuffled[2]); }, []); return ( diff --git a/styles/globals.css b/styles/globals.css index 5a191d8..c70af96 100644 --- a/styles/globals.css +++ b/styles/globals.css @@ -78,7 +78,7 @@ html, body { radial-gradient(980px 640px at var(--shadow-patch-x, 82%) var(--shadow-patch-y, 70%), rgb(30 64 175 / 0.24) 0%, transparent 72%), linear-gradient(var(--shadow-beam-angle, 128deg), rgb(255 255 255 / var(--shadow-beam-alpha, 0.14)) 0%, rgb(255 255 255 / 0) 36%, rgb(59 130 246 / 0.24) 68%, rgb(255 255 255 / 0) 100%), repeating-linear-gradient(calc(var(--shadow-beam-angle, 128deg) + 90deg), rgb(63 63 70 / var(--shadow-line-alpha, 0.22)) 0 2px, transparent 2px var(--shadow-line-gap, 42px)), - conic-gradient(from calc(var(--shadow-beam-angle, 128deg) * 0.62) at var(--shadow-conic-x, 76%) var(--shadow-conic-y, 12%), rgb(34 197 94 / 0.16), transparent 28%, rgb(59 130 246 / 0.18) 52%, transparent 74%, rgb(255 255 255 / 0.12) 92%, transparent 100%), + conic-gradient(from calc(var(--shadow-beam-angle, 128deg) * 0.62) at var(--shadow-conic-x, 76%) var(--shadow-conic-y, 12%), var(--shadow-rainbow-1, rgb(34 197 94 / 0.16)), transparent 28%, var(--shadow-rainbow-2, rgb(59 130 246 / 0.18)) 52%, transparent 74%, var(--shadow-rainbow-3, rgb(255 255 255 / 0.12)) 92%, transparent 100%), linear-gradient(180deg, rgba(9, 9, 11, 0.92) 0%, rgba(0, 0, 0, 1) 100%); } From 7eabe23f799b746c0698b1b571859190b6c77424 Mon Sep 17 00:00:00 2001 From: NowScott Date: Wed, 18 Mar 2026 00:09:10 +0800 Subject: [PATCH 4/5] =?UTF-8?q?feat(ui):=20=E9=9A=8F=E6=9C=BA=E5=8C=96?= =?UTF-8?q?=E6=B5=85=E8=89=B2=E6=A8=A1=E5=BC=8F=E7=BA=B8=E5=BC=A0=E6=B8=90?= =?UTF-8?q?=E5=8F=98=E5=A2=9E=E5=BC=BA=E8=A7=86=E8=A7=89=E5=A4=9A=E6=A0=B7?= =?UTF-8?q?=E6=80=A7?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 在浅色模式下，为纸张背景的线性渐变添加随机角度和透明度变量，使每个页面加载时呈现独特的视觉质感。这提升了用户体验的丰富性和自然感。 --- pages/_app.js | 6 ++++++ styles/globals.css | 2 +- 2 files changed, 7 insertions(+), 1 deletion(-) diff --git a/pages/_app.js b/pages/_app.js index 2251759..beb3c05 100644 --- a/pages/_app.js +++ b/pages/_app.js @@ -22,6 +22,12 @@ function MyApp({ Component, pageProps }) { root.style.setProperty('--paper-patch-x', `${randomInt(46, 92)}%`); root.style.setProperty('--paper-patch-y', `${randomInt(36, 92)}%`); + // Randomize Light Mode Paper Gradient + root.style.setProperty('--paper-gradient-angle', `${randomInt(0, 360)}deg`); + root.style.setProperty('--paper-gradient-alpha-1', random(0.92, 0.98).toFixed(3)); + root.style.setProperty('--paper-gradient-alpha-2', random(0.94, 0.99).toFixed(3)); + root.style.setProperty('--paper-gradient-alpha-3', random(0.90, 0.96).toFixed(3)); + // Dark mode background position randomization // Beam angle: 100-160 deg root.style.setProperty('--shadow-beam-angle', `${randomInt(100, 160)}deg`); diff --git a/styles/globals.css b/styles/globals.css index c70af96..06c3cbf 100644 --- a/styles/globals.css +++ b/styles/globals.css @@ -63,7 +63,7 @@ html, body { repeating-linear-gradient(var(--paper-fiber-angle, 24deg), rgb(255 255 255 / var(--paper-fiber-alpha, 0.24)) 0 1.2px, transparent 1.2px var(--paper-fiber-gap, 11px)), repeating-linear-gradient(calc(var(--paper-fiber-angle, 24deg) + 83deg), rgb(120 113 108 / var(--paper-grain-alpha, 0.1)) 0 1px, transparent 1px calc(var(--paper-fiber-gap, 11px) * 1.35)), conic-gradient(from calc(var(--paper-fiber-angle, 24deg) * 1.2) at 22% 16%, rgb(255 255 255 / 0.35), transparent 26%, rgb(245 158 11 / 0.07) 43%, transparent 61%, rgb(254 243 199 / 0.3) 82%, transparent 100%), - linear-gradient(158deg, rgba(255, 251, 245, 0.95) 0%, rgba(250, 244, 234, 0.97) 42%, rgba(241, 233, 220, 0.93) 100%); + linear-gradient(var(--paper-gradient-angle, 158deg), rgba(255, 251, 245, var(--paper-gradient-alpha-1, 0.95)) 0%, rgba(250, 244, 234, var(--paper-gradient-alpha-2, 0.97)) 42%, rgba(241, 233, 220, var(--paper-gradient-alpha-3, 0.93)) 100%); } .dark .app-background { From 1996381e5e587b4b64fe15d58ad9b638d6f38970 Mon Sep 17 00:00:00 2001 From: NowScott Date: Wed, 18 Mar 2026 00:13:20 +0800 Subject: [PATCH 5/5] =?UTF-8?q?docs:=20=E6=9B=B4=E6=96=B0=E5=85=B3?= =?UTF-8?q?=E4=BA=8E=E9=A1=B5=E9=9D=A2=E6=96=87=E6=A1=88=E4=BB=A5=E5=8F=8D?= =?UTF-8?q?=E6=98=A0=E4=BA=A7=E5=93=81=E5=AE=9A=E4=BD=8D=E8=BD=AC=E5=8F=98?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 将产品描述从“探索独立网页”更新为“互联网时代的个人黄页”，并重写核心价值主张的文案，以更准确地传达产品作为高效、精准的个人网络索引工具的新定位。 --- pages/about.js | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) diff --git a/pages/about.js b/pages/about.js index f19d648..4ad67a4 100644 --- a/pages/about.js +++ b/pages/about.js @@ -36,7 +36,7 @@ const AboutPage = ({ count, lastFetched, posts }) => {

- 探索互联网的角落，发现那些有趣且独立的网页 + 互联网时代的个人黄页，让寻找回归准确与高效

@@ -45,27 +45,27 @@ const AboutPage = ({ count, lastFetched, posts }) => {
-

独立精神

+

个人黄页

- 我们致力于发掘那些不随波逐流、充满个性和创意的独立个人网站，让互联网回归本心。 + 像互联网初期的黄页一样，构建属于你自己的索引。不再迷失于搜索引擎的广告与杂讯中，只保留最精准、最常用的入口。

-

精心收录

+

数据掌控

- 每一个被收录的网页都经过人工审核，确保其内容的质量和独特性，拒绝信息碎片。 + 利用 Notion API，将你的收藏夹变为可视化的数据库。添加标签、描述，让数据的管理与展示完全由你掌控，既是工具也是资产。

-

开源共建

+

极致体验

- IndWebIndex 是一个完全开源的项目。任何人都可以通过提交 Issue 或投稿来丰富我们的索引库。 + 现代化的设计、毫秒级的响应、平滑的交互。我们通过双层缓存和 React 状态管理，消除了 Notion API 的延迟，让每一次点击都如丝般顺滑。