diff --git a/pages/_app.js b/pages/_app.js index 174493f..beb3c05 100644 --- a/pages/_app.js +++ b/pages/_app.js @@ -21,15 +21,54 @@ 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`); + + // 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`); 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)}%`); + + // 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/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/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 的延迟，让每一次点击都如丝般顺滑。

diff --git a/styles/globals.css b/styles/globals.css index a4cf14a..06c3cbf 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%), @@ -53,17 +63,22 @@ 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 { + /* 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%), 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%), 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%); }